程序喵早年学编程时候，写了一个人员添加的面板布局代码示例，现在分享一下代码，效果图如下
代码分析
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext.Window</title>
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// 解决对象不支持"createContextualFragment"属性或方法的问题
if ((typeof Range !== "undefined") && !Range.prototype.createContextualFragment){
Range.prototype.createContextualFragment = function(html)
{
var frag = document.createDocumentFragment(),
div = document.createElement("div");
frag.appendChild(div);
div.outerHTML = html;
return frag;
};
}
/* 2011-03-04 cx
* 修正日期控件在IE显示不完全的问题
*/
Ext.override(Ext.menu.Menu, {
autoWidth: function () {
this.width += "px";
}
});
Ext.onReady(function(){
var JOB=Ext.data.Record.create([{name:'job'}]); //创建一个行对象，便于全局调用
new Ext.Window({
title:"添加人员", //标题
width:560,
height:360,
plain:true, //强制背景样式转换
resizable:false, //禁止拉动
layout:'form',
defaultType:"textfield",
labelWidth:60,
bodyStyle:'padding:10px',
style:'padding:10px',
labelAlign:'right', //对齐方式
// Start layout:"column"
items:[{
xtype:'panel',
layout:"column", //列布局
baseCls:"x-plain", //强制背景样式转换
// 定义两个form布局块儿 Start layout:"form"
items:[{
baseCls:"x-plain", //强制背景样式转换
columnWidth:.5, //列宽
layout:"form",
defaultType:"textfield", //默认值为panel，但是对于Ext.form.FormPanel 和 Ext.form.FieldSet来说默认值'textfield'
defaults:{width:150},
labelWidth:60,
items:[{
fieldLabel:"姓 名 "
},{
fieldLabel:"年 龄 ",
readOnly:true //只读属性
},{
editable: false, //禁止用户输入，鼠标点击文本框触发日期控件
xtype:'datefield', //日期类型
format:'Y-m-d', //格式化输出
//value:new Date(), //设定初始值
value:'4/23/1993', //如果是字符串类型，必须输入正确格式，否则不显示
fieldLabel:"出生日期",
listeners:{
'blur':function(_df){
var _age=_df.ownerCt.findByType("textfield")[1];
_age.setValue(new Date().getFullYear()-_df.getValue().getFullYear());
}
}
},{
fieldLabel:"联系电话"
},{
fieldLabel:"手机号码"
},{
fieldLabel:"电子邮件"
},{
xtype:'combo', //下拉框
editable:false, //禁止编辑,单击触发
fieldLabel:"性 别 ",
mode:'local', //本地加载数据，默认是'remote',服务器远程加载
displayField:'sex', //绑定到当前BomboBox的底层数据项的名称
triggerAction:'all', //为'all'将执行allQuery配置项中指定的所有查询操作 (默认值为 'query'，唯一的)。
//绑定到当前combo的数据源(默认值为 undefined)
store:new Ext.data.SimpleStore({
fields:['sex'], // 字段定义对象数组，或者字段名称字符串。
data:[["男"],["女"]], //多维数据数组
})
}]
},{
columnWidth:.5,
layout:"form",
baseCls:"x-plain", //强制背景样式转换
labelWidth:60,
items:[{
xtype:"textfield",
fieldLabel:"个人照片",
width:180,
height:165,
inputType:"image", //照片类型
}]
}]// Start layout:"form"
},{
style:'margin-top:6px;',
labelStyle:'margin-top:6px',
fieldLabel:"身份证号",
width:430
},{
fieldLabel:"具体住址",
width:430
},{
xtype:'panel',
layout:'column',
baseCls:'x-plain',
defaults:{baseCls:'x-plain'},
items:[{
columnWidth:.4,
layout:'form',
labelWidth:60,
items:{
xtype:'combo', //下拉框类型
editable:false,
fieldLabel:"职 位 ",
anchor:'100%', //使用锚定布局宽度设置类属于width
mode:'local', //本地加载数据，默认是'remote',服务器远程加载
displayField:'job', //绑定到当前BomboBox的底层数据项的名称
triggerAction:'all', //为'all'将执行allQuery配置项中指定的所有查询操作 (默认值为 'query'，唯一的)。
listeners:{
select:function(_combo,_record,_index){
_combo['selectItem']=_record; //如果存在就引用，如果不存在就创建
}
},
//绑定到当前combo的数据源(默认值为 undefined)
store:new Ext.data.SimpleStore({
fields:['job'], // 字段定义对象数组，或者字段名称字符串。
data:[["工程师"],["程序员"],["总管"],["经理"]], //多维数据数组
})
}
},{
columnWidth:0.2,
items:{
style:"margin-left:5px;",
xtype:'button',
text:'添加职位',
handler:function(){
var _window=this.ownerCt.ownerCt.ownerCt;
var _job=_window.findByType('combo')[1]; //获得第二个combox对象,在这里用于作用域
Ext.MessageBox.prompt("请输入职位名称","职位名称",function(_btn, _text){
if(_btn=="ok"){
var _store=this.store;
_store.insert(0,new JOB({
job:_text
})); // 在给定的序号出插入Records并触发 add 事件
this['selectItem']=this.store.getAt(0); //重新为combo绑定数据源
this.setValue(_text);
}
},_job);
}
}
},{
columnWidth:.2,
items:{
xtype:'button',
text:'修改职位',
handler:function(){
var _window=this.ownerCt.ownerCt.ownerCt;
var _job=_window.findByType('combo')[1]; //获得第二个combox对象,在这里用于作用域
// 获得缓存的记录数目是否大于0
if(_job.store.getCount()==0){
alert('没有任何对象');
return;
}
Ext.MessageBox.prompt("请输修改后的职位名称","职位名称",function(_btn,_text){
if(_btn=="ok"){
this['selectItem'].set('job',_text); //修改这个集合的所选项内容
this.setValue(_text);
}
},_job,false,_job.getValue());
}
}
},{
columnWidth:.2,
items:{
xtype:'button',
text:'删除职位',
handler:function(){
var _window=this.ownerCt.ownerCt.ownerCt;
var _job=_window.findByType('combo')[1]; //获得第二个combox对象,在这里用于作用域
// 获得缓存的记录数目是否大于0
if(_job.store.getCount()==0){
alert('没有任何对象');
return;
}
Ext.MessageBox.confirm('系统提示','你确定删除当前职位吗？',function(_btn){
if(_btn=='yes'){
this.store.remove(this['selectItem']); //删除当前选中的文本对象
if(this.store.getCount()!=0){
this.setValue(this.store.getAt(0).get('job')); //重新赋值
this['selectItem']=this.store.getAt(0); //重新为combo绑定数据源
}else{
this.setValue('');
}
}
},_job);
}
}
}]
}], // End layout:"column"
showLock:false,
listeners:{
//加图片
"show":function(_window){
if(!_window["showLock"]){
_window.findByType('textfield')[7].getEl().dom.src='mm.jpg';
_window["showLock"]=true;
}
var _sex=_window.findByType('combo')[0]; //获得第一个combox对象
_sex.setValue(_sex.store.getAt(0).get('sex')); //获得初始值
var _job=_window.findByType('combo')[1]; //获得第二个combox对象
var _store=_job.store; //获得数据对象
_job.setValue(_store.getAt(0).get("job")); //设置第一个对象值初始化
_job['selectItem']=_store.getAt(0); //如果有就获得第一个对象
}
},
buttons:[{
text:'确定',
handler:function(){
alert(this.text);
}
},{
text:'取消'
}]
}).show();
});
</script>
</head>
<body>
</body>
</html>未经允许请勿转载：程序喵 » 【ExtJs】人员添加布局代码示例