Ok, this has been buggin me for a while and I finally figured out why this is happening. Every add-on I build that has a manager interface, if I change the size of my browser window, the grid will not resize with the panel. Yet, when I'm on the user's form, the grid will resize and the columns will adjust with the size of the browser window. When I changed the add-on from "xtype: 'modx-tabs'" to "layout: 'form'" my add-on grid will resize with the width of the browser window. In fact, when I'm using firefox's firebug, I can watch the element style adjust the width of the columns in a form grid while changing the window size, but there is no width in the style element in a tab grid.
Is this a bug, or is this expected?
Form method if only one grid is needed:
Doodles.panel.Main = function(config) {
config = config || {};
Ext.apply(config,{
border: false
,baseCls: 'modx-formpanel'
,bodyStyle: ''
,defaults: { collapsible: false ,autoHeight: true }
,cls: 'container'
,items: [{
html: '<h2>'+_('doodles.doodles_manager')+'</h2>'
,border: false
,cls: 'modx-page-header'
},{
layout: 'form'
,items: [{
html: '<p>'+_('doodles.doodles.desc')+'</p>'
,bodyCssClass: 'panel-desc'
,border: false
},{
xtype: 'doodles-grid-myaddon'
,cls:'main-wrapper'
,preventRender: true
}]
}]
});
Doodles.panel.Main.superclass.constructor.call(this,config);
};
Ext.extend(Doodles.panel.Main,MODx.Panel);
Ext.reg('doodles-panel-main',Doodles.panel.Main);
Tab method if multiple grids needed:
Doodles.panel.Main = function(config) {
config = config || {};
Ext.apply(config,{
border: false
,baseCls: 'modx-formpanel'
,bodyStyle: ''
,defaults: { collapsible: false ,autoHeight: true }
,cls: 'container'
,items: [{
html: '<h2>'+_('doodles.doodles_manager')+'</h2>'
,border: false
,cls: 'modx-page-header'
},{
xtype: 'modx-tabs'
,defaults: { border: false ,autoHeight: true }
,border: true
,items: [{
title: _('doodles.doodles_manager')
,defaults: { autoHeight: true }
,items: [{
html: '<p>'+_('doodles.doodles.desc')+'</p>'
,border: false
,bodyCssClass: 'panel-desc'
},{
xtype: 'doodles-grid-myaddon'
,cls: 'main-wrapper'
,preventRender: true
}]
}]
}]
});
Doodles.panel.Main.superclass.constructor.call(this,config);
};
Ext.extend(Doodles.panel.Main,MODx.Panel);
Ext.reg('doodles-panel-main',Doodles.panel.Main);
