0

请建议我如何将网格放置在单个页面上。我试图将 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 对象中使用了哪些配置、属性或方法。文档确实详细说明了它们，但我无法掌握何时使用什么。我们什么时候使用“配置”中给出的选项？我们什么时候使用“属性”中给出的选项。我们什么时候使用“事件”中给出的选项？更重要的是我们如何使用它们！

4

2 回答 2

1

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

现在，关于文档的结构，“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);

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

    // E.g. displaying an alert when a button is clicked
button.addListener(
    // name of the event
    'click',
    // the callback function
    function() {
        alert('Clicked!');
    }
)
于 2013-06-05T22:26:12.797 回答
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]
   ... 
}]
于 2013-06-05T21:33:19.263 回答