Extjs 3.3.1具有布局拟合的FieldSet和其中的网格不会在窗口大小调整时调整网格大小

Question

var colModel = new Ext.grid.ColumnModel({
      columns: [ columns here...]
})

var grid = new Ext.Ext.grid.GridPanel({
   store: store,
   loadMask: true,
   autoExpandColumn: 'itemDescription',
   stripeRows: true,
   colModel: colModel
})

var form = new Ext.FormPanel({
   labelWidth: 150,
   bodyStyle: 'padding:2px 5px;',
   autoScroll: true,
   items:[
     new Ext.form.FieldSet({
       layout: 'fit',
       collapsible: true,
       height:300,
       items: [
            grid 
       ]
     }
   ]
})

一旦窗口调整大小，网格不会改变其宽度... 任何想法???

Answer 1

您的Grid会根据FieldSet的{​​{1}}调整大小。由于layout: 'fit'没有布局设置，因此会自动使用FormPanel。 layout: 'form'将充当普通 FieldSet，因此需要配置为自行调整大小。这可以使用Form Field：

的anchor属性来完成

FormLayout

这会告诉var form = new Ext.FormPanel({ labelWidth: 150, bodyStyle: 'padding:2px 5px;', autoScroll: true, items:[ new Ext.form.FieldSet({ layout: 'fit', anchor: '-0', collapsible: true, height:300, items: [ grid ] } ] }); 始终与FieldSet的右边缘保持0像素。

Answer 2

试试这个......

var colModel = new Ext.grid.ColumnModel({
  columns: [ columns here...]
})

var grid = new Ext.Ext.grid.GridPanel({
store: store,
loadMask: true, 
autoExpandColumn: 'itemDescription',
stripeRows: true,
colModel: colModel
})

var form = new Ext.FormPanel({
labelWidth: 150,
bodyStyle: 'padding:2px 5px;',
autoScroll: true,
items : {
   xtype : 'fieldset',
   title : 'Give proper Title',
   defaults: {
      anchor: '100%'
   },
   layout: 'anchor',
   collapsible: true,
   items: grid
}
});