视口中的Ext Grid定位或其他东西

Question

请建议我如何将网格放置在单个页面上。我试图将 3 个网格面板放在两行中，每个 grid.Panel 之间有适当的空间。我有三个 CRUD Grids 填充了来自 DB 的数据（它是 store）：

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 对象中使用了哪些配置或属性或方法。文档确实详细说明了它们，但我无法掌握何时使用什么。我们什么时候使用“配置”中给出的选项？我们什么时候使用“属性”中给出的选项。我们什么时候使用“事件”中给出的选项？更重要的是我们如何使用它们！！

Answer 1

你需要看看布局系统在 ExtJs 中是如何工作的：http://docs.sencha.com/extjs/4.2.1/#!/guide/layouts_and_containers

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

我还建议您指定您使用的 ExtJs 版本。

更新：

所以通常你的视口定义中会有某处：

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',
   ... 
}); 

然后把视口代码改成这样：

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

Answer 2

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

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

简而言之：

• 属性是绑定到对象上的变量。在 Ext 的上下文中，它们几乎总是只读的。这并不意味着您不能更改它们的值（在 Javascript 中无法阻止），而是 您不应该。因此，您使用属性从现有对象中读取信息。例如：

  if (checkbox.checked) { ... }
  

• 配置选项是您在创建对象时可以使用的选项。 Ext 中几乎所有的构造函数都接受一个参数，一个称为配置对象的对象。因此，您在创建对象时使用配置选项：

  Ext.create('Ext.window.Window', {
      width: 200,
      height: 200,
      ...
  });
  

• 方法是赋予属于对象的函数的名称。与属性不同的是，当您使用方法时，代码正在运行，因此您可以使用它来做事。

  window.show();
  // using the animate parameter
  window.show(true);
  

• 事件是在应用程序中发生的事情。您可以通过attaching listeners（也称为回调函数）对它们做出反应。文档中为事件提供的参数将传递给您的回调方法。

  // E.g. displaying an alert when a button is clicked
  button.addListener(
      // name of the event
      'click',
      // the callback function
      function() {
          alert('Clicked!');
      }
  )