PDA

View Full Version : help needed about viewport layout



extremed
10 Mar 2012, 2:56 PM
Hi

Im trying to add new tabs to viewport tab panel and once i add the content everytime it stretch content to maximum width available in tab

any idea how to prevent that and limit the width to specified value ?

this is the viewport


Ext.define('Myapp.view.Viewport', {
extend: 'Ext.container.Viewport',

layout: 'border',
items: [{
region : 'center',
xtype : 'dataviewer' //tab panel
},{
region : 'north',
xtype : 'myapp_header'
.......

tab panel code is


Ext.define(Myapp.view.DataViewer', {
extend: 'Ext.tab.Panel',
alias: 'widget.dataviewer',

activeItem : 0,
margins : '0 5 0 5',
bodyPadding : 20,

initComponent: function() {
this.callParent(arguments);
}
});

i add content like this


var viewer = this.getDataviewer();
var grid1 = Ext.create('Myapp.view.CustomerList');
viewer.add(grid1);
viewer.doLayout();

grid code is


Ext.define('Ehapp.view.CustomerList', {
extend : 'Ext.grid.Panel',
alias : 'widget.customerlist',

height : 200,
width : 600,
store : 'Items',

initComponent: function()
{
Ext.apply(this, {

columns : [..... ],
});
this.callParent();
}
});

i want grid to be width 600 but once its add as new tab its uses maximum width over 600

any idea why and how to prevent?


Regards

vietits
10 Mar 2012, 5:08 PM
TabPanel uses 'card' layout which is extended from 'fit' layout so its children will automatically expand to fill the layout's container.

To solve the problem you mentioned you can put the grid inside a panel instead of putting directly in tab. Something likes this


Ext.define('Myapp.view.CustomerList', {
extend: 'Ext.panel.Panel',
alias : 'widget.customerlist',
border: false,

initComponent: function(){
Ext.apply(this, {
items: [{
xtype: 'grid',
height: 200,
width : 600,
columns: [{
text: 'col 1'
}]
}]
});
this.callParent();
}
});

extremed
10 Mar 2012, 11:53 PM
yea that did the trick