Ext网格定位在视口或其他东西

Ext Grid positioning in Viewport or something

本文关键字：其他 视口 网格 定位 Ext      更新时间：2023-09-26

请建议我如何在一个页面上定位我的网格。我试图将3个网格面板放在两行，每个网格面板之间有体面的空间。我有三个CRUD网格填充的数据从数据库(和它的存储):

var UserGrid = Ext.create('Ext.grid. create ')面板'，{…}）;

var RoleGrid = Ext.create('Ext.grid. ')面板'，{…}）;

var Map = Ext.create('Ext.grid. create ')面板'，{…}）;

现在我想把它们放在不同的位置，就像我之前提到的。因此，我希望能够在Viewport或其他地方引用我现有的网格。

这是我问题的一部分。此外，我对Sencha上的ExtJS文档真的很恼火。我知道很多人说它很精致。我非常困惑我在每个Ext JS对象中使用的配置或属性或方法。文档确实详细说明了它们，但我无法掌握何时使用什么。我们什么时候使用'config'中给出的选项?我们什么时候使用properties中给出的选项?我们什么时候使用events中给出的选项?更重要的是我们如何使用它们!!

您需要查看布局系统如何在ExtJs中工作:http://docs.sencha.com/extjs/4.2.1/#!/指导/layouts_and_containers

对于您的特定情况，我认为您需要配置viewport与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
      ...
   }]
   ... 
}]

如果你没有grid的特殊变量(例如，如果你不手动创建它们，而是让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]
   ... 
}]

如前所述，您必须学会使用不同的布局。看一下这个演示，了解一下有什么可用的。

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

简而言之:

  • 属性是绑定到对象上的变量。在Ext上下文中，它们几乎总是只读的。这并不意味着你不能改变它们的值(在Javascript中不可能阻止)，但是你不应该。因此，您可以使用属性从现有对象中读取信息。例如:

    if (checkbox.checked) { ... }

  • 配置选项是在创建对象时可以使用的选项。Ext中几乎所有的构造函数都接受一个参数，即一个名为config对象的对象。所以当你创建一个对象时，你可以使用配置选项:

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

  • Methods是属于对象的函数的名称。与属性不同，当你使用方法时，代码正在运行，所以这就是你用来做事情的。

    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!');
    }
)
相关文章：