Question

请建议如何将我的网格放在一个页面上。我试图将3个网格面板放在两行中，每个网格之间有相当大的空间。面板。我有三个CRUD网格填充了来自DB（和它的商店）的数据：

var UserGrid = Ext.create（'Ext.grid.Panel'，{...}）;

var RoleGrid = Ext.create（'Ext.grid.Panel'，{...}）;

var Map = Ext.create（'Ext.grid.Panel'，{...}）;

现在我想把它们放在不同的位置，就像我之前提到的那样。所以，我希望能够在视口中引用我现有的网格。

这是我提问的一部分。另外，我对Sencha的ExtJS文档非常恼火。我知道很多人都说它很精致。我很困惑我在每个Ext JS对象中使用的配置或属性或方法。文档详细介绍了它们，但我无法掌握何时使用它们。我们什么时候使用'config'中给出的选项？我们什么时候使用'属性'中给出的选项。我们什么时候使用“事件”中给出的选项？更重要的是我们如何使用它们!!

Answer 1

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

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

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

<强>更新

通常情况下，您的视口定义中会有某个位置：

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
      ...
   }]
   ... 
}]

如果您没有网格的特殊变量（例如，如果您不想手动创建它们但让ExtJ为您创建它们），则会出现这种情况。

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

如果您想事先创建网格（可能有某些原因，但我很少这样做），您需要在创建时将region配置传递到第一个网格：

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

然后将视口代码更改为以下内容：

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

Answer 2

如前所述，您必须学会使用不同的布局。请参阅此demo以了解可用的内容。

现在，关于doc的结构，'configs'，'methods'，'properties'和'events'实际上是三个不同的概念，但只有config特定于Ext。其他是面向对象的概念。

简而言之：

属性是绑定到对象的变量。在Ext的上下文中，它们几乎总是只读的。这并不意味着你无法改变它们的价值（在Javascript中无法阻止），但你不应该。因此，您使用poperties从现有对象中读取信息。例如：
```
if (checkbox.checked) { ... }
```
配置选项是您在创建对象时可以使用的选项。 Ext中的几乎所有构造函数都接受一个参数，一个名为config对象的对象。因此，在创建对象时使用配置选项：
```
Ext.create('Ext.window.Window', {
    width: 200,
    height: 200,
    ...
});
```
Methods是给属于对象的函数的名称。与属性不同，当您使用方法时，代码正在运行，因此这就是您用于执行操作的内容。
```
window.show();
// using the animate parameter
window.show(true);
```
事件是应用程序中发生的事情。您可以通过attaching listeners（也称为回调函数）对它们做出反应。为doc中的事件指定的参数是将通过回调方法的参数。
```
// E.g. displaying an alert when a button is clicked
button.addListener(
    // name of the event
    'click',
    // the callback function
    function() {
        alert('Clicked!');
    }
)
```

Extport中的Ext Grid定位或其他东西

2 个答案: