extjs布局,
官网的例子太强大了：http://www。森查。com/products/ext js/examples/
常用界面都有例子，方便学习使用啊
这一节主要学习布局
学习地址：http://个文档。森查。com/ext js/4。2 .0/ext js-build/examples/layout-browser/layout-browser超文本标记语言
一、绝对
绝对定位
Ext.onReady(function() {//页面初始化代码
var面板=新分机。面板({
文本： 展示，
renderTo : document.body，
宽度：400,
身高：300,
布局："绝对",
项目：[ {
标题："面板1",
宽度：200,
身高：100,
x : 50，
y : 50，
html:定位在x:50，y:50
}, {
标题："第二小组",
宽度：250,
身高：100,
x : 100，
y : 100，
html:定位在x:125，y:125
})
注：
布局："绝对",指明布局方式
x : 50，y : 50，指明离X方向，y方向的绝对距离
二、手风琴
折叠式面板，默认打开第一个（我首先想到了一些购物网站左侧菜单栏是不是可以用这个实现呢？留待以后尝试)
var面板=新分机。面板({
布局："手风琴",
renderTo : document.body，
宽度：200,
身高：200,
项目：[{
标题："面板1",
html:"内容"
标题："第二小组",
id:"面板2",
html:"内容2"
});
三、锚
绝对定位
var面板=新分机。面板({
renderTo : document.body，
宽度：300,
身高：400,
布局："锚点",
项目：[{
标题："面板1",
身高：100,
主播："50%",
html:"面板1 50%"
标题："第二小组",
身高：100,
锚点："-100",
html:"面板2 -100"
标题："第三小组",
锚点："-10,-262",
html:面板3 -10,-262
});
四、边界
边框式
var面板=新分机。面板({
renderTo : document.body，
宽度：500,
身高：400,
布局："边框",
bodyBorder: false，
默认值：{
可折叠：真的，
分裂：没错，
身体填充物：15
项目：[{
标题："顶部",
区域："北部",
身高：50,
明海特：25,
maxHeight: 50，
边距："5 0 0 5",//上右下左
html:"热门内容"
标题："页脚",
地区："南部",
身高：50,
明海特：25,
maxHeight:50，
边距："0 0 5 0",//上右下左
html:"页脚内容"
标题："导航",
地区："西部",
可浮动：假，
边距："5 0 0 0",
100,
最小宽度：50,
maxWidth: 100，
html:导航链接等次要内容可以放在这里
标题：主要内容，
可折叠：假，
区域："中心",
边距："5 0 0 0",
html:"主页，这是主要内容所在的位置"
标题："右",
区域："东部",
100,
边距："5 0 0 0",
html:"正确的内容"
});
五、TabPanel
var面板=新分机。选项卡面板({
renderTo : document.body，
宽度：200,
身高：200,
正文边框：没错，
activeTab: 0，//索引或编号
项目：[{
标题："选项卡1",
html:"这是选项卡一的内容。"
标题："选项卡2",
html:"这是选项卡2的内容。"
标题："标签3",
html:"这是选项卡3的内容。"
});
六、卡片（向导)
自定义向导风格
var面板=新分机。面板({
renderTo : document.body，
宽度：300,
身高：300,
正文边框：没错，
正文样式："填充：15px”，
布局："卡片",
activeItem: 0，//索引或编号
bbar: [-，{
id:"卡-上一张",
文本："上一个",
处理程序：函数(btn) {
禁用：真
id:卡片-下一张，
文本："下一个",
处理程序：函数(btn) {
项目：[{
id:"卡-0",
html:"步骤1"
id:"卡-1",
html:"步骤2"
id:"卡-2",
html:"步骤3"
});
注：事件还未学习，按钮点击未实现，待解决
七、列
var面板=新分机。面板({
renderTo : document.body，
宽度：400,
身高：200,
正文边框：没错，
正文样式："填充：15px”，
布局："列",
项目：[ {
标题："宽度=25%",
列宽：25,
项目：[ {
xtype:按钮，
文本："内容"
}, {
xtype:按钮，
文本："内容"
}, {
标题："宽度=75%",
列宽：75,
html:"内容"
}, {
标题：宽度=100像素，
宽度：100,
html:"内容"
});
八、适合
var面板=新分机。面板（
renderTo : document.body，
宽度：400,
身高：200,
正文边框：没错，
bodyStyle:填充：5px ，
布局："适合",
项目：[ {
标题："适合面板",
html:一个非常简单的布局，简单地用一个面板填充容器。如果没有其他特定的布局要求，这通常是最佳的默认布局选择。
边框：真
});
九、桌子
var面板=新分机。面板({
renderTo : document.body，
宽度：400,
身高：200,
正文边框：没错，
bodyStyle:填充：5px ，
布局：{
类型："表格",
//必须在此处指定总列数
列：3
默认值：{
//应用于每个包含的面板
bodyStyle:填充：20px
项目：[ {
html:单元格A内容，
行跨度：2
}, {
html:单元格B内容，
第二栏
}, {
html:单元格C内容，
单元格区域："突出显示"
}, {
html:"单元格D内容"
});
十、vbox
var面板=新分机。面板({
renderTo : document.body，
宽度：400,
身高：200,
正文边框：没错，
bodyStyle:填充：5px ，
标题：" VBoxLayout面板",
布局：{
类型：“vbox”，
对齐："居中"
项目：[{
xtype:面板，
标题："内部面板一",
250,
flex: 2//每个子项相对的弯曲值都会与全体子项弯曲累加的值相比较，根据此结果，处理每个子项的弯曲最后是多少。若不设置，表示不对子项作自适应尺寸的处理
xtype:面板，
标题："内部面板二",
250,
弹性：4
xtype:面板，
标题："内部面板三",
50%,
弹性：4
});
十一、hbox
var面板=新分机。面板({
renderTo : document.body，
宽度：400,
身高：200,
正文边框：没错，
bodyStyle:填充：5px ，
标题：" HBoxLayout面板",
布局：{
类型：“hbox”，
对齐："拉伸"
renderTo: document.body，
项目：[{
xtype:面板，
标题："内部面板一",
弹性：2
xtype:面板，
标题："内部面板二",
弹性：1
xtype:面板，
标题："内部面板三",
弹性：1
});
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。