Extjs gridpanel 不会在 tabPanel 内水平扩展

发布于 2024-08-11 04:11:29 字数 1119 浏览 8 评论 0原文

我的 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
  ],

原文

Each of my 3 Extjs gridpanels do not expand horizontally within a tabPanel.

The each grid's properties:

  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's properties:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只想待在家 2024-08-18 04:11:29

布局不是 GridPanel 的有效属性。

尝试使用：

viewConfig: { forceFit: true }

代替

Layout is not a valid property for a GridPanel.

Try using:

viewConfig: { forceFit: true }

instead

回复收藏 0 原文

苏辞 2024-08-18 04:11:29

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

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

..所以我只是设置不是网格的布局，而是将网格的父级布局设置为我想要的任何值（在我的情况下，父容器包含除网格之外的其他内容，所以我设置布局：“锚点”，然后通过设置锚点：“100% 100%”，我使网格尽可能扩展），

现在我已经可以使用了：D yayyyy！

回复收藏 0 原文

梦途 2024-08-18 04:11:29

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

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

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

It's the layout of the container that you have to set, ie:

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

Fit layouts mean that there is only one item in the container and it should expand to take all available space. Remove all explicit references to width, autoWidth, etc.

回复收藏 0 原文

~没有更多了~