I have the layout in the following picture
The Code : fiddle
The problem is when I have multiple tabs like (first tab & second tab) the content in the second tab do not respect the scroll bar, so it drow the content as there is no scroll
but when I Remove the first tab as the second picture (comment the line 15) i got it working perfectly.
So, How can I have multible tabs and keep the eadge between the scroll and the send tab panel contents ?
Short
Your example works for me.
improved Alternative
I would recommend to add the scrollable to the component inside the tabpanel.
Usually the height is defined by the height of the child components.
I guess you are using minHeight to simulate things.
Here is my approach in Detail:
Ext.define('myapp.layout', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [
{xtype: 'panel', title: 'north', region: 'north', height: 100, border: 1},
{xtype: 'panel', title: 'west', region: 'west', width: 100, border: 1},
{
xtype: 'tabpanel', region: 'center',
items: [
{xtype: 'panel', title: 'first tab'},
{xtype: 'panel', title: 'second tab',
// =>
scrollable: true,
bodyPadding: 10,
layout: {type: 'vbox', pack: 'start', align: 'stretch'},
items: [
{xtype: 'panel', title: 'First Line', height: 100, border: 1},
{xtype: 'panel', title: 'Second Line',
// =>
minHeight: 900, flex: 1,
border: 1},
]
},
]
}
]
});
Here I simulate that second line ends up with a height of 900 ==> therefore the scrollable is set to the parent component.
Related
I have the following application that contains two panels. The height of the first one set to 75% of the screen area and the second panel set to take up the bottom 25% of the screen. I have been working on this for a couple hours and I the button contained in the second panel that is supposed to be taking up the bottom 25% of the screen always shows up at the top. I am new to Sencha and JS any help would be appreciated:
Ext.application({
name : 'MyApp',
launch : function()
{
Ext.onReady(function ()
{
var panel = Ext.create('Ext.panel.Panel', {
title: 'Test 2',
autoScroll: true,
forceFit: true,
layout: { type: 'vbox', align: 'fit', padding: 5},
items:
[
{ xtype: 'panel', height: '75%', layout: { type: 'vbox', align: 'fit', padding: 5}},
{ xtype: 'panel', height: '25%', layout: { type: 'vbox', align: 'fit', padding: 5}, items:[ { itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' } ]}
]
});
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [panel]
});
});
}
});
You can try use the flex property for the panels, and instead of using percentages, set the panel 1 to fit to entire height and the panel 2 to a specific height, just like the following code:
layout: { type: 'vbox', align: 'stretch', padding: 5},
items:
[
{ xtype: 'panel', flex: 1, layout: { type: 'vbox', align: 'fit', padding: 5}},
{ xtype: 'panel', height: 100, layout: { type: 'vbox', align: 'fit', padding: 5},
items:[
{ itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' }
]}
]
You can check the following example: http://jsfiddle.net/rx7Lfo55/
What is difference beetween layout:'hbox' and layout:'column'? Is it only syntax?
Example 'column':
layout:'column',
items: [{
title: 'Width = 25%',
columnWidth: .25,
html: 'Content'
},{
title: 'Width = 75%',
columnWidth: .75,
html: 'Content'
},{
title: 'Width = 250px',
width: 250,
html: 'Content'
}]
Example 'hbox':
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{html:'panel 1', flex:1},
{html:'panel 2', width:150},
{html:'panel 3', flex:2}
]
There are a couple of distinct advantages of column that have not been covered. It is much more lightweight than hbox. Column just lets the browser layout its contents with floats instead of setting the left it also has less markup than an hbox. It also handles overflows better in most cases.
For example in a column layout vs a hbox on a window
var win = Ext.create('Ext.Window', {
width: 700,
height: 400,
title: "Column",
defaults: {
height: 50,
width: 300
},
layout: {
type: 'column'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One'
},{
xtype: 'panel',
title: 'Inner Panel Two'
},{
xtype: 'panel',
title: 'Inner Panel Three'
}]
});
win.show()
var win2 = Ext.create('Ext.Window', {
width: 700,
height: 400,
title: "Hbox",
defaults: {
height: 50,
width: 300
},
layout: {
type: 'hbox'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One'
},{
xtype: 'panel',
title: 'Inner Panel Two'
},{
xtype: 'panel',
title: 'Inner Panel Three'
}]
});
win2.show()
To sum it up think of column as an auto layout that floats things to the left and hbox as a box layout which adds the functionality like stretch and pack. They both have their versions of flexing.
Column existed in an earlier version of the framework before VBox and HBox. It's mostly been kept for compatibility reasons. HBox offers more functionality (pack and align), amongst other things.
Column
doesn't have autoheight and HBox does, all the region is full.
Take a look at these examples :
http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
i had made a panel with number of buttons in it like this,
Ext.define('BeLocal.view.Test', {
extend: 'Ext.Panel',
config: {
fullScreen: true,
height: 482,
width: 324,
scrollable: 'vertical',
items: [
{
xtype: 'button',
text: 'MyButton1'
},
{
xtype: 'button',
top: '30%',
text: 'MyButton2'
},
{
xtype: 'button',
top: '50%',
text: 'MyButton3'
},
{
xtype: 'button',
top: '96%',
text: 'MyButton4'
},
{
xtype: 'button',
top: '110%',
text: 'MyButton5'
}
]
}
});
i can show only 3 buttons now.
i want this panel scrollable so that i can show all the buttons by scrolling it down, i had set property scrollable: 'vertical' , but it doesn't work.
When i remove position of all buttons like top:50% scroll works properly, but i want all the buttons on proper position.
how can i fix this problem ?
As per the documentation:
http://docs.sencha.com/touch/2-1/#!/api/Ext.Button-cfg-top
top : Number/String
The absolute top position of this Component; must be a valid CSS length value, e.g: 300, 100px, 30%, etc. Explicitly setting this value will make this Component become 'floating', which means its layout will no longer be affected by the Container that it resides in.
Try setting style config:
items: [{
xtype: 'button',
text: 'MyButton1'
},{
xtype: 'button',
style:'margin-top: 10%;',
text: 'MyButton2'
},{
xtype: 'button',
style:'margin-top: 50%;',
text: 'MyButton3'
},{
xtype: 'button',
style:'margin-top: 96%;',
text: 'MyButton4'
},{
xtype: 'button',
style:'margin-top: 110%;',
text: 'MyButton5'
}]
Seems to works for me.
I want the following layout (the chart count in the top right is dynamic):
I tried to take a border-layout for the main container. Chart1 is region: 'west' and the rest is in region: 'center'.
In the center, I got a vbox container, with 2 containers, one for the charts (top) and one is the grid (bottom)
The Problem is now, that these 2 containers want a fixed width, or else they get a zero width...
Also I want to have all the containers to be fluid, so I can resize everything without getting empty spaces.
I read about using flex: 1 if I want some containers in a vbox to to get a 100% width, but this didn't work. It just made the 2 containers in the vbox use the same height.
Any ideas?
How about something like this (quickly drawn in the architect):
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 600,
width: 1000,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'My Window',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'fit'
},
items: [{
xtype: 'chart'
}]
}, {
xtype: 'container',
flex: 4,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}]
}, {
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
}]
}]
});
me.callParent(arguments);
}
});
Although that way the Flex value of the second container has to account for the amount of charts you're displaying horizontally.
Have you tried table layout? It's quite easy to create such layout with it. Example:
Ext.onReady(function(){
Ext.create('Ext.Viewport', {
renderTo: Ext.getBody(),
style: 'border: 1px solid red',
layout: {
type: 'table',
columns: 5,
tdAttrs: {
style: 'padding: 20px; border: 1px solid blue;'
}
},
defaults: {
bodyStyle: 'border: 1px solid red'
},
items: [
{ xtype: 'panel', html: 'Chart1', rowspan: 2 },
{ xtype: 'panel', html: 'Chart2' },
{ xtype: 'panel', html: 'Chart3' },
{ xtype: 'panel', html: 'Chart4' },
{ xtype: 'panel', html: 'Chart5' },
{ xtype: 'panel', html: 'Grid', colspan: 4 }
]
});
});
Working sample: http://jsbin.com/ojijax/1/
To have dynamic layout IMO the best solution is to use hbox and vbox layouts.
For example you can wrap charts from 2 to n into one container, let's say chartPanel - this will have hbox layout. Then wrap chartPanel and grid into another container - panel with vbox layout. Then again wrap chart1 with panel with hbox layout. Then you must set align: stretch for each box layout, and proper flex to divide screen equaly.
Working sample: http://jsfiddle.net/75T7h/
I think you are loading chart2, 3, 4 , 5 in a for loop using panel.add option of extjs (better way).
If so then keep a count of these panels (here 4) and for each panel while assigning width you give like
width:(1/countOfchrtLIst2345) * grid.getWidth(),
So whatever count comes it will divide available width between all these horizontal panels within your top vbox and allocates.
In your example it assigns
(1/4) * 200
(thinking grid has width of 200)
I have a panel containing two children panels.the parent panel uses "border" layout, while two children panels use "form" and "column" layouts respectively. now How can I make these two children panels resize accordingly when window resizes, i.e., make sure the size ratio of these two panels is constant.
thanks!
my codes are as follows:
itemRts = {
xtype: 'panel',
title: 'Route',
region: 'north',
autoHeight: true,
layout: 'form',
width: 294,
bodyStyle: 'padding:10px 12px 10px',
id: 'ROUTE_PANEL',
el: 'Route_Setup',
items: [
{
xtype: 'button',
text: 'Go',
anchor: '0',
id: 'GO_BTN'
}]
};
itemEvts = {
xtype: 'panel',
title: 'Events',
region: 'center',
layout: 'column',
tpl: 'Please put events here.',
//bodyStyle: 'padding:10px 12px 10px',
border: false,
hideBorders: true,
id: 'EVENT_PANEL',
el: 'Event_Legend',
autoScroll: true
};
newView = new Ext.Viewport({
layout: "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
width: 200,
layout: 'border',
split: true,
boxMaxWidth: 280,
minWidth: 280,
id: 'RTS_EVTS_REGION',
collapseMode: 'mini',
items: [
itemRts,
itemEvts]
}]
});
how to modify above codes to make it work as what I want?
thanks again!
You can set a resize event for container panel and call "dolayout" method of their children in case of resize :
newView = new Ext.Viewport({
layout: "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
width: 200,
layout: 'border',
split: true,
boxMaxWidth: 280,
minWidth: 280,
id: 'RTS_EVTS_REGION',
collapseMode: 'mini',
items: [itemRts, itemEvts],
listeners: {
'resize': function () {
itemRts.doLayout();
itemEvts.doLayout();
}
}
}]
});
for your main container, i suggest hbox and/or vbox layouts. those layouts are what you are looking for. here a sample:
var testPanel = new Ext.Viewport( {
id : 'vp_test',
layout : 'hbox',
align : 'stretch',
items : [
{
id : 'pnl_child_1',
title : 'Test 1',
flex : 2
},
{
id : 'pnl_child_2',
title : 'Test 2',
flex : 3,
layout : 'vbox',
align : 'stretch',
items : [
{
id : 'pnl_child_3',
title : 'Test 3',
flex : 1
},
{
id : 'pnl_child_4',
title : 'Test 4',
flex : 1
}
]
},
]
} );
you can refer to documentation, viewport, hbox, vbox
itemRts = {
xtype: 'panel',
title: 'Route',
// region: 'north', <<< we don't need this anymore
flex: 1, // this means that this container has 1 flexible share
// autoHeight: true, <<< this will ruin all layout
layout: 'form',
// width: 294, <<< we don't need this anymore
bodyStyle: 'padding:10px 12px 10px',
id: 'ROUTE_PANEL',
el:'Route_Setup',
items: [
{
xtype:'button',
text:'Go',
anchor:'0',
id:'GO_BTN'
}
]
};
itemEvts = {
xtype: 'panel',
title: 'Events',
// region: 'center', <<< we don't need this anymore
flex: 1, // this means that this container has 1 flexible share
layout: 'column',
tpl: 'Please put events here.', // <<<< if you're not going to use xTemplates you should use html property instead
//bodyStyle: 'padding:10px 12px 10px',
border: false,
hideBorders: true,
id: 'EVENT_PANEL',
el : 'Event_Legend',
autoScroll: true
};
newView = new Ext.Viewport({
//// if you have only one child component you can use fit layout for viewport.
//// and consider removing that only child. use viewport as main container.
layout : "border",
items: [
{
xtype: 'panel',
margins: '10 0 10 10',
region: 'center',
// width: 200, <<<< width has no effect on center region
/// we'll use hbox with align stretch
layout: 'hbox',
align: 'stretch',
// split: true, <<<< split has no effect on center region
// boxMaxWidth: 280, <<<< no effect
// minWidth: 280, <<<< no effect
id: 'RTS_EVTS_REGION',
// collapseMode: 'mini', <<<< collapse properties has no effect on center region
items: [
itemRts,
itemEvts
]
}
]
});