ext js4学习总结2
日期：2014-05-16 浏览次数：20467 次
ext js4学习小结2
一 面板
1）autoload加载项
Ext.create('Ext.panel.Panel',{
title:'面板加载远程页面',
height:150,//设置面板的高度
width:250,//设置面板的宽度
frame:true,//渲染面板
autoScroll : true,//自动显示滚动条
collapsible : true,//允许展开和收缩
renderTo: Ext.getBody(),
bodyPadding: 5,
autoLoad :'page1.html',//自动加载面板体的默认连接
}）；
2）加载本地HTML
......//其他不变，同上
contentEl :'localElement',//加载本地资源
。。。。。。。。。。。。。。
<div id="localElement"> ..................
3)加载自定义HTML
var htmlArray = ['<HTMl>..............'];
Ext.create('Ext.panel.Panel',{
...............
html:htmlArray.join(''),
});
二 面板布局
1）AUTO布局，默认的
2）fit布局，使子元素充满容器
3）折叠布局，accordion，跟传统的折叠一样
4）layout:card,任何时候只有一个子面板处在显示状态
items: [{
title : '嵌套面板一',
html : '说明一',
id : 'p1'
},{
title : '嵌套面板二',
html : '说明二',
id : 'p2'
},{
title : '嵌套面板三',
html : '说明三',
id : 'p3'
}],
buttons:[{
text : '上一页',
handler : changePage
},{
text : '下一页',
handler : changePage
}]
});
//切换子面板
function changePage(btn){
var index = Number(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一页'){
index -= 1;
if(index < 1){
index = 1;
}
}else{
index += 1;
if(index > 3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}
4)anchor锚点布局
根据容器大小为其所包含的子面板进行定位的布局，如果容器大小发生变化，所有子面板位置也会发生变化，
自动渲染。
A 百分比定位
items: [{
anchor : '50% 50%',//设置子面板的宽高为父面板的50%
B OFFSET定位
anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素，子到父面板的右边和下边都为10象
素
C 绝对定位，X，Y坐标
D 使用百分比指定列宽
items: [{
title:'子面板一',
columnWidth:.3//指定列宽为容器宽度的30%
},{
title:'子面板二',
columnWidth:.7//指定列宽为容器宽度的70%
}]
E TABLE表格布局
items: [{
title:'子面板一',
width : 150,
colspan : 3//设置跨列
},{
title:'子面板二',
rowspan : 2,//设置跨行
height : 100
},
F BORDER布局：东南西北
G HBOX，VBOX布局：
Ext.create('Ext.panel.Panel',{
title : 'Ext.layout.container.HBox布局示例',
layout:{
type : 'hbox',//水平盒布局
align : 'stretch'//子面板高度充满父容器
},
height : 150,
width : 300,
frame : true,
renderTo: Ext.getBody(),
items: [{
title: '子面板一',
flex : 1,
html : '1/4宽(flex=1)'
},{
title: '子面板二',
flex
一 面板
1）autoload加载项
Ext.create('Ext.panel.Panel',{
title:'面板加载远程页面',
height:150,//设置面板的高度
width:250,//设置面板的宽度
frame:true,//渲染面板
autoScroll : true,//自动显示滚动条
collapsible : true,//允许展开和收缩
renderTo: Ext.getBody(),
bodyPadding: 5,
autoLoad :'page1.html',//自动加载面板体的默认连接
}）；
2）加载本地HTML
......//其他不变，同上
contentEl :'localElement',//加载本地资源
。。。。。。。。。。。。。。
<div id="localElement"> ..................
3)加载自定义HTML
var htmlArray = ['<HTMl>..............'];
Ext.create('Ext.panel.Panel',{
...............
html:htmlArray.join(''),
});
二 面板布局
1）AUTO布局，默认的
2）fit布局，使子元素充满容器
3）折叠布局，accordion，跟传统的折叠一样
4）layout:card,任何时候只有一个子面板处在显示状态
items: [{
title : '嵌套面板一',
html : '说明一',
id : 'p1'
},{
title : '嵌套面板二',
html : '说明二',
id : 'p2'
},{
title : '嵌套面板三',
html : '说明三',
id : 'p3'
}],
buttons:[{
text : '上一页',
handler : changePage
},{
text : '下一页',
handler : changePage
}]
});
//切换子面板
function changePage(btn){
var index = Number(panel.layout.activeItem.id.substring(1));
if(btn.text == '上一页'){
index -= 1;
if(index < 1){
index = 1;
}
}else{
index += 1;
if(index > 3){
index = 3;
}
}
panel.layout.setActiveItem('p'+index);
}
4)anchor锚点布局
根据容器大小为其所包含的子面板进行定位的布局，如果容器大小发生变化，所有子面板位置也会发生变化，
自动渲染。
A 百分比定位
items: [{
anchor : '50% 50%',//设置子面板的宽高为父面板的50%
B OFFSET定位
anchor : '-10 -10',//设置子面板的宽高偏移父面板10像素，子到父面板的右边和下边都为10象
素
C 绝对定位，X，Y坐标
D 使用百分比指定列宽
items: [{
title:'子面板一',
columnWidth:.3//指定列宽为容器宽度的30%
},{
title:'子面板二',
columnWidth:.7//指定列宽为容器宽度的70%
}]
E TABLE表格布局
items: [{
title:'子面板一',
width : 150,
colspan : 3//设置跨列
},{
title:'子面板二',
rowspan : 2,//设置跨行
height : 100
},
F BORDER布局：东南西北
G HBOX，VBOX布局：
Ext.create('Ext.panel.Panel',{
title : 'Ext.layout.container.HBox布局示例',
layout:{
type : 'hbox',//水平盒布局
align : 'stretch'//子面板高度充满父容器
},
height : 150,
width : 300,
frame : true,
renderTo: Ext.getBody(),
items: [{
title: '子面板一',
flex : 1,
html : '1/4宽(flex=1)'
},{
title: '子面板二',
flex
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
