PDA

View Full Version : Resizing grid inside column inside panel



silve69
9 Sep 2009, 11:13 AM
Hello friends,

I'm here again with a doubt...

I have the follow code in the west region:


west.on('clickMenu', function(itemMenu){
var tab;
var tp = Ext.getCmp('tabpanel');
if (!(tab = tp.findById(itemMenu.id)))
var tab = tp.add(eval(itemMenu.id+'_panel')); // this return "viewCand_panel"
tp.setActiveTab(tab);
});


And the follow code...


viewCandidates_panel = new Ext.FormPanel({
id: 'company-form',
frame: true,
labelAlign: 'left',
title: 'Company data',
bodyStyle:'padding:5px',
width: 750,
layout: 'column',
items: [{
columnWidth: 0.60,
layout: 'fit',
items: {
xtype: 'grid',
ds: [.......],
cm: [.......],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
Ext.getCmp("company-form").getForm().loadRecord(rec);
}
}
}),
autoExpandColumn: 'company',
height: 350,
title:'Company Data',
border: true,
bbar: [{
xtype: 'paging',
pageSize: 25,
store: ds,
displayInfo: true,
}],
listeners: {
render: function(g) {
g.getSelectionModel().selectRow(0);
},
delay: 10 // Allow rows to be rendered.
}
}
},{
columnWidth: 0.4,
xtype: 'fieldset',
labelWidth: 90,
title:'Company details',
defaults: {width: 140, border:false}, // Default config options for child items
defaultType: 'textfield',
autoHeight: true,
bodyStyle: Ext.isIE ? 'padding:0 0 5px 15px;' : 'padding:10px 15px;',
border: false,
style: {
"margin-left": "10px", // when you add custom margin in IE 6...
"margin-right": Ext.isIE6 ? (Ext.isStrict ? "-10px" : "-13px") : "0"
},
items: [{
fieldLabel: 'Name',
name: 'company'
},{
fieldLabel: 'Price',
name: 'price'
},{
fieldLabel: '% Change',
name: 'pctChange'
},{
xtype: 'datefield',
fieldLabel: 'Last Updated',
name: 'lastChange'
}, {
xtype: 'panel',
layout: 'table',
layoutConfig: {
columns: 4
},
anchor: '100%',
defaults: {
border: false,
layout: 'form',
labelWidth: 15,
style: {
paddingRight: '10px'
}
},
items: [{
cellCls: 'x-form-item',
xtype: 'label',
text: 'Rating',
width: 98
}, {
items: {
xtype: 'radio',
name: 'rating',
inputValue: '0',
fieldLabel: 'A'
}
}, {
items: {
xtype: 'radio',
name: 'rating',
inputValue: '1',
fieldLabel: 'B'
}
}, {
items: {
xtype: 'radio',
name: 'rating',
inputValue: '2',
fieldLabel: 'C'
}
}]
}]
}]
});


As you can see, I have a tabpanel and I'm creating a dynamic tab, this tab has a column layout with a grid and a form inside them... and my problem is: when I'm resizing the browser everything are resizing successful except the grid, and I can't see the bottom bar (paging component)
I was trying to include "autoHeight:true" and "layout:fit" inside the column setup without success, what can I do for fixing that??

Best regards,
Silver