Ext2.2-用XML做数据源,可编辑Grid的例子
原文地址：http://www.java2000.net/p8972先看看运行效果
http://p.blog.csdn.net/images/p_blog_csdn_net/java2000_net/EntryImages/20080828/2008-08-28_065211.gif
html源代码
<div class="highlighter">
[*]<html><span />
[*]<span /><head><span />
[*]<span /><meta http-equiv="Content-Type" c><span />
[*]<span /><title>Editor Grid Example</title><span />
[*]<span />
[*]<span /><link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" /><span />
[*] <script type="text/javascript" src="../adapter/ext/ext-base.js"></script><span />
[*] <script type="text/javascript" src="../ext-all.js"></script><span />
[*] <script type="text/javascript"><span />
[*] Ext.onReady(function(){
[*] Ext.QuickTips.init();
[*]<span />
[*] // 日期格式化
[*] function formatDate(value){
[*] return value ? value.dateFormat('Y年m月d日') : '';
[*] };
[*] // shorthand alias
[*] var fm = Ext.form;
[*]<span />
[*] // 自定义的字段
[*] var checkColumn = new Ext.grid.CheckColumn({
[*] header: "婚否?",
[*] dataIndex: 'married',
[*] width: 55
[*] });
[*]<span />
[*] // 列数据的模型
[*] // 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 // 自定义的婚否列
[*] ]);
[*]<span />
[*]<span />
[*] // 默认列是可以排序的
[*] cm.defaultSortable = true;
[*]<span />
[*] // 创建数据源的记录,代表一个员工
[*] var Employee = Ext.data.Record.create([
[*] // name对应着数据里面对应的标签，birthday例外，对应着birth
[*] {name: 'name', type: 'string'},
[*] {name: 'address', type: 'string'},
[*] {name: 'degree'},
[*] {name: 'salary', type: 'int'},
[*]<span />
[*] // 日期自动转换
[*] {name: 'birthday', mapping: 'birth', type: 'date', dateFormat: 'm/d/Y'},
[*] {name: 'married', type: 'bool'}
[*] ]);
[*]<span />
[*]<span />
[*] // 创建数据集，读取员工数据
[*] var store = new Ext.data.Store({
[*] // 使用HTTP协议获得
[*] url: 'employees.xml',
[*]<span />
[*] // the return will be XML, so lets set up a reader
[*] // 返回的是一个XML数据，我们解析为我们定义的记录格式 Employee
[*] reader: new Ext.data.XmlReader({
[*] // 记录里面有个 "employee" 的标签
[*] record: 'employee'
[*] }, Employee),
[*]<span />
[*] sortInfo:{field:'name', direction:'ASC'} // 默认按照姓名正向排序
[*] });
[*]<span />
[*]<span />
[*] // 创建可编辑的 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则单击就编辑
[*]<span />
[*] 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);
[*] }
[*] }]
[*] });
[*]<span />
[*] // 装载数据
[*] store.load();
[*] });
[*]<span />
[*] Ext.grid.CheckColumn = function(config){
[*] Ext.apply(this, config);
[*] if(!this.id){
[*] this.id = Ext.id();
[*] }
[*] thisthis.renderer = this.renderer.createDelegate(this);
[*] };
[*]<span />
[*] 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);
[*] },
[*]<span />
[*] 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);
[*] }
[*] },
[*]<span />
[*] 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><span />
[*]<span /></head><span />
[*]<span /><body><span />
[*]<span /><h1>可编辑的 Grid</h1><span />
[*]<span /><!-- 自定义的数据下拉框 --><span />
[*]<span /><select name="degree" id="degree" style="display: none;"><span />
[*] <option value="博士">博士</option><span />
[*] <option value="硕士">硕士</option><span />
[*] <option value="双学士">双学士</option><span />
[*] <option value="学士">学士</option><span />
[*] <option value="其它">其它</option><span />
[*]<span /></select><span />
[*]<span /><div id="editor-grid"></div><span />
[*]<span /></body><span />
[*]<span /></html><span />
页:
[1]