个人感觉Ext中最好用的布局便是Borderlayout布局了,学过java编程做界面的人一定不会陌生,在这里我就不就叙述各个部分的位置和区别了(google一下可能会有好几页),在这里使用一个简单的例子,代码很短,没有任何业务逻辑,只是布局,但通过这个例子相信你可以很快解决Ext布局问题,下面来看一下效果图:
样子还蛮不错的基本的布局思路就是标题为northPanel,westPanel,MainContent,eastPanel的Panel先应用最外层的borderlayout布局,然后对标题为Main Content的Panel在使用boderlayout布局,包含标题为innerCenter,innerBottom的Panel.图片论述就到这了,下面来看一下代码:
Ext.onReady(function() {
var innerCenterPanel = new Ext.Panel({
title : 'innerCenter',
region : 'center'
});
var innerBottomPanel = new Ext.Panel({
title : 'innerBottom',
region : 'south',
height : 100
});
var innerPanel = new Ext.Panel({
title : 'Main Content',
region : 'center',
margins : '5 0 0 0',
layout : 'border',
items : [innerCenterPanel, innerBottomPanel]
});
var northPanel = new Ext.Panel({
title : 'North Panel',
region : 'north',
height : 100,
minSize : 75,
maxSize : 250,
margins : '5 5 0 5'
});
var westPanel = new Ext.Panel({
title : 'West Panel',
region : 'west',
margins : '5 0 0 5',
cmargins : '5 0 0 5',
width : 200,
minSize : 100,
maxSize : 300,
split : true,
collapsible: true
});
var eastPanel = new Ext.Panel({
title : 'East Panel',
region : 'east',
margins : '5 0 0 0',
width : 200,
minSize : 100,
maxSize : 300,
split : true,
collapsible: true
});
var border = new Ext.Panel({
title : 'Border Layout',
renderTo : document.body,
layout : 'border',
width : '100%',
height : 500,
items : [northPanel,westPanel,innerPanel,eastPanel]
});
});
使用此代码你只需要在html引入ext需要的css和两个js,然后在引入这个js脚本就可以使用了,希望对这个例子对大家有所帮助,对了,这个使用的ext版本是2.2(1.0嵌套布局好像要麻烦一些不太一样)
- 大小: 9.3 KB
分享到:
相关推荐
java BorderLayout版面布局 java BorderLayout版面布局 java BorderLayout版面布局
简洁易懂的java高级基础部分:边界布局BorderLayout
Java程序设计经典300例源码边框布局BorderLayout布局设计.rar
BorderLayout实现窗口的布局。
Java中BorderLayout布局管理器.pdf 学习资料 复习资料 教学资源
Java布局管理的好例子,包括GridLayOut BorderLayOut CardLayOut等布局管理的实现
主要介绍了JavaSwing BorderLayout 边界布局的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
所谓的布局管理器分为好多种,最常见的有流式布局管理器(FlowLayout)、边界布局管理器(BorderLayout)和表格布局管理器(GridLayout)。本文给大家介绍CSS3 flex布局之快速实现BorderLayout布局,感兴趣的朋友...
BorderLayout 使用 uipanels 为 GUI 创建一个简单的布局管理器,该管理器以 Java 的 BorderLayout 为模型。 它允许您将图形窗口或 uipanel 父项划分为五个区域:北、南、东、西和中心。 North 和 South 具有静态像素...
SWT(JFace)体验之模拟BorderLayout布局代码。
编写一个程序,有一个窗口,该窗口为BorderLayout布局。窗口的中心添加一个Panel容器:pCenter,pCenter的布局是7行7列的GridLayout布局,pCenter的中放置49个标签,用来显示日历。窗口北面添加一个Panel容器pNorth...
基于JAVA的布局管理器-BorderLayout
折叠布局Ext.layout.AnchorLayout 边框布局Ext.layout.BorderLayout 卡片式布局Ext.layout.CardLayout 列布局Ext.layout.ColumnLayout 填充布局xt.layout.FitLayout 表单布局Ext.layout.FormLayout 表格布局Ext....
Border布局由类Ext.layout.BorderLayout定义,布局名称为border。
Ext布局类的介绍与使用的例程
6.2. 关于BorderLayout 6.3. 嗯,不如再看看附加效果 6.3.1. 先看看split 6.3.2. 再试试titlebar 6.3.3. 还不够,还不够,让四周的区域可以缩起来 6.3.4. 给这些区域都加上个关闭按钮 6.3.5. 用NestedLayoutPanel在...
ext js简单的折叠布局 自己总结的 根据项目的需要可以使用
BorderLayout——边界布局管理器:FlowLayout——流式布局管理器:GridLayout——网格布局:CardLayout——卡片式布局:...