Extjs 3.3.1中使用布局fit的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 
       ]
     }
   ]
})

网格在窗口调整大小时不会改变其宽度... 有什么想法吗？

- AMember

---

了解整个容器结构会有所帮助，而不仅仅是知道“Grid”放置在“FieldSet”内部，而“FieldSet”又放置在“FormPanel”内部。您确定不是“FieldSet”没有调整大小吗？如果在“FieldSet”上放置“anchor: '-0'”，这是否有帮助？ - Chau

以下是有关编程的内容，需要从英语翻译成中文。请仅返回翻译后的文本：您可以将其作为答案写下来，我会接受它。 - AMember

Answer 1

您的Grid将根据FieldSet进行调整大小，因为使用了layout: 'fit'。由于FormPanel未设置布局，因此自动使用layout：'form'。 FieldSet将充当普通表单字段，因此需要配置其自身大小。这可以使用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像素的距离。

- Chau

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
}
});

- Snehal Dangroshiya