javascript - Ext Grid 定位在视口(viewport)或其他东西中

Question

请建议我如何将网格放置在单个页面上。我试图将 3 个网格面板放置在两行中，每个网格面板之间有适当的空间。我有三个 CRUD 网格，其中填充了来自数据库(及其存储)的数据:

var UserGrid = Ext.create('Ext.grid.Panel', { ... });

var RoleGrid = Ext.create('Ext.grid.Panel', { ... });

var Map = Ext.create('Ext.grid.Panel', { ... });

现在我想将它们放置在不同的位置，就像我之前提到的那样。因此，我希望能够在视口(viewport)或其他内容中引用现有的网格。

这是我问题的一部分。另外，我真的对 Sencha 上的 ExtJS 文档感到非常恼火。我知道很多人都说它很复杂。我对每个 Ext JS 对象中使用的配置、属性或方法感到非常困惑。该文档确实详细说明了它们，但我无法掌握何时使用什么。我们什么时候使用“config”中给出的选项？我们什么时候使用“属性”中给出的选项。我们什么时候使用“事件”中给出的选项？更重要的是我们如何使用它们!!

Answer 1

您需要了解布局系统在 ExtJs 中的工作原理:http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers

对于您的特定情况，我认为您需要使用 border 布局配置视口(viewport)，将第一个网格放入 center 区域，并为其他两个网格创建一个容器南部地区。

此外，我建议指定您正在使用的 ExtJs 版本。

更新:

所以通常你的视口(viewport)定义中会有这样的地方:

layout: 'border'
items: [{
   xtype: 'panel', // This your UserGrid
   region: 'center',
   ... 
}, {
   xtype: 'container',
   region: 'south',
   layout: 'vbox',
   items: [{
      xtype: 'panel', // This your RoleGrid
      flex: 1
      ...
   }, {
      xtype: 'panel', // This your Map
      flex: 1
      ...
   }]
   ... 
}]

如果您没有网格的特殊变量(即，如果您不会手动创建它们，而是让 ExtJs 为您创建它们，则情况会如此。

现在，如果您在这些网格内有任何特殊的逻辑或配置，那么您可以定义自己的类并从标准面板/网格继承它们。在这种情况下，您显然可以将上面代码中的 xtype: 'panel' 更改为适合您的类的 xtype 。

如果您想预先创建网格(可能有某种原因，但我很少这样做)，您需要在创建时将 region 配置传递给您的第一个网格:

var UserGrid =  Ext.create('Ext.grid.Panel', {
   region: 'center',
   ... 
}); 

然后将视口(viewport)代码更改为如下所示:

layout: 'border'
items: [userGrid, {
   xtype: 'container',
   region: 'south',
   layout: 'vbox',
   items: [RoleGrid, Map]
   ... 
}]