Question

我的3个Extjs网格面板中的每一个都不会在tabPanel中水平扩展。

每个网格的属性：

  id: grid_id,
  ds: ds,
  cm: cm,
  loadMask:      true,
  view:          grouping_view,
  plugins:       [expander, filters],
  stateId:       which + '-grid-stateId',
  stateful:      true,
  stateEvents:   ['datachanged', 'columnresize', 'columnmove', 'sortchange', 'columnvisible', 'columnsort', 'hide', 'show', 'expand', 'collapse'],
  selModel:      checkbox,
  // height:        400,
  width:         GRID_WIDTH,
  defaults:      {autoHeight: true},
  autoHeight:    true,
  collapsible:   false,
  animCollapse:  false,
  layout:        'fit',

TabPanel的属性：

  id:         'tab_panel',
  renderTo:   'tabs',
  activeTab:  0,
  enableTabScroll:  true,
  defaults:   {autoScroll:true, authHeight:true},
  plugins:    new Ext.ux.TabCloseMenu(),
  width:      GRID_WIDTH + 2,
  autoHeight: true,
  items: [       // put items in tabpanel like this. adding via method call forces them to render/load befire user clicks on them
     owned_grid,
     managed_grid,
     subscribed_grid
  ],

Answer 1

布局不是GridPanel的有效属性。

尝试使用：

viewConfig: { forceFit: true }

代替

Answer 2

我正在论坛上搜索一种方法，让我的网格自动调整大小，但找不到解决方案，没有任何效果......然后我读了Ext Js GridPanel文档：“

网格需要的宽度为滚动列，高度为滚动它的行。这些可以设置尺寸明确地通过高度和宽度配置选项或通过使用网格作为隐式设置将要的容器的子项有一个布局管理器提供其子项目的大小（例如网格的容器可以指定布局： '适合'）“

..所以我只是设置不是网格的布局，而是将网格的PARENT布局为我想要的任何值（在我的情况下，父容器除了网格之外还包含其他东西，所以我设置布局：'anchor'，然后通过设置锚点：'100％100％'我尽可能地扩展网格。

现在我正在工作：D yayyyy！

Answer 3

这是您必须设置的容器布局，即：

var tp = new Ext.TabPanel({
    items: [{
        title: 'First tab',
        layout: 'fit',
        items: new Ext.GridPanel({ title: "Grid panel" })
    },{
        title: 'Second tab'
    }]
});

适合布局意味着容器中只有一个项，它应该展开以占用所有可用空间。删除对width，autoWidth等的所有显式引用。

Extjs gridpanel不会在tabPanel中水平扩展

3 个答案: