extjs学习07——extjs的初级UI设计4(Window实例改进)

extjs学习07——extjs的初级UI设计4(Window实例改进)
学习自dojo china陈治文老师的extjs视频教程
本篇日志是对视频章节的小结

Ext.onReady(function(){
var JOB = Ext.data.Record.create([{
name:"job"
}]);
new Ext.Window({
title:"添加人员",
width:500,
height:350,
plain:true,
layout:"form",
labelWidth:59,
defaultType:"textfield",
defaults:{anchor:"95%"},//锚点,按百分比分配布局大小
/**这个布局将子元素的位置与父容器大小进行关联固定.
如果容器大小改变, 所有固定的子项将按各自的anchor 规则自动被重新渲染固定.*/
/** 第一层布局元素：panel、textfield和buttons*/
items:[{
xtype:"panel",
baseCls:"x-plain",
layout:"column",
/** 第二层布局元素：两个对半分的panel*/
items:[{
columnWidth:5,
style:"padding:5px";
layout:"form",
labelWidth:55,
defaultType:"textfield",
defaults:{width:160},
baseCls:"x-plain",
/** 第三层布局元素：textfield*/
items:[{
fieldLabel:"姓名"
},{
fieldLabel:"年龄",
value:28
},{
xtype:"datefield",
format:"Y-m-d",//设置日期格式
value:"1981-10-18",//设置初始值
readOnly:true,//只能选择，不能书写
fieldLabel:"出生日期",
listeners:{
"blur":function(_df){
var _age = _df.ownerCt.findByType("textfield")[1];
_age.setValue(new Date().getFullYear()-_df.getFullYear()+1);
}
}
/**提供一个带有日期选择器(picker)下拉框并会自动进行日期验证的日期输入表单项。
这个表单项识别并使用JavaScript的日期对象作为其value类型。
另外， 它根据format 和/或 altFormats配置来识别输入的字符串值。
这些可以被用来配置使时间格式符合用户的使用场景。
该表单项可以通过使用minValue, maxValue, disabledDays,
and disabledDates 配置来限制时间在一定的范围内。
这些配置被同时用来对表单项进行验证， 并且日期选择器可以防止选择无效的日期。*/
},{
fieldLabel:"联系电话"
},{
fieldLabel:"手机号码"
},{
fieldLabel:"电子邮件"
},{
xtype:"combo",//下拉条
fieldLabel:"性别",
mode:"local",//store的模式
displayField:"sex",//相关的数据域名称绑定到ComboBox
readOnly:true,
triggerAction:"all",
/**触发器被点击时执行的操作。
'all' :指定allQuery配置项执行查询
'query' :使用原始值执行查询*/
value:"男",
store:new Ext.data.SimpleStore({//本地模式(临时数据存储器)，默认是服务器模式
fields:["sex"],
data:[["男"],["女"]]
})
/**ComboBox控件支持自动完成、远程加载、和许多其他特性。
ComboBox就像是传统的HTML文本 <input> 域和 <select> 域的综合；
用户可以自由的在域中键入，或从下拉选择列表中选择值。
默认用户可以输入认可值，即使它没有出现在选择列表中； 设置forceSelection为“true”，
以阻止自由格式的值，并将其限制在列表中的项。
选择列表中的项是从任何Ext.data.Store（包括远程store）填充。
store中的数据项被分别映射在每个选项的显示文本和隐藏值，通过valueField和displayField配置。
如果store非远程，例如：仅依靠本地数据并从前端被加载，应该确保设置queryMode为“'local'”，
因为这样会给用户提高相应。*/
}]
/** 第三层布局元素：textfield*/
},{
columnWidth:5，
layout:"form",
labelWidth:55,
baseCls:"x-plain",
items:{
xtype:"textfield",
fieldLabel:"个人照片",
width:170,
height:177,
inputType:"image"
}
}]
/** 第二层布局元素：两个对半分的panel*/
},{
fieldLabel:"身份证号"
width:400//若采用anchor，此设置无效
},{
fieldLabel:"具体地址"
width:400
},{
xtype:"panel",
layout:"column",
baseCls:"x-plain",//本身的背景色
defaults:{baseCls:"x-plain"},//下面子元素的背景色
items:[{
columnWidth:.5,
layout:"form",
labelWidth:55,
items:{
xtype:"combo",
fieldLabel:"职位"
anchor:"100%",
mode:"local",
displayField:"job",
readOnly:true,
triggerAction:"all",
listeners:{
select:function(_combo,_record,_index){
_combo["selectItem"]=_record;
}
}
store:new Ext.data.SimpleStore({
fields:["job"],
data:[["程序员"],["工程师"],["主管"],["经理"]]
})
//一般来说，给对象填充构造参数其实是把这些属性合并到对象中去
//所以下文可以使用_job.store的形式来获取store
}
},{
columnWidth:.4,
style:"padding:0 0 0 5px",//调节内间距是对按钮外层的组件进行设置，而不是按钮
/**padding: 为所有当前布局管理的子项('items')设置padding值.
此属性可以用一组空格分隔的数值所组成的字符串定义.
数值关联边框的顺序和CSS处理padding的规则一致:
如果只有一个值, 则应用到所有边框.
如果有两个值, 则上下边框设置为第一个值, 左右设为第二个值.
如果有三个值, 则上边框使用第一个, 左右边框使用第二个, 下边框使用第三个.
如果有四个值, 则分别依次应用于上,右,下,左.
*/
items:{
xtype:"button",
text:"添加职位",
handler:function(){
//尽量把变量约束在一个函数内，否则容易造成命名混乱
//注意当前对象this和主容器的嵌套关系
var _window = this.ownerCt.ownerCt.ownerCt;
var _job = _window.findByType("combo")[1];
Ext.MessageBox.prompt("请输入职位名称","职位名称",function(_btn,_text){
if(_btn=="ok"){
var _store = this.store;
_store.insert(0,new JOB({
job:_text
}));
/**insert( Number index, Ext.data.Model[] records )
从给定的索引处开始,插入 Model 实例;并触发 add 事件.
add( Ext.data.Model[]/Ext.data.Model... model ) : Ext.data.Model[]
添加 Model 实例到 Store. 本方法接收的参数可以是:
由 Model 实例 或者是 Model 配置对象 组成的数组.
任意数量的 Model 实例 或者是 Model 配置对象;(可以是多个参数的情况).
新的 Model 实例将被添加到已存在的数据集合末尾.*/
this.setValue(_text);
this["selectItem"]=_store.getAt(0);
}
},_job);//_job充当函数里的this，作为作用域
/**prompt( String title, String msg,
[Function fn], [Object scope], [Boolean/Number multiline], [String value] ) :
显示一个带有“确定”和“取消”按钮，提供用户输入一些文本的消息盒子(类似于JavaScript的提示)。
提示可以是一个单行或者多行的文本框。
如果传了一个回调函数，它将会在用户点击其中一个按钮后被调用，
被点击的按钮的id(也可能是右上角的关闭按钮，这将始终报告为“取消”)
和输入的文本将会作为回调函数的两个参数被传递。*/
}
}
},{
columnWidth:.2,
items:{
xtype:"button",
text:"修改职位",
handler:function(){
var _window = this.ownerCt.ownerCt.ownerCt;
var _job = _window.findByType("combo")[1];
if(_job["selectItem"] != null)
Ext.MessageBox.prompt("请输入修改后的职位名称","职位名称",function(_btn,_text){
if(_btn == "ok"){
this["selectItem"].set("job",_text);
this.setValue(_text);
}
},_job,false,_job.getValue());
}
}
},{
culumnWidth:.2,
items:{
xtype:"button",
text:"删除职位",
handler:function(){
var _window = this.ownerCt.ownerCt.ownerCt;
var _job = _window.findByType("combo")[1];
if(_job["selectItem"] != null)
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("");
this["selectItem"]=null;
}
}
});
}
}
}]
}],
showLock:false,
listeners:{
"show":function(_window){
if(!_window["showLock"]){
_window.findByType("textfield")[5].getEl().dom.src="default_pic.gif";
//与之前版本相比，因为之前字段更改了类型，所以图片作为textfield的序号也在改变
_window["showLock"]=true;
}
var _job = _window.findByType("combo")[1];
var _store = _job.store;
_job.setValue(_store.getAt(0).get("job"));
/**获取指定index处的记录.返回：传入index处的记录Record. 如果没有找到则返回 undefined*/
_job["selectItem"]=_store.getAt(0);
}
}
buttons:[{//按数组形式访问
text:"确定",
handler:function(){
alert(this.ownerCt.buttons[1].text);
}
},{
text:"取消"
}]
/** 第一层布局元素：panel、textfield和buttons*/
}).show();
});