Ext2.2-用XML做数据源,可编辑Grid的例子

阿尔萨斯

浏览: 4185030 次

最近访客更多访客>>

snower_tt

iams13

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2014-10 ( 581)
2014-09 ( 572)
2014-08 ( 545)
更多存档...

原文地址：http://www.java2000.net/p8972

先看看运行效果

html源代码

<html>

<head>

<metahttp-equiv="Content-Type"c>

<title>EditorGridExample</title>




<linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>

<scripttype="text/javascript"src="../adapter/ext/ext-base.js"></script>

<scripttype="text/javascript"src="../ext-all.js"></script>

<scripttype="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();



//日期格式化
functionformatDate(value){
returnvalue?value.dateFormat('Y年m月d日'):'';
};
//shorthandalias

varfm=Ext.form;



//自定义的字段

varcheckColumn=newExt.grid.CheckColumn({
header:"婚否?",
dataIndex:'married',
width:55
});



//列数据的模型
//dataIndex对应着数据里面的字段

varcm=newExt.grid.ColumnModel([{
id:'name',//数据模型的唯一编号
header:"姓名",//标题
dataIndex:'name',//对应于数据源里面的字段
width:220,//宽度
editor:newfm.TextField({//编辑的类型
allowBlank:false//不允许为空，如果为空，则会显示红色波浪线警告且恢复原始数值
})
},{
header:"学位",//学位的标题
dataIndex:'degree',//对应于学位
width:130,
editor:newExt.form.ComboBox({//使用自定义的下拉框
typeAhead:true,
triggerAction:'all',
transform:'degree',//对应的下拉列表ID
lazyRender:true,
listClass:'x-combo-list-small'
})
},{
header:"薪资(元)",
dataIndex:'salary',
width:70,
align:'right',//右对齐
editor:newfm.NumberField({//数字编辑框
decimalPrecision:0,//默认的小数点位数
allowBlank:false,
allowNegative:false,//不允许为负数
maxValue:100000//最大值为10万
})
},{
header:"出生日期",
dataIndex:'birthday',
width:95,
renderer:formatDate,
editor:newfm.DateField({//日期的编辑框
format:'Y-m-d',//格式
minValue:'1908-08-08'
})
},
checkColumn//自定义的婚否列
]);






//默认列是可以排序的

cm.defaultSortable=true;



//创建数据源的记录,代表一个员工

varEmployee=Ext.data.Record.create([
//name对应着数据里面对应的标签，birthday例外，对应着birth
{name:'name',type:'string'},
{name:'address',type:'string'},
{name:'degree'},
{name:'salary',type:'int'},



//日期自动转换
{name:'birthday',mapping:'birth',type:'date',dateFormat:'m/d/Y'},
{name:'married',type:'bool'}
]);






//创建数据集，读取员工数据

varstore=newExt.data.Store({
//使用HTTP协议获得
url:'employees.xml',



//thereturnwillbeXML,soletssetupareader
//返回的是一个XML数据，我们解析为我们定义的记录格式Employee
reader:newExt.data.XmlReader({
//记录里面有个"employee"的标签
record:'employee'
},Employee),



sortInfo:{field:'name',direction:'ASC'}//默认按照姓名正向排序
});






//创建可编辑的Grid

vargrid=newExt.grid.EditorGridPanel({
store:store,//指定数据源
cm:cm,
renderTo:'editor-grid',//目标的id位置
width:600,
height:300,
autoExpandColumn:'name',//默认自动扩展宽度的字段
title:'人员信息编辑',//标题
frame:true,
plugins:checkColumn,
clicksToEdit:0,//默认为双击编辑，如果为1则单击就编辑



tbar:[{//顶部的工具栏toolsbar
text:'增加新员工',
handler:function(){

varp=newEmployee({
name:'输入员工姓名',
degree:'学士',
salary:0,
birthday:(newDate()).clearTime(),
married:false
});
grid.stopEditing();
store.insert(0,p);
grid.startEditing(0,0);
}
}]
});



//装载数据
store.load();
});




Ext.grid.CheckColumn=function(config){
Ext.apply(this,config);
if(!this.id){

this.id=Ext.id();
}

thisthis.renderer=this.renderer.createDelegate(this);
};




Ext.grid.CheckColumn.prototype={
init:function(grid){

this.grid=grid;
this.grid.on('render',function(){

varview=this.grid.getView();
view.mainBody.on('mousedown',this.onMouseDown,this);
},this);
},



onMouseDown:function(e,t){
if(t.className&&t.className.indexOf('x-grid3-cc-'+this.id)!=-1){
e.stopEvent();

varindex=this.grid.getView().findRowIndex(t);

varrecord=this.grid.store.getAt(index);
record.set(this.dataIndex,!record.data[this.dataIndex]);
}
},



renderer:function(v,p,record){
p.css+='x-grid3-check-col-td';

return'<divclass="x-grid3-check-col'+(v?'-on':'')+'x-grid3-cc-'+this.id+'"></div>';
}
};

</script>

</head>

<body>

<h1>可编辑的Grid</h1>

<!--自定义的数据下拉框-->

<selectname="degree"id="degree"style="display:none;">

<optionvalue="博士">博士</option>

<optionvalue="硕士">硕士</option>

<optionvalue="双学士">双学士</option>

<optionvalue="学士">学士</option>

<optionvalue="其它">其它</option>

</select>

<divid="editor-grid"></div>

</body>

</html>

用到的 employees.xml

<?xmlversion="1.0"encoding="UTF-8"?>

<catalog>

<employee>

<name>张三</name>

<address>天津市第一大街</address>

<zone>4</zone>

<degree>学士</degree>

<salary>2440</salary>

<birth>03/15/2006</birth>

<married>true</married>

</employee>

<employee>

<name>李四</name>

<address>北京市朝阳区</address>

<zone>3</zone>

<degree>学士</degree>

<salary>9370</salary>

<birth>03/06/2006</birth>

<married>true</married>

</employee>

<employee>

<name>王五</name>

<address>上海浦东</address>

<zone>4</zone>

<degree>博士</degree>

<salary>6810</salary>

<birth>05/17/2006</birth>

<married>false</married>

</employee>

<employee>

<name>赵六</name>

<address>广州</address>

<zone>4</zone>

<degree>学士</degree>

<salary>9900</salary>

<birth>03/06/2006</birth>

<married>true</married>

</employee>

<employee>

<name>孙武</name>

<address>四川成都</address>

<zone>3</zone>

<degree>学士</degree>

<salary>6440</salary>

<birth>01/20/2006</birth>

<married>true</married>

</employee>

</catalog>