PDA

View Full Version : Panel layout - resize browser



Zdeno
10 Mar 2010, 6:42 AM
When i resize the window of browser then i see shadow rectangle. I tried everything like autoWeight, cls with width 100% but nothing work.

I tried debug code with firebug and everything works fine when i changed width of north and center panel to 100% except width of columns on gridpanel coz ExtJS count those values automatically.

When i use autoWidth on those two container autoWidth, they resize just to see all components on those panels and nothing else like free space.

Does anyone can help me with those problem? How i can set up autoWidth on GridPanel and FormPanel?

Is there any fire event called when is windows of browser resized? The view is re-rendered when i click on another tab and then going back to Mailman tab.



...
Ext.ux.mailman.mainPanel = new Ext.Panel({
title: 'Mailman'
,height: 400
,autoWidth: true
,cls: 'auto-width-tab-strip'
,layout: 'border'
,items: [
{
xtype: 'container'
,region:'west'
,autoWidth: true
,layout: 'fit'
,items: Ext.ux.mailman.sourcePanel
},{
region: 'center'
,xtype: 'container'
,layout: 'fit'
,items: Ext.ux.mailman.viewGrid
},{
region: 'north'
,autoHeight: true
,xtype: 'container'
,layout: 'fit'
,items: Ext.ux.mailman.form
}]
});
...




...
Ext.ux.mailman.viewGrid = new Ext.grid.GridPanel({
store: Ext.ux.mailman.viewGridStore
,autoWidth: true
,height: 272
,frame: true
,colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{ header: 'Name', width: 200, sortable: true, dataIndex: 'name' }
,{ header: 'Corporation', width: 200, sortable: true, dataIndex: 'corporation' }
,{ header: 'E-mail', width: 200, sortable: true, dataIndex: 'email' }
]
})
,viewConfig: {
forceFit:true
}
,sm: new Ext.grid.RowSelectionModel({singleSelect:true})
,ddGroup: 'mailmanDDGroup'
,enableDrag: false
,enableDrop: true
});
...




...
Ext.ux.mailman.form = {
xtype: 'form'
,id: 'mailman-info-form'
,labelWidth: 100
,autoWidth: true
,autoHeight: true
,defaultType: 'textfield'
,bodyStyle: 'padding: 15px 15px 0 15px'
,buttonAlign: 'left'
,frame: true
,items: [
{ fieldLabel: 'Session name', width: 200 },
Ext.ux.mailman.status
]
,buttons: [{
text: 'Save mailman'
,style: 'padding-left: 235px'
,handler: function(button,event) {
}
}]
};
...

Animal
10 Mar 2010, 6:49 AM
Use a Viewport