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

Posted 2023-02-26

【中文标题】具有布局适合和网格的 Extjs 3.3.1 FieldSet 在窗口调整大小时不会调整网格大小

【英文标题】：Extjs 3.3.1 FieldSet with layout fit and grid in it does not resize the grid on window resize

【发布时间】：2012-04-19 06:07:16

【问题描述】：

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 
       ]
     
   ]
)

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

【问题讨论】：

这将有助于了解整个容器结构，而不仅仅是 Grid 被放置在 FieldSet 内，而 FieldSet 又在 FormPanel 内。你确定它不是没有调整大小的FieldSet 吗？如果您将anchor: '-0' 放在FieldSet 上，有帮助吗？

你可以写成答案，我会接受的

【参考方案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 像素。

【参考方案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

);