Javascript 在视口中定位外部栅格或其他东西

请建议如何在单个页面上定位网格。我正在尝试将3个网格面板放置在两行中，每个Grid.Panel之间有适当的空间。我有三个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文档非常恼火。我知道很多人说这是精心制作的。我非常困惑在每个ExtJS对象中使用什么配置、属性或方法。文档中确实对它们进行了详细说明，但我无法掌握何时使用什么。何时使用“配置”中给出的选项？何时使用“属性”中给出的选项。我们何时使用“事件”中给出的选项？更重要的是，我们如何使用它们

您需要了解布局系统如何在ExtJs中工作：

对于您的特殊情况，我认为您需要使用

边框

布局配置视口，将第一个网格放置在

中心

区域，并为

南部

区域中的其他两个网格创建一个容器

此外，我还建议指定您使用的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为您创建它们），这将是正确的

现在，如果您在这些网格中有任何特殊的逻辑或配置，那么您可以定义自己的类并从标准的panel/grid继承它们。在这种情况下，您显然可以使用适当的

xtype

为您的类更改上面代码中的

xtype:'panel'

如果您想事先创建网格（这可能是有原因的，但我很少这样做），您需要在创建第一个网格时将

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中无法阻止），但您不应该更改它们的值。因此，您可以使用poperties从现有对象读取信息。例如：

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

---

rixo，非常感谢您向我介绍这些事情的背景。我将尝试在此基础上进行更多的探索。再次感谢您。Sha，我以前也看过这些内容。医生说：[{xtype:'panel'，title:'Child panel 1'，}，{xtype:'panel'，title:'Child panel 2'，}]虽然这听起来可能太琐碎了，但这正是我想要的。例如：但我不想添加新的面板。我想在我的视口/容器中引用我已经创建的内容。所以，就像xtype、title一样，我是否可以在“items”中使用任何其他配置来引用页面上的现有组件。你能帮我编写一些代码吗？发布了一些代码示例。您还没有指定使用哪个版本的ExtJs操作my bad.ExtJs 4.2。这是您提供的一个非常好的参考Sha。今天我会告诉您我的试用结果。再次感谢。谢谢Sha。它确实帮助我理解布局的内容。