四、Ext.Window组建
Ext.Window是Ext.Panel的子类
显示调用show()无序renderTo:Ext.getBody();
Ext.onReady(function() {
var window = new Ext.Window({
title : "登录",
frame : true,
width : 260,
height : 130,
layout : "form",
labelWidth : 45,
plain : true,// 窗口与内部颜色一致
resizeable : false,// 关闭窗口的可变大小
defaults : {
xtype : "textfield",
width : 180
},
bodyStyle : "padding:3px",// 执行css样式
buttonAlign : "center",// button位置剧中，默认居右
listeners : {
"show" : function() {
alert("窗体显现");
},
"hide" : function() {
alert("窗体隐藏");
},
"close" : function() {// 窗口的x号调用事件
alert("窗体关闭");
}
},
items : [{
fieldLabel : "账号"
}, {
fieldLabel : "密码"
}],
buttons : [{
text : "确 定"
}, {
text : "取 消",
handler : function() {
window.hide();
// this.hide();//button自身隐藏
}
}]
});
window.show();//窗口显示
});
获取items中的值：
Ext.onReady(function() {
var window = new Ext.Window({
title : "登录",
frame : true,
width : 260,
height : 130,
layout : "form",
labelWidth : 45,
plain : true,// 窗口与内部颜色一致
resizeable : false,// 关闭窗口的可变大小
bodyStyle : "padding:3px",// 执行css样式
buttonAlign : "center",// button位置剧中，默认居右
listeners : {
"show" : function() {
alert("窗体显现");
},
"hide" : function() {
alert("窗体隐藏");
},
"close" : function() {// 窗口的x号调用事件
alert("窗体关闭");
}
},
items:[{
xtype:"textfield",
fieldLabel:"姓名"
},{
xtype:"textfield",
fieldLabel:"密码"
}],
buttons : [{
text : "确 定",
handler:function(){
alert(this.ownerCt.title);//获取拥有组建的对象
alert(this.ownerCt.items.first().getValue());//获取拥有组建的对象
alert(this.ownerCt.items.itemAt(1).getValue());
}
}, {
text : "取 消",
handler : function() {
window.hide();
// this.hide();//button自身隐藏
}
}]
});
window.show();//窗口显示
});
录入人员信息页面
Ext.onReady(function() {
var _window=new Ext.Window({
title : "人员信息",
layout : "form",
width : 500,
height : 350,
plain : true,
defaultType : "textfield",
labelWidth : 59,//标签宽度
items : [{
xtype : "panel",
layout : "column",//行布局
baseCls : "x-plain",//颜色统一
style:"padding:5px",//css样式
items : [{
columnWidth : .5,//行宽度
layout : "form",
defaultType : "textfield",
labelWidth : 55,//标签宽度
// style:"padding:5px",//css样式
defaults : {
width : 160//默认文本框宽度
},
baseCls : "x-plain",
items : [{
fieldLabel : "姓名"
}, {
fieldLabel : "年龄"
}, {
fieldLabel : "出生日期"
}, {
fieldLabel : "联系电话"
}, {
fieldLabel : "手机号码"
}, {
fieldLabel : "电子邮件"
}, {
fieldLabel : "性别"
}]
}, {
columnWidth:.5,
layout:"form",
labelWidth:55,
baseCls:"x-plain",
items:{
xtype:"textfield",
fieldLabel:"个人照片",
width:160,
height:177,
inputType:"image"
}
}]
},{
fieldLabel:"身份证号",
width:400
},{
fieldLabel:"具体地址",
width:400
},{
fieldLabel:"职位"
}],
buttons:[{
text:"确定",
handler:function(){
alert(this.ownerCt.buttons[1].text) ;
}
},{
text:"取消"
}],
showLock:false,
listeners:{
"show":function(_window){
if(!_window["showLock"]){//避免多次构造
_window.findByType("textfield")[7].getEl().dom.src = "js/window/default_pic.gif" ;//装载图片
_window["showLock"] = true;
}
}
}
}).show();
});
效果图：
this.ownerCt.items获取当前对象中item数组集合；
