Javascript ExtJs-在面板的中心布局中设置固定宽度

使用ExtJs

我正在尝试设计一个主面板，它分为三个子面板（树列表、网格和面板）。它的工作方式是，您有一个包含元素的树列表（west），单击填充网格的元素（center），然后单击网格中的元素并生成面板（west）

我的主面板包含其他三个面板，已定义为布局“边框”

现在，我面临的问题是，中心布局（网格）在代码中定义为固定宽度，而西面板定义为自动宽度。但是当界面生成时，网格宽度突然占用了界面中的所有空间，而不是西面板

代码如下所示：

var exploits_details_panel = new Ext.Panel({
 region: 'east',
 autoWidth: true,
 autoScroll: true,
 html: 'test'
});

var exploit_commands = new Ext.grid.GridPanel({
 store: new Ext.data.Store({
   autoDestroy: true
  }),

 sortable: true,
 autoWidth: false,
 region: 'center',
 stripeRows: true,
 autoScroll: true,
 border: true,
 width: 225,

 columns: [
  {header: 'command', width: 150, sortable: true},
  {header: 'date', width: 70, sortable: true}
 ]
});

var exploits_tree = new Ext.tree.TreePanel({
 border: true,
 region: 'west',
 width: 200,
 useArrows: true,
 autoScroll: true,
 animate: true,
 containerScroll: true,
 rootVisible: false,
 root: {nodeType: 'async'},
 dataUrl: '/ui/modules/select/exploits/tree',

 listeners: {
  'click': function(node) {
  }
 }
});

var exploits = new Ext.Panel({
 id: 'beef-configuration-exploits',
 title: 'Auto-Exploit',
 region: 'center',
 split: true,
 autoScroll: true,
 layout: {
     type: 'border',
     padding: '5',
     align: 'left'
 },

 items: [exploits_tree, exploit_commands, exploits_details_panel]
});

这里的“var漏洞利用”是我的主面板，包含其他三个子面板

“漏洞利用树”是包含一些元素的树列表。当您单击其中一个元素时，将填充网格“利用”命令；当您单击其中一个填充元素时，将生成“利用”详细信息面板

如何设置“利用_命令”的固定宽度

---

谢谢您的时间。

根据，中心区域不能有固定的宽度（请参见注释标题下的第一个项目符号）。任何其他区域（N、S、E或W）都可以定义其大小，而中心区域只占用剩余的任何空间。顺便说一句，这在其他GUI平台上也是这种布局风格的标准方法（或者想想您使用的任何图形IDE）

---

不要在东面板上设置自动宽度，给它一个定义的起始宽度（否则它不会显示，这可能是您看到的）。

根据，中心区域不能有固定的宽度（请参见注释标题下的第一个项目符号）。任何其他区域（N、S、E或W）都可以定义其大小，而中心区域只占用剩余的任何空间。顺便说一句，这在其他GUI平台上也是这种布局风格的标准方法（或者想想您使用的任何图形IDE）

不要在东面板上设置自动宽度，给它一个定义的起始宽度（否则它将不会显示，这可能是您看到的）