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.
Related
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'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]
});
I am using sencha touch carousel, in which i am using horizontal swipe. Which works perfect.
But within that i am using panels which i want to scroll vertically(scroll each page to the bottom). How to do that? I have given scroll:'vertical' in each panel as follows:
var myFirstPage = Ext.Panel({
id:'tableId',
iconCls:'myToolBar',
style:'overflow:auto;' ,
scroll:'vertical',
items:.........});
Ext.setup( {
onReady: function() {
myCarouselId = new Ext.Carousel({
fullscreen: true,
id:'myCar',
items : [ myFirstPage]...............});
But i cant scroll the panel to the bottom . Where am going wrong?
Sencha touch vertical scroll content in a horizontal carousel . Accroding to this stackoverflow answer we can scroll child contents vertically in horizontal carousel , same issue like me. But i am doing the same here , which i cant scroll.
My child panel contains vbox and hbox layout.
Can somebody answer my question ?
Try this, it worked for me and i got it from sench forum
set the scrollable config in Panel
scrollable : {
direction : 'vertical',
directionLock : true
}
Example
var myFirstPage = Ext.Panel({
id:'tableId',
iconCls:'myToolBar',
scrollable : {
direction : 'vertical',
directionLock : true
},
items:.........});
Ext.setup( {
onReady: function() {
myCarouselId = new Ext.Carousel({
fullscreen: true,
id:'myCar',
items : [ myFirstPage]...............});
see this fiddle
Edit: If you want 'hbox' usability inside your panels, you need to fit its width inside the container.
If it will need to create scrollbars of its own, it will fail to do so.
What you need is to define scrolling differently:
scrollable: {
direction: 'vertical',
directionLock : true
}
Like this:
var carousel = Ext.create('Ext.Carousel', {
fullscreen: true,
items : [
{ xtype: 'panel',
scrollable: {
direction: 'vertical',
directionLock: true
},
html: 'This panel is scrollable!',
items: [{
xtype: 'textfield',
name : 'first',
label: 'First'
},
{
xtype: 'textfield',
name : 'second',
label: 'Second'
},{
xtype: 'textfield',
name : 'third',
label: 'Third'
},{
xtype: 'textfield',
name : 'first1',
label: 'First1'
},
{
xtype: 'textfield',
name : 'second1',
label: 'Second1'
},{
xtype: 'textfield',
name : 'third1',
label: 'Third1'
},{
xtype: 'textfield',
name : 'first12',
label: 'First12'
},
{ xtype: 'panel',
layout: 'hbox',
width: 200,
items: [{
xtype: 'textfield',
name : 'first-box',
label: 'First-box'
},
{
xtype: 'textfield',
name : 'second-box',
label: 'Second-box'
},{
xtype: 'textfield',
name : 'third-box',
label: 'Third-box'
}]
}, {
xtype: 'textfield',
name : 'second12',
label: 'Second12'
},{
xtype: 'textfield',
name : 'third12',
label: 'Third12'
}]
}, {
xtype: 'panel',
scroll:'vertical', // will not work
html: 'This panel is not scrollable!',
}]
});
You can try this within any live preview of sencha docs
Hope this helps
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.