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

最新推荐文章于 2018-10-08 16:49:49 发布

最新推荐文章于 2018-10-08 16:49:49 发布 · 117 阅读

文章标签：

#javascript #java #ViewUI

本文介绍了一个使用 ExtJS 实现的可编辑表格示例，包括自定义列、数据验证等功能，并提供了完整的 HTML 源代码及数据文件。

原文地址: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>

<html> <head> <meta http-equiv="Content-Type" c> <title>Editor Grid Example</title> <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /> <script type="text/javascript" src="../adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); // 日期格式化 function formatDate(value){ return value ? value.dateFormat('Y年m月d日') : ''; }; // shorthand alias var fm = Ext.form; // 自定义的字段 var checkColumn = new Ext.grid.CheckColumn({ header: "婚否?", dataIndex: 'married', width: 55 }); // 列数据的模型 // dataIndex 对应着数据里面的字段 var cm = new Ext.grid.ColumnModel([{ id:'name', // 数据模型的唯一编号 header: "姓名", // 标题 dataIndex: 'name', // 对应于数据源里面的字段 width: 220, // 宽度 editor: new fm.TextField({ // 编辑的类型 allowBlank: false // 不允许为空，如果为空，则会显示红色波浪线警告且恢复原始数值 }) },{ header: "学位", // 学位的标题 dataIndex: 'degree', // 对应于学位 width: 130, editor: new Ext.form.ComboBox({ // 使用自定义的下拉框 typeAhead: true, triggerAction: 'all', transform:'degree', // 对应的下拉列表ID lazyRender:true, listClass: 'x-combo-list-small' }) },{ header: "薪资(元)", dataIndex: 'salary', width: 70, align: 'right', // 右对齐 editor: new fm.NumberField({ // 数字编辑框 decimalPrecision: 0, // 默认的小数点位数 allowBlank: false, allowNegative: false, // 不允许为负数 maxValue: 100000 // 最大值为10万 }) },{ header: "出生日期", dataIndex: 'birthday', width: 95, renderer: formatDate, editor: new fm.DateField({ // 日期的编辑框 format: 'Y-m-d', // 格式 minValue: '1908-08-08' }) }, checkColumn // 自定义的婚否列 ]); // 默认列是可以排序的 cm.defaultSortable = true; // 创建数据源的记录,代表一个员工 var Employee = 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'} ]); // 创建数据集，读取员工数据 var store = new Ext.data.Store({ // 使用HTTP协议获得 url: 'employees.xml', // the return will be XML, so lets set up a reader // 返回的是一个XML数据，我们解析为我们定义的记录格式 Employee reader: new Ext.data.XmlReader({ // 记录里面有个 "employee" 的标签 record: 'employee' }, Employee), sortInfo:{field:'name', direction:'ASC'} // 默认按照姓名正向排序 }); // 创建可编辑的 Grid var grid = new Ext.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: [{ // 顶部的工具栏 tools bar text: '增加新员工', handler : function(){ var p = new Employee({ name: '输入员工姓名', degree: '学士', salary: 0, birthday: (new Date()).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(); } this.renderer = this.renderer.createDelegate(this); }; Ext.grid.CheckColumn.prototype ={ init : function(grid){ this.grid = grid; this.grid.on('render', function(){ var view = 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(); var index = this.grid.getView().findRowIndex(t); var record = 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 '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'"> </div>'; } }; </script> </head> <body> <h1>可编辑的 Grid</h1>  <select name="degree" id="degree" style="display: none;"> <option value="博士">博士</option> <option value="硕士">硕士</option> <option value="双学士">双学士</option> <option value="学士">学士</option> <option value="其它">其它</option> </select> <div id="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>

<?xml version="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>

结论：
Extjs 确实不错。