Ext UI设计
1.按钮：
var button=new Button({
renderTo:Ext.getBody(),
text:'确定'
});
alert(button.text); //获取按钮文本
button.setText("取消"); //设置按钮上文本
button.minWidth(100); //设置按钮最小宽度
handler:function(){} //默认事件是click
listeners:{ //定义事件
'click',function(){}
}
button.on('click',function(){});//ext传统写法 定义事件
2.文本框
new textField({
renderTo:document.body,
fieldValue:'姓名：'
})；//文本框必须在Ext.Container或者是Ext.Container的子类中才能显示fieldValue
3.面板
var _panel=new Ext.Panel({
//renderTo:Ext.getBody(),
layout:'form',
title:'面板',
labelWidth:30,
frame:true,
width:300,
height:200,
listeners:{
'render':function(_panel){
_panel.add({xtype:'textfield',fieldLabel:"密码"}); //xtype 在component中查找
_panel.add(//运行时方法
new Ext.form.TextField({
id:'tt',
value:'adfa',
fieldLabel:"名字"
})
);
}
}
});
_panel.addButton({text:"确定"}); //设计时方法
_panel.addButton(new Ext.Button({text:"取消",minWidth:100}));
_panel.render(Ext.getBody());
renderTo与applyTo：
renderTo将当前对象放入指定的元素里面 也可render方法指定
applyTo在指定元素中构建对象 也可applyToMarkup
设定面板风格：
<style type="text/css">
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center{
position:absolute;
top:30%;
left:43%;
text-align:left;
}
</style>
Ext.onReady(function(){
var _panel=new Ext.Panel({
layout:'form',
title:'面板',
labelWidth:30,
frame:true,
width:300,
height:200
});
_panel.add(
new Ext.form.TextField({
id:'tt',
value:'adfa',
fieldLabel:"名字"
})
);
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:'div',
cls:'contain',
cn:[{
tag:"div",
cls:'center'
}]
},true).child("div")) });
items和buttons的使用
var _panel=new Ext.Panel({
layout:'form',
title:'面板',
labelWidth:30,
frame:true,
width:300,
height:200,
defaults:{xtype:'textfield',width:'180'},
items:[{
fieldLabel:'账户'
},{
fieldLabel:'密码'
}],
buttons:[{text:'确定'},{text:'取消'}]
});
4.window的使用
Ext.onReady(function(){
var win2=new Ext.Window({
layout:'form',
title:'登录',
labelWidth:30,
frame:true,
resizable:false,//是否可以改变窗体大小
width:260,
plain:true,//背景颜色强制化
bodyStyle:'padding:5px',//离边部空3px
height:130,
minimizable:true,//显示最小化按钮
//maximizable:true,//显示最大化按钮
defaults:{xtype:'textfield',width:'180'},
buttonAlign:'center',//设置按钮的对齐方式
closable:true,//是否可以关闭
closeAction:'hide',//是否将窗体真正关闭 hide和close
items:[{
id:'name',
xtype:'textfield',
fieldLabel:"姓名"
},{
xtype:'textfield',
fieldLabel:'密码'
}],
listeners:{
"show":function(){
//alert("窗体显示");
},
"hide":function(){
alert("窗体隐藏");
}
},
buttons:[{text:'确定',handler:function(){
//alert(this.text);
//this.ownerCt.items 这个window无法获取值
var _coll=this.ownerCt.ownerCt.items;//获取拥有该控件的容器
var _temp="";
_temp+=_coll.first().getValue()+" ";
_temp+=_coll.itemAt(1).getValue();
alert(_temp);
alert(Ext.getCmp('name').getValue());
}}]
});
win2.show();
});
window布局实例：
Ext.onReady(function(){
var win2=new Ext.Window({
title:"添加人员",
layout:'form',//窗体布局 textfield的fieldLabel属性要显示就采用此布局
width:500,
height:380,
labelWidth:60,
plain:true,
style:'padding:5px', //距容器边框距离
bodyStyle:'padding:5px',//离边部空3px
defaultType:'textfield',
//defaults:{width:380}, //默认问文本框
items:[{
xtype:'panel',
baseCls:"x-plain", //panel面板中的强制 使色泽统一
layout:'column',
items:[{
columnWidth:.5, //所占容器比例
layout:"form",
baseCls:"x-plain",
labelWidth:60,
bodyStyle:'padding:3px',
defaults:{xtype:'textfield',width:150},
items:[{
fieldLabel:'姓名'
},{
fieldLabel:'年龄'
},{
fieldLabel:'出生日期'
},{
fieldLabel:'联系电话'
},{
fieldLabel:'手机号码'
},{
fieldLabel:'电子邮件'
},{
fieldLabel:'性别'
}]
},{
columnWidth:.5,
layout:'form',
baseCls:"x-plain",
labelWidth:60,
items:[{
xtype:'textfield',
inputType:'image', //password
fieldLabel:'个人照片',
height:180,
width:150
}]
}]
},{
fieldLabel:'身份证',
width:390
},{
fieldLabel:'地址',
width:390
},{
fieldLabel:'职位',
width:390
}],
showLock:false,
listeners:{
'show':function(_win){
if(!_win.showLock){
_win.findByType("textfield")[7].getEl().dom.src='1.gif';
_win["showLock"]=true;
}
}
},
buttons:[{text:'确定',handler:function(){}},{text:'取消'}]
});
win2.show();
});
运行效果：