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

由於layout: 'fit'，您的Grid將根據FieldSet調整大小。由於FormPanel沒有設置佈局，因此它會自動使用layout: 'form'。 FieldSet將作爲正常Form Field，因此需要進行配置以自行調整大小。這可以使用FormLayout的anchor屬性來完成：

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總是從FormPanel的右邊緣留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 
} 
});