ext border 布局

最新推荐文章于 2022-07-09 10:12:18 发布

原创最新推荐文章于 2022-07-09 10:12:18 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT

本文详细介绍了使用ExtJS框架进行页面布局的具体配置方法，包括不同区域的定义与组件的使用，如TreePanel、BoxComponent等，并展示了如何通过Ext.onReady初始化Viewport及设置border布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="north-div"></div>
<div id="west-div"></div>
<div id="center-location"></div>
<div id='center-main'>
<div id="serviceconfig-menu"></div>
<div id="serviceconfig-illuminate"></div>
<div id="serviceconfig-main"></div>
<div id="serviceconfig-button"></div>
</div>
<div id="south-div">
XXXXXXXXXXXX
</div>
<div id="windows-div"></div>
<div id="combox-div"></div>
<div id="menu-div"></div>
</body>

var treePanel=new Ext.tree.TreePanel({
region:'west',
contentEl:'west-div',

//头布局
var northPanel = new Ext.BoxComponent({
region:"north",
el:"north-div",

//底布局
var southPanel = new Ext.BoxComponent({
region:"south",
el:"south-div",

Ext.onReady(function(){
new Ext.Viewport({ //实例化布局对象
layout:'border', //声明为border布局
items:[northPanel,southPanel,{
region:'center',
layout:'fit',
height:'100%',
width:'100%',
items:[{
el:'center-location'
},{
el:'center-main'
}]
},treePanel]
});
});