大概学习了下Ext的技术，写了一个下图样子的东西，看看应该还不错，布局各方面还算可以，再次记录下，以便日后查用！
?下面直接上代码：
?
var sexArray = new Array();
Ext.onReady(function(){
var JOB = Ext.data.Record.create({name:"job"})//构造一个函数
var _window = new Ext.Window({
title:"添加人员",
width:500,
height:350,
plain:true,
defaultType:"textfield",
items:[{
xtype:"panel",
baseCls:"x-plain",
style:"padding:5px",
layout:"column",
items:[{
columnWidth:.5,
baseCls:"x-plain",
layout:"form",
labelWidth:55,
defaults:{xtype:"textfield",width:150},
items:[{
fieldLabel:"姓名"
},{
fieldLabel:"年龄",
readOnly:true,
value:"26"
},{
xtype:"datefield",
format:"Y-m-d",
readOnly:true,
value:"1986-02-13",
fieldLabel:"出生日期",
listeners:{
"change":function(){
var _age = _window.findByType("textfield")[1];
_age.setValue(new Date().getFullYear() - _window.findByType("datefield")[0].getValue().getFullYear()+1);
}
}
},{
fieldLabel:"联系电话"
},{
fieldLabel:"手机号码"
},{
fieldLabel:"电子邮件"
},{
xtype:"combo",
fieldLabel:"性别",
mode:"local",
displayField:"sex",
readOnly:true,
triggerAction:"all",
value:"男",
store:new Ext.data.SimpleStore({
fields:["sex"],
data:[["男"],["女"]]
})
}]
},{
columnWidth:.5,
layout:"form",
baseCls:"x-plain",
labelWidth:55,
items:{
xtype:"textfield",
fieldLabel:"个人照片",
width:170,
height:177,
inputType:"image"
}
}]
},{
xtype:"panel",
baseCls:"x-plain",
layout:"form",
style:"padding:5px",
labelWidth:55,
defaults:{xtype:"textfield"},
items:[{
fieldLabel:"身份证号",
width:400
},{
fieldLabel:"具体地址",
width:400
},{
xtype:"panel",
layout:"column",
baseCls:"x-plain",
defaults:{baseCls:"x-plain"},
items:[{
columnWidth:.4,
layout:"form",
labelWidth:55,
items:[{
xtype:"combo",
fieldLabel:"职位",
anchor:"100%",
readOnly:true,
triggerAction:"all",
mode:"local",
displayField:"job",
store:new Ext.data.SimpleStore({
fields:["job"],
data:[["程序员"],["经理"],["主管"],["测试工程师"]]
}),
listeners:{
"select":function(_combo,_record,_index){
_combo["selectItem"] = _record;//自定义属性，如果selectitem存在则引用，没有则创建
}
}
}]
},{
columnWidth:.6,
buttonAlign:"center",
style:"padding:0 0 0 5px",
buttons:[{
xtype:"button",
text:"添加职位",
handler:function(){
var _job = _window.findByType("combo")[1];
//var _store = _job.store;
var _store = _job.getStore();
//alert(_store);
Ext.Msg.prompt("请输入职位名称","职位名称",function(btn,text){
if(btn == "ok"){
_store.insert(0,new JOB({job:text}));
this.setValue(text);
}
},_job);
}
},{
xtype:"button",
text:"修改职位",
handler:function(){
var _job = _window.findByType("combo")[1];
if(_job["selectItem"]!= null){
Ext.Msg.prompt("请输入修改后的职位名称","职位名称",function(btn,text){
this["selectItem"].set("job",text);
this.setValue(text);
},_job,false,_job.getValue())
}
}
},{
xtype:"button",
text:"删除职位",
handler:function(){
var _job = _window.findByType("combo")[1];
Ext.MessageBox.confirm("系统提示","你确认删除当前职位吗?",function(btn){
if(btn == "yes"){
try{
this.store.remove(this["selectItem"]);
}catch(_err){}
if(this.store.getCount() != 0){
this.setValue(this.store.getAt(0).get("job"));
this["selectItem"] = this.store.getAt(0);
}else{
this.setValue("");
}
}
},_job)
}
}]
}]
}
]
}],
buttons:[{
text:"确定"
},{
text:"取消"
}],
allowlock:false,//自定义属性
listeners:{
"show":function(){
if(! _window["allowlock"]){
_window.findByType("textfield")[7].getEl().dom.src="images/default.jpg";
_window["allowlock"] = true
}
var _job = _window.findByType("combo")[1];
var _store = _job.store;
_job.setValue(_store.getAt(0).get("job"));
_job["selectItem"] = _store.getAt(0);
}
}
});
_window.show();
});
个人感觉Ext的布局特别像java swing的布局方式。