I have a collapsible panel and when I open it in IE (v 11)/Edge, it collapses again. The code is working fine in Chrome, Firefox.
I created a sample, you can try in sencha fiddle:
Ext.application({
name : 'Fiddle',
launch : function() {
this.container = new Ext.panel.Panel({
width: '100%',
height: 500,
title: 'Main',
layout: 'border',
renderTo: Ext.getBody()
});
this.container.add({
xtype:'panel',
region: 'east',
width: 300,
collapsible: true,
collapsed: true,
title: 'Collapsible'
});
}
});
If I add something on the 'center' region, it works fine (also gives a JS error while center is undefined)
Ext.application({
name: 'Fiddle',
launch: function() {
this.container = new Ext.panel.Panel({
width: '100%',
height: 500,
title: 'Main',
layout: 'border',
renderTo: Ext.getBody()
});
this.container.add({
xtype: 'panel',
region: 'center',
title: 'Center',
});
this.container.add({
xtype: 'panel',
region: 'east',
width: 300,
collapsible: true,
collapsed: true,
title: 'Collapsible'
});
}
});
UPDATE
By overriding Ext.panel.Panel's placeholderExpand function and replacing the center.hidden = false; row with center && center.hidden = false; the problem is resolved. (Maybe they forgot to check, where hidden is set to true, there is a check)
Related
Ext.application({
name: 'Fiddle',
launch: function() {
var mainView = new Ext.panel.Panel({
xtype: 'panel',
//title: 'Container',
layout: 'border',
itemId: 'bigContainer',
height: '100vh',
items: [{
xtype: 'panel',
//title: 'Left Panel',
itemId: 'menuLeftPanel',
region: 'west',
scrollable: true,
//width: 300,
//height: 900,
dockedItems:
[{
xtype: 'tabpanel',
collapseMode: 'header',
//animCollapse: 200,
dock: 'left',
id: 'moduleTas',
itemId: 'moduleTabs',
width: 400,
collapsible: true,
headerPosition: 'left',
hideCollapseTool: true,
//activeTab: 0,
tabBarHeaderPosition: 0,
tabRotation: 0,
items: [{
xtype: 'panel',
scrollable: 'y',
tabConfig: {
xtype: 'tab',
iconCls: 'x-fa fa-home',
tooltip: "Home",
listeners:
{
click: function(btn, e, eOpts)
{
var tab = Ext.getCmp('moduleTas');
tab.toggleCollapse();
}
}
},
},
]
},
]
}],
renderTo: Ext.getBody()
});
}
});
Sencha provides an "Admin Dashboard" example application when you download the framework, that implements collapsible side navigation. All the source code for the below layout (and every component found in the kitchen sink) can be found in the framework download.
Admin Dashboard
Admin Dashboard Source Code
This isn't something you should be recreating yourself (defeats the point of using a framework like Extjs)
I'm using ExtJS 3.3.2 and I have a panel with some panels nested in vbox and hbox. The problem is easy: My data from items inside hbox are not showing, I tried modifying weight and height but it never shows up. Looking at the code (F12), I see the data is created, but the panels have a very tiny size.
var i = 0;
jsonResp.forEach(function(currentItem) {
i++;
var panel = new Ext.Panel({
id: 'superpanel'+i,
layout: 'vbox',
height: 50,
frame: true,
collapsible: true,
items: [{
xtype: 'panel',
id: 'jsonObject'+i,
layout: 'hbox',
frame: true,
align: 'stretch',
items:[{
id: 'codigo'+i,
xtype: 'panel',
html: currentItem.codigo
},{
id:'nombre'+i,
xtype: 'panel',
html: currentItem.nombre
},{
xtype: 'panel',
html: currentItem.estado.toString()
}]
},{
xtype: 'panel',
id: 'aviso'+i,
html: "Error"
}]
})
Ext.getCmp("contenedor").add(panel);
});
Ext.getCmp("contenedor").doLayout();
I want to create this:
What is wrong? I tried it with width/height and flex but it doesn't work.
width: "100%" and flex can be used to resolve this issue.
Here is how I resolved it.
Ext.onReady(function () {
var viewport = new Ext.Viewport({
items: [{
xtype: "panel",
title: "Test one",
width: 500,
height: 800,
id: "contenedor",
autoScroll: true
}]
});
//delay for adding dynamic content
setTimeout(function () {
var parentPanel = Ext.getCmp("contenedor");
for (var i = 0; i < 10; i++) {
var panel = new Ext.Panel({
id: 'superpanel' + i,
layout: 'vbox',
height: 100,
frame: true,
collapsible: true,
items: [{
xtype: 'panel',
id: 'jsonObject' + i,
layout: 'hbox',
frame: true,
align: 'stretch',
flex: 3,
width: '100%',
items: [{
id: 'codigo' + i,
flex: 1,
xtype: 'panel',
html: 'Demo html 1'
}, {
id: 'nombre' + i,
xtype: 'panel',
flex: 1,
html: 'Demo html 2'
}, {
xtype: 'panel',
flex: 1,
html: 'Demo html 3'
}]
}, {
xtype: 'panel',
id: 'aviso' + i,
html: "Error",
width: "100%"
}]
});
parentPanel.add(panel);
}
parentPanel.doLayout();
}, 2000);
});
Fiddle is created with ExtJS 3.4.1.1. Sadly there is no 3.2.2 version available on sencha fiddle. But this should work with 3.2.2.
Example Fiddle (with ExtJS 3.4.1.1): https://fiddle.sencha.com/#view/editor&fiddle/28ql
I have a Ext window in that having two items container and fieldset. For container and fieldset I am geting data in form of html from server.
If this data is big, scrollbar appears not navigate the text completly.
How can I configure a vertical scrollbar properly in this panel ?
My sample code is :
Ext.create('Ext.window.Window', {
title: 'DataSet',
bodyPadding: 5,
modal: true,
height: 600,
width: 900,
layout: 'fit',
items: {
xtype: 'form',
items: [{
xtype: 'container',
html: jsonData.R.ErrorMsg || ''
}, {
xtype: 'fieldset',
padding: '5 0 10 0',
collapsible: true,
title: 'Description',
autoScroll: true,
height: 580,
width: 880,
collapsed: true,
overflowY: 'scroll',
html: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
}]
}
})
The problem is that you are setting fixed width and height to the fieldset. If you want to have the scrollbar only when the content exceed the window size you first need to set the fieldset size as flex.
Use vbox layout in form
Replace fixed height: 580 and width: 880 with flex: 1 in fieldset
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/30f9
Fieldset is not meant to be a form element(displaying html), It is meant to be a container for grouping sets of fields.
Creating a fieldset with child item text area or text field
Ext.create('Ext.window.Window', {
title: 'DataSet',
bodyPadding: 5,
modal: true,
height: 600,
width: 900,
layout: 'fit',
items: {
xtype: 'form',
items: [{
xtype: 'container',
html: jsonData.R.ErrorMsg || ''
}, {
xtype: 'fieldset',
collapsed: true,
overflowY: 'scroll',
items: [
{
xtype: 'textfield',
padding: '5 0 10 0',
collapsible: true,
title: 'Description',
height: 580,
width: 880,
itemId: 'errorDesc',
name: 'errorDesc',
fieldLabel: 'Error Desc',
value: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
}
}]
}
})
The height of the parent container i.e "Ext.window.Window" is fixed at 600. You can try giving it at '100%' increasing its height.
Ext.create('Ext.form.Panel', {
title: 'Simple Form with FieldSets',
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
layout: 'column', // arrange fieldsets side by side
items: [{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
xtype:'container',
html: Ext.String.htmlEncode("<input type=\"text\"> Hello </input>")
}, {
fieldLabel: 'Field 2',
name: 'field2'
}]
}]});
Here height is not specified and parent container's height will be based on the items it holds.
You can try this it works:
Ext.create('Ext.window.Window', {
title: 'DataSet',
bodyPadding: 5,
modal: true,
height: 600,
width: 900,
layout: 'fit',
items: {
xtype: 'form',
items: [{
xtype: 'container',
html: jsonData.R.ErrorMsg || ''
}, {
xtype: 'fieldset',
padding: '5 0 10 0',
collapsible: true,
title: 'Description',
height: 580,
width: 880,
collapsed: true,
overflowY: 'scroll',
html: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
}]
}
})
In ExtJs 3.4 I have a TabPanel with two tabs, the second tab contains a FormPanel, what contains a ButtonGroup. If the second tab is active, when I load the page, then everything is good, but when the first tab is active and I switch to the second, then there is no button in the button group, just the label. Here is the code:
var tabs = new Ext.TabPanel({
renderTo: 'tabs',
width:500,
forceLayout: true,
activeTab: 0,
deferredRender: false,
defaults:{autoHeight: true},
items:[
{contentEl:'tab1', title: 'Tab1'},
{contentEl:'tab2', title: 'Tab2'}
]
});
var form = new Ext.form.FormPanel({
width : 400,
autoHeight: true,
renderTo: 'form',
bodyStyle: 'padding: 5px',
items: [
{
xtype: 'buttongroup',
fieldLabel: 'Label',
items:
[
{
xtype: 'button',
text: 'Find By User',
width: 100,
scope: this,
handler: this.handleFind
},
{
xtype: 'button',
text: 'Find All',
width: 100,
scope: this,
handler: this.handleFindAll
}
]
}
]
});
I set the deferredRender: false and forceLayout: true, also tried the hideMode: 'offsets', but these didn't help.
Well, I add the hideMode: 'offsets' to the defaults of the TabPanel and it works fine. I did the same a few years ago without significant result.
Remove renderTo: 'form' and look at the working code here:
var form = new Ext.form.FormPanel({
width: 400,
autoHeight: true,
//renderTo: 'form',
bodyStyle: 'padding: 5px',
items: [{
xtype: 'buttongroup',
fieldLabel: 'Label',
items: [{
xtype: 'button',
text: 'Find By User',
width: 100,
scope: this,
handler: this.handleFind
}, {
xtype: 'button',
text: 'Find All',
width: 100,
scope: this,
handler: this.handleFindAll
}]
}]
});
var tabs = new Ext.TabPanel({
renderTo: 'tabs',
width: 500,
forceLayout: true,
activeTab: 0,
//deferredRender: false,
height: 300,
defaults: {
autoHeight: true
},
items: [{
contentEl: 'tab1',
title: 'Tab1'
}, {
//contentEl: 'tab2',
title: 'Tab2',
items: [form]
}]
});
I have a menu(panel) and when I expand a collapsible menu within a layout it compresses the content of the panel next to it. How to expand it over the content? Here my menu code.
Ext.define('*****.view.main.MainMenu', {
extend: 'Ext.panel.Panel',
alias: 'widget.main.MainMenu',
title: 'Menu',
collapsed: true,
dock: 'left',
minWidth: 140,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
collapseDirection: 'left',
collapsible: true,
titleAlign: 'center',
titleCollapse: false,
items: [
{
}
]
});
me.callParent(arguments);
}
});
You can make it floating, you can change it into a window (which is a specialized panel that is resizeable and floatingby default), you can change the layout of the parent container, you can wrap these two panels into a tabpanel to show one panel at a time, accordion might work for you as well if you need to see only one at a time. Check out examples from Sencha website to see different combinations.
How about something like this?
Ext.onReady(function () {
Ext.define('MainMenu', {
extend: 'Ext.panel.Panel',
title: 'Menu',
collapsed: true,
titleCollapse: false,
hideCollapseTool: true,
minWidth: 140,
region: 'west'
});
var menu = Ext.create('MainMenu');
var otherPanel = Ext.create('Ext.panel.Panel', {
title: 'Other Panel',
region: 'center'
});
var panel = Ext.create('Ext.panel.Panel', {
height: 300,
width: 500,
renderTo: Ext.getBody(),
layout: 'border',
items: [
menu,
otherPanel
]
});
});