[英]ExtJs - Set a fixed width in a center layout in a Panel
使用ExtJs。
我正在尝试设计一个分为三个子面板(树形列表,网格和面板)的主面板。 它的工作方式是,您有一个包含元素的树形列表(西),单击一个填充网格的元素(中心),然后单击网格中的一个元素,然后生成面板(西)。
我的包含其他三个面板的主面板已定义为布局“边框”。
现在,我面临的问题是,代码中的中心布局(网格)已定义为固定宽度,而西面板为自动宽度。 但是,当生成界面时,网格宽度突然占据了界面而不是西面板中的所有空间。
代码如下所示:
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 exploits”是我的主面板,其中包含其他三个子面板。
“ exploits_tree”是包含某些元素的树列表。 当您单击其中一个元素时,将填充网格“ exploit_commands”,而当您单击其中一个填充元素时,将生成“ exploits_details_panel”面板。
如何在“ exploit_commands”上设置固定宽度?
谢谢你的时间。
根据文档 ,中心区域不能具有固定的宽度(请参阅Notes标题下的第一个项目符号)。 任何其他区域(N,S,E或W)都可以定义其大小,而中心区域仅占用剩余的空间。 顺便说一句,对于其他GUI平台中的这种布局样式,这几乎也是一种标准方法(或者考虑一下您用作示例的任何图形化IDE)。
不要在东面板上设置自动宽度,给它定义一个开始的宽度(否则它不会显示,这可能是您看到的)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.