Panel with accordion layout is contained in vbox with another one item.
I have a 2 troubles:
When i'm trying to set flex to panel with accordion layout it causes the error "[E] Layout run failed"
When height is fixed by constand it not working as expected: first panel does not collapse.
Here is example of code:
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'vbox',
items: [{
xtype: 'datefield'
}, {
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
},
layout: {
// layout-specific configs go here
type: 'accordion',
titleCollapse: true,
animate: true
},
items: [{
title: 'Panel 1',
html: 'Panel content 1!'
}, {
title: 'Panel 2',
html: 'Panel content 2!'
}, {
title: 'Panel 3',
html: 'Panel content 3!'
}],
}],
renderTo: Ext.getBody()
});
http://jsfiddle.net/6DHM4/1/
I couldn't reproduce your error, but things look good for me with flex: 1 if I change the layout: 'vbox' to
layout: {
type: 'vbox',
align: 'stretch'
}
(see this fiddle)
may be the right way is to use layout 'anchor' against 'vbox'?
try that way?
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
width: 300,
height: 500,
layout: 'anchor',
items: [
{xtype: 'datefield'},
{
defaults: {
// applied to each contained panel
bodyStyle: 'padding:15px'
,anchor: '100%'
},
...
I don't know why, but when i test it on jsfiddle.net it shows bug: 'first panel does not collapse'. But if i test it here http://try.sencha.com/ for example, it works fine.
Related
I am using ExtJS viewport border layout. in order to create a north, center and south region. The first issue faced is that the viewport could not display a scrollbar for its contents, so i used a panel inside the viewport and added panels inside them with the location i wanted:
Ext.create('Ext.container.Viewport', {
id: 'viewportContainer',
layout: {
type: 'border',
align: 'center'
},
forceFit: 'true',
items : [{
layout:'anchor',
scroll:true,
autoScroll:true,
region : 'center',
xtype : 'panel',
items : [ {
region: 'north',
xtype: 'panel',
bodyStyle: {
'background': 'none'
},
items: [upperPanel, messagePanel()]
},{
layout:'anchor',
form: searchForm.id,
id: 'innerBody',
region : 'center',
xtype : 'panel',
items : [searchForm, gridPanel ]
} ,{
region: 'south',
xtype: 'panel',
items: [bottomPanel]
} ]
} ]
}
What i want to do is
stick the bottomPanel to the bottom of the page, if the other
contents are shorter than the viewable area (clientHeight) and
if they are taller, let the footer be located right below the innerBody section.
The current implementation places the footer right below the innerBody panel but doesn't stick to the bottom when all the contents of the page are shorter than the viewable area(clientHeight)
Any help would be highly appreciated!
Thank you
I'm doing the following code please check it.
Mycode:
Ext.create('Ext.container.Viewport', {
id: 'viewportContainer',
layout: {
type: 'border',
align: 'center'
},
forceFit: 'true',
items : [{
layout:'anchor',
scroll:true,
autoScroll:true,
region : 'center',
xtype : 'panel',
items : [ {
region: 'north',
xtype: 'panel',
bodyStyle: {
'background': 'none'
},
items: [upperPanel, messagePanel()]
},{
layout:'anchor',
form: searchForm.id,
id: 'innerBody',
region : 'center',
xtype : 'panel',
minHeight:'540',
items : [searchForm, gridPanel ]
} ,{
region: 'south',
xtype: 'panel',
items: [bottomPanel]
} ]
} ]
}
I'm only applying the 'minHeight' property to the'innerBody' panel. It works. Please try it.
I have a problem with a collapsible panel that is an item of a panel with border layout in ExtJS 4.2.2.
Basiclly it is the following structure:
Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
height: 400,
width: 600,
title: 'TestPanel',
renderTo: Ext.getBody(),
items: [
{ xtype: 'toolbar', items: [{xtype: 'button', text: 'test1'}, {xtype: 'button', text: 'test2'}, {xtype: 'button', text: 'test3'}]},
{
xtype: 'panel',
items: [
{ xtype: 'toolbar', items: [{xtype: 'button', text: 'another1'}, {xtype: 'button', text: 'another2'}, {xtype: 'button', text: 'another3'}]},
{
xtype: 'panel',
layout: 'border',
height: 600,
width: 200,
items: [
{xtype: 'panel', title: 'options', html: 'lalalalalalalalalala', region: 'west', width: 100, height: 100, collapsible: true, collapsed: true},
{xtype: 'panel', html: 'lalalalalalalalalala', region: 'center', width: 100, height: 100}
]
}
]
}
]
});
});
Here is the corresponding fiddle:
http://jsfiddle.net/jLugR/
When you uncollapse the option panel everything works fine. When you collapse it again, it breaks the layout. Do you have any idea what the problem is and how I can handle it?
Looks like child panel's(border layout) height is more than the parent panel's height.. Make sure that the height of all child elements together not exceeds parents height.
Check the fiddle by changing the height of the panel with border layout to 250, it works..
I have an html page and render a panel with layout: 'border' on it.
I render it to a div with renderBody config.
when I run the page I gives this error: layout run fails.
this is my ExtJs code
Ext.create('Ext.panel.Panel', {
//width: 500, // I want to fit this panel to parent element
//that i render this panel to it
//height: 300, //
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region',
region: 'south',
xtype: 'panel',
height: 100
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
width: 200,
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit'
}],
renderTo: 'div-Id'
});
What should I do ?
Give you main panel a height...this will resolve the issue. See here for an example: https://fiddle.sencha.com/#fiddle/ma
I am using layout: 'hbox'for a container and this contain has four child items as below
label
Continer having textfield and div for message
label
Container having textfield and div for message
I want all these four elements to be displayed horizontally in single line, that's why I used HBox layout, but its showing only first two child items. I looked up generated html and found that items 3 and 4 are generated but are getting position incorrectly.
Here is jsfiddle link for below code http://jsfiddle.net/5znVE/
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
width: '100%',
bodyPadding: 10,
items: [{
xtype: 'container',
id: 'chkNumberCtnr',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'label',
cls: 'field-label',
text: 'from Check Number',
}, {
xtype: 'container',
id: 'frmChkFldCntr',
cls: 'field-container',
items: [{
xtype: 'textfield',
id: 'fromChk'
}, {
xtype: 'container',
id: 'frmChkMessage',
cls: 'error-message',
html: '<div>This is required field</div>'
}]
}, {
xtype: 'label',
text: 'to Check Number'
},{
xtype: 'container',
id: 'toChkFldCntr',
cls: 'field-container',
items: [{
xtype: 'textfield',
id: 'toChk'
}, {
xtype: 'container',
id: 'toChkMessage',
cls: 'error-message',
html: '<div>This is required field</div>'
}]
}]
}
]
});
Add flex: 1 to all four of your child items in order to have them size automatically to fill the available width.
I've two nested container and I wanto to fit vertically (only vertically) the first container to the page size, and the second container to the first container size.
In case of resize of the page all containers should resize themselves automatically.
I'm not able to do this feature. I think that is a layout problem.
This is my sample code and my jsfiddle:
Ext.onReady(function() {
myPanel = Ext.create('Ext.container.Container', {
layout:'fit',
flex:1,
width:100,
renderTo: Ext.getBody(),
items: [{
xtype:'container',
layout : {
type : 'vbox',
align : 'stretch'
},
items:[
{
//this is the right panel not collapsible
xtype : 'panel',
border:true,
//hidden:false,
bodyBorder:true,
padding: '5 5 5 5',
itemId:'right',
//default layout of inner element is hbox
layout : {
type : 'hbox',
//align : 'stretch'
},
//takes all possible space
flex : 1
}]}
]
});
});
http://jsfiddle.net/eternasparta/yxeSG/
thank you all!
View port is the key element that monitors browser size.
http://jsfiddle.net/dbrin/6r7Dd/
var myPanel = Ext.create('Ext.panel.Panel', {
layout: 'fit',
width: 200,
title: 'Panel 1',
items: [{
xtype: 'panel',
title: 'Panel 2',
layout: 'fit',
items: [{
xtype: 'panel',
title: 'Right P',
padding: '5'
}]
}]
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'hbox',
align: 'stretch'
},
items: [myPanel]
});