组件、布局与面板
一、组件
//组件-----创建组件
Ext.create('Ext.Component',{
html:'你好 组件',
// renderTo:Ext.getBody(), 添加到jsp页面的body中
renderTo:Ext.get('c'),
width:200,
height:100,
padding:50,
style:{
color:'blue',
backgroundColor:'pink'
}
});
//创建一个进度条的组件
var cp=Ext.create('Ext.ProgressBar',{
renderTo:Ext.get('cp'),//添加到页面中的cp都饿组件上
width:300//宽度
});
cp.wait({
increment:10,//10次把进度条走完
text:'Updating...',//进度条上的文本 默认居中
interval:1000,//每隔多长时间调用一次（每隔一定时间增加一次位移量）
duration:5000,//持续时间，到多少时间后就不再走了
fn:function(){//持续时间结束后执行的方法
alert('停止啦');
},
animate:true//是否使用动画，默认是使用的，既默认值为true
});
//创建一个LoadMask------实现遮罩效果
new Ext.LoadMask(Ext.get('lm'),{
msg:'正在加载....'
}).show();
Jsp页面
在head标签中不要忘记引入js文件哟
二、布局
Fit: fit代表面板窗口放大或者缩小，面板中的内容会始终填充整个面板，面板中的内容随面板的大小发生变化,每次只能显示一个组件，制约了面板中内容的复杂性
//创建一个面板
var panel=Ext.create('Ext.panel.Panel',{
width:300,
height:300,
title:'外部面板标题',
layout:'fit',//面板布局方式
items:{
title:'内部面板标题',//标题
html:'这里是面板中的内容',
bodyPadding:20,
border:false
},
renderTo:Ext.getBody()
});
Border:
//创建一个面板 border布局的时候宽度和高度必须在创建的时候指定，不能变化
var panel=Ext.create('Ext.panel.Panel',{
width:600,
height:400,
title:'外部面板标题',
layout:'border',//面板布局方式
items:[{
region:'east',
html:'东......',
split:true,//可拆分 通过拖动改变大小，分割线会加粗
collapsible:true
},{
region:'south',
html:'南......',
split:true,
collapsible:true
},{
region:'west',
html:'西......',
split:true,
collapsible:true
},{
region:'north',
html:'北......',
split:true,
collapsible:true
},{
region:'center',
html:'中......',
split:true,
collapsible:true
}],
renderTo:Ext.getBody()
});
Accordion：
Ext.create('Ext.panel.Panel', {
title : 'Accordion Layout',
width : 300,
height : 300,
layout : 'accordion',
defaults : {
// applied to each contained panel
bodyStyle : 'padding:15px'
},
layoutConfig : {
// layout-specific configs go here
titleCollapse : false,
animate : false,
multi : false,
activeOnTop : false
// 默认值false 表示的是展开和折叠后子面板顺序不变,true展开的子面板永远会在顶端
},
items : [{
title : 'Panel 1',
html : 'Panel content!'
}, {
title : 'Panel 2',
html : 'Panel content!'
}, {
title : 'Panel 3',
html : 'Panel content!'
}],
renderTo : Ext.getBody()
});
Column:
Ext.create('Ext.panel.Panel', {
title : 'Column Layout - Mixed',
width : 350,
height : 250,
layout : 'column',
items : [{
title : 'Column 1',
columnWidth:.4 //width:120 设置一个列的长度值后 剩余的宽度.7+.3=1
}, {
title : 'Column 2',
columnWidth : .3 //这个代表的是列的宽度的比例 0-1之间
}, {
title : 'Column 3',
columnWidth : .3 //30% //.7.3
}],
renderTo : Ext.getBody()
});
Table:
Ext.create('Ext.panel.Panel', {
title : 'Table Layout',
width : 300,
height : 150,
layout : {
type : 'table', //布局的方式
// The total column count must be specified here
columns : 3 //必须设置列的值
},
defaults : {
// applied to each contained panel
bodyStyle : 'padding:20px' //边框的样式
},
items : [{
html : 'Cell A content',
rowspan : 2 //合并的数行
}, {
html : 'Cell B content',
colspan : 2 //合并的列数
}, {
html : 'Cell C content',
cellCls : 'highlight' //单元格的样式
}, {
html : 'Cell D content'
}],
renderTo : Ext.getBody()
});
});
三、面板
//面板也是组件 不过是一个容器的组件
//创建一个面板
Ext.create('Ext.panel.Panel',{
id:'myPanel',
title:'面板标题',//面板的标题
width:300,//面板的宽度
height:200,
pageX:100,
pageY:20,//其实的位置（面板距离左边和上边的距离）
html:'这是面板的内容
',//面板中的内容
draggable:true,//面板是否可以拖拽 拖动停止后，还是回到原来的地方
collapsible:true,//面板是否可折叠
frame:true,//使用圆角等风格渲染面板
renderTo:Ext.getBody(),//添加到body中
items:[{
xtype:'button',
text:'点击我1',
handler:function(){
alert("有病啊，点我干嘛");
}
},{
xtype:'button',
text:'点击我2'
}]
});
如果上面的代码中没有items属性，那么可以通过下面的代码实现按钮触发事件
//按钮的组件
Ext.create('Ext.button.Button',{
text:'点击我',
renderTo:'myPanel',//根据id将按钮添加到面板中
handler:function(){
alert("有病啊，点我干嘛");
}
});