I'm about to go crazy.
I have my panels configured as follows:
accordion = new Ext.Panel({
id: 'accordionPanel',
title: 'Options',
region: 'center',
animCollapse: true,
border: false,
minWidth: 150,
maxWidth: 400,
autoScroll: true,
autoHeight: true,
layout: 'accordion',
layoutConfig: {
animate: true
}
});
var panelOne = new Ext.Panel({
region: 'center',
layout: 'border',
defaults: {
collapsible: true,
split: true
},
items: [{
title: 'Navigation',
region: 'west',
margins: '5 0 0 0',
animCollapse: true,
autoScroll: true,
autoHeight: true,
width: 200,
minWidth: 150,
maxWidth: 400,
layout: 'border',
layoutConfig: {
animate: true
},
items: [
Ext.Panel({
region: 'north',
border: false,
collapsible: false,
height: 65,
align: 'center',
html: myHtmlSource
}),
accordion
]
}, {
title: 'Main Content',
region: 'center',
layout: 'absolute',
listeners: {
'close': Ext.bind(this.onPortletClose, this)
},
items: [someWindows],
collapsible: false,
margins: '5 0 0 0'
}]
});
viewport = new Ext.Viewport({
layout: 'border',
id: 'viewport',
items: [panelOne]
})
accordionPanel has a bunch of grids like this one inside of it:
var myGrid = new Ext.grid.Panel({
id: 'myGrid',
layout: 'anchor',
border: false,
title: 'My Grid',
width: 412,
store: store,
heigth: 300,
frame: false,
columns: [myColumns],
.....
});
Each of those grids is a separate accordion tab.
Now my problem is that those grids never display scrolls.
Just to be clear, this looks like the border layout that is displayed here.
Except that the navigation panel has an accordion inside of it with multiple grids in it.
Can't think of anything else to try.
Anyone?
Related
I have two panels inside a container (layout: fit) and both panels need to be collapsible horizontal.
To realize this I need to have three panels (2 panels with region: west and one panel region center) like this:
defaults: {
collapsible: true,
split: true,
margin: 1,
padding: 1,
height: '100%'
},
items: [{
title: 'west 1',
floatable: false,
flex: 100,
region: 'west'
}, {
hidden: true,
collapsed: true,
region: 'center',
flex: 1,
split: false
}, {
title: 'west 2',
floatable: false,
flex: 100,
floatable: false,
region: 'west',
split: false
}]
It works but the extra panel is very uggly!. Does anyone have a better sollution?
regards,
Arno
Use it like below code snippet:
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Container',
layout: 'hbox',
defaults: {
collapsible: true,
collapseDirection: 'left',
margin: 1,
height: '100%'
},
items: [{
title: 'west 1',
width: 100
}, {
title: 'west 2',
floatable: false,
flex: 1,
split: false
}],
renderTo: Ext.getBody()
});
Working Example
Hope this will help/guide you.
I need some help about a form with a textarea field.
My problem.
I have a simple Ext.window in which I have put an Ext.FormPanel. In this Ext.FormPanel I have put an Ext.form.FieldSet in which I have put some fields. One of these field is a textarea (Ext.form.TextArea),
Now, my objective is to render responsive this textarea when I resize the Ext.window.
It is possible to obtain this behavior?
This is my current code:
Window in which reside the Ext.FormPanel
var win = new Ext.Window({
id:'winTest',
layout:'fit',
modal:true,
title:'Title',
width:590,
height:300,
closeAction:'close',
plain: true,
autoScroll: true,
items:[form],
listeners: {
'beforeclose': function (p) {
}
}
});
Ext.FormPanel in which reside the Ext.form.FieldSet
var form = new Ext.FormPanel({
id:'FormTest',
layout : 'form',
width:510,
labelAlign: 'right',
labelWidth: 120,
autoScroll:true,
bodyStyle:'padding:2px;background-color:#E9EFF8;',
monitorValid:true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad:true,
items: [fieldset]
});
Fieldset in which I have put some fileds
var fieldset = Ext.form.FieldSet({
id:'fsTest',
autoHeight: true,
defaultType: 'textfield',
items:[.....,textarea]
//boxMaxWidth:450
//border:true
})
Textarea putted in the fieldset (to shorted, I have reported only the textarea)
var textarea = new Ext.form.TextArea({
id:'textareaTest',
name:'TextArea',
fieldLabel:'Insert',
hidden:false,
width:310,
height:60,
maxLength:500,
allowBlank: true
});
Thanks for any precious help.
Lorenzo.
It should be like this:-
var win = new Ext.Window({
id: 'winTest',
layout: 'vbox',
modal: true,
title: 'Title',
width: 590,
height: 300,
closeAction: 'close',
plain: true,
autoScroll: true,
items: [{
xtype: 'form',
id: 'FormTest',
flex: 1,
layout: 'vbox',
width: 510,
labelAlign: 'right',
labelWidth: 120,
autoScroll: true,
bodyStyle: 'padding:2px;background-color:#E9EFF8;',
monitorValid: true,
waitMsgTarget: true,
border: true,
bodyBorder: true,
trackResetOnLoad: true,
items: [{
xtype: 'fieldset',
id: 'fsTest',
//autoHeight: true,
flex: 1,
layout: 'vbox',
//defaultType: 'textfield',
items: [{
xtype: 'textarea',
flex: 1,
id: 'textareaTest',
name: 'TextArea',
fieldLabel: 'Insert',
hidden: false,
width: 310,
//height: 60,
maxLength: 500,
allowBlank: true
}]
//boxMaxWidth:450
//border:true
}]
}]
}).show();
Please have a look at this example
I have included an 'accordion' layout, which is included in 'west' region of a 'border' layout. But the align : 'stretch' property is not working for the accordion layout.
Accordion Layout
var user_menu_items = new Ext.Panel({
layout: 'accordion',
height: 565,
align: 'stretch',
id: 'usermenu',
items: [{
layout: 'fit',
title: 'Configuration',
id: 'menulist1',
html: 'Group1 Content',
collapseFirst: true
}, {
title: 'User Action Group2',
id: 'menulist2',
html: 'Group2 Content'
}, {
title: 'User Action Group3',
id: 'menulist3',
html: 'Group3 Content'
}]
});
Border Layout
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
layout: 'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:2px'
},
items: [{
title: 'USER MENU',
region: 'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 225,
minSize: 100,
maxSize: 250,
collapsible: true,
collapsed: false,
bodyStyle: 'padding:0px',
items: [user_menu_items]
}]
}],
renderTo: Ext.getBody()
});
I am using extjs-4.2.2
you can try below:
var user_menu_items = new Ext.Panel({
layout: 'accordion',
//height: 565,
//align: 'stretch',
id: 'usermenu',
items: [{
layout: 'fit',
title: 'Configuration',
id: 'menulist1',
html: 'Group1 Content',
collapseFirst: true
}, {
title: 'User Action Group2',
id: 'menulist2',
html: 'Group2 Content'
}, {
title: 'User Action Group3',
id: 'menulist3',
html: 'Group3 Content'
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
layout: 'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:2px'
},
items: [{
title: 'USER MENU',
region: 'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 225,
minSize: 100,
maxSize: 250,
collapsible: true,
collapsed: false,
bodyStyle: 'padding:0px',
layout: 'accordion', // <------- ADD THIS LINE TO WEST PANEL.------------------>
items: [user_menu_items]
}]
}],
renderTo: Ext.getBody()
});
If I am not mistaken, Ext.panel.Panel does not have a config option align.
What does have a config option align is the Ext.layout.container.Accordion.
So the code would be:
var user_menu_items = new Ext.Panel({
layout: {
type:'accordion',
align: 'stretch'
},
height: 565,
...
I got a viewport and within the center region a window.
When I try to move the window to the top of the center region, the window doesn't stay on the top.
I note that the window is positioned at the top + the height of the north region.
This is the code:
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout: 'border',
forceFit: true,
hideMode: 'offsets',
items: [
{
region:'north',
id:'btns',
height: 150,
layout:
{
type: 'hbox',
padding:'5',
align:'stretch'
},
items:[]
}, {
region: 'east',
autoScroll: true,
border: false,
items:[{
xtype: 'container',
id: 'page_gauche1',
width: 500,
height: 920,
border: false
}]
}, {
region: 'center',
id: 'center',
autoScroll: true,
border: true,
items: {
xtype: 'container',
id: 'page_gauche4',
width: 1400,
height: 920,
border: false,
hidden: true
}
}]
});
Ext.create('Ext.Window', {
layout: 'fit',
border: false,
header: true,
draggable: true,
resizable: true,
autoShow: true,
constrain: true,
renderTo: 'center',
width: 300,
height: 200
});
});
A window is a floating component you should not use renderTo here! In addition you should never set the id on your own if it can be avoided!
Do you this?
Fiddle
{
region: 'center',
id: 'center',
autoScroll: true,
border: true,
items: {
xtype: 'container',
id: 'page_gauche4',
width: 1400,
height: 920,
border: false,
hidden: true
},
listeners: {
boxready: function(self) {
Ext.create('Ext.Window', {
layout: 'fit',
border: false,
autoShow: true,
constrain: true,
constrainTo: self.getEl(),
width: 300,
height: 200
});
}
}
}
I wan to apply horizontal scrollbar in my panel(ExtJS)
my code is...
var reportPanel = new Wtf.Panel({
border: false,
title: "Chart View",
autoScroll: true,
iconCls: "pwndCRM piechartIcon",
bodyStyle: 'background:white',
layout: 'border',
tbar: [this.pieChartButton, this.barChartButton],
closable: true,
items: [new Wtf.Panel({
id: mainpanid + "center_panel",
autoScroll: true,
//columnWidth:.47,
layout: "fit",
border: true,
region: "center",
width: '50%',
collapsible: true
})
, new Wtf.Panel({
id: mainpanid + "east_panel",
autoScroll: true,
border: true,
layout: "fit",
//columnWidth:.48,
region: "east",
width: '50%',
collapsible: true
})
]
});
It is not working can anybody tell what is wrong with code...?