ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)
这一节，我们将看到ExtJs功能强大的可编辑网格控件，几乎与VS.Net的GridView功能一样了，但是ExtJs的可是纯JS的UI
一.静态示例(改自ExtJs的官方示例)
a.因为我们是采用xml做为数据源的，这里贴出xml的内容
Code
<?xml version="1.0" encoding="utf-8"?><catalog> <plant> <common>红竹</common> <botanical>产自加拿大</botanical> <zone>4</zone> <light>喜阴</light> <price>2.44</price> <availability>03/15/2006</availability> <indoor>0</indoor> </plant> <plant> <common>紫罗兰</common> <botanical>Erythronium americanum</botanical> <zone>4</zone> <light>半阴半光</light> <price>9.04</price> <availability>02/01/2006</availability> <indoor>1</indoor> </plant> </catalog>
b.ExtJs调用页面
Code
<!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"/> <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> <title>可编辑的网格</title></head><body><script type="text/javascript">
Ext.onReady(function() { Ext.QuickTips.init(); function formatDate(value) { return value ? value.dateFormat('Y年m月d日') : '';
}; var fm = Ext.form; //定义复选框列 var checkColumn = new Ext.grid.CheckColumn({ header: "室内?", dataIndex: 'indoor', width: 55 }); //定义网格的列模板 var cm = new Ext.grid.ColumnModel([{ id: 'common', header: "名称", dataIndex: 'common', width: 220, editor: new fm.TextField({ allowBlank: false }) }, { header: "光照", dataIndex: 'light', width: 130, editor: new Ext.form.ComboBox({ allowBlank:false, typeAhead: true, triggerAction: 'all', transform: 'sellight', lazyRender: true, listClass: 'x-combo-list-small' }) }, { header: "售价", dataIndex: 'price', width: 70, align: 'right', renderer: 'usMoney', editor: new fm.NumberField({ allowBlank: false, allowNegative: false, maxValue: 100000 }) }, { header: "上市时间", dataIndex: 'availDate', width: 105, renderer: formatDate, editor: new fm.DateField({ format: 'm/d/y', minValue: '01/01/06', disabledDays: [0, 6], disabledDaysText: '目前还未上市' }) }, checkColumn ]); cm.defaultSortable = true; //定义记录的类型 var Plant = Ext.data.Record.create([ {name: 'common', type: 'string' }, { name: 'botanical', type: 'string' }, { name: 'light' }, { name: 'price', type: 'float' }, { name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' }, { name: 'indoor', type: 'bool' } ]); //创建数据源 var store = new Ext.data.Store({ url: 'plants.xml', reader: new Ext.data.XmlReader({ record: 'plant' }, Plant), sortInfo: { field: 'common', direction: 'ASC' } }); //创建可编辑的网格 var grid = new Ext.grid.EditorGridPanel({ store: store, cm: cm, renderTo: 'editor-grid', width: 600, height: 180, autoExpandColumn: 'common', title: '可编辑的网格', frame: true, plugins: checkColumn, clicksToEdit: 1, tbar: [{ text: '增加记录', handler: function() { var p = new Plant({ common: '新品种1', light: '喜光', price: 1.0, availDate: (new Date()).clearTime(), indoor: 1 }); grid.stopEditing(); store.insert(0, p); grid.startEditing(0, 0); }}] }); //加载数据 store.load(); }); //复选框列改变时，保存gird的id列值 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><select name="sellight" id="sellight" 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>
二.结合WCF动态读取
1.WCF服务端
Code
[OperationContract] [WebInvoke(ResponseFormat = WebMessageFormat.Xml, Method = "GET", UriTemplate = "GetData")] public T_Class[] GetData() { List<T_Class> _Result = new List<T_Class>(); using (DBDataContext db = new DBDataContext()) { _Result = db.T_Classes.Where(c => (new string[] { "shop", "product" }).Contains(c.F_Type.ToLower())).Take(30).ToList(); db.Connection.Close(); } return _Result.ToArray(); }
注意:为使linq to sql中的类支持WCF数据契约，还是要手动对类添加[DataContract]标志，对字段添加[DataMember]标志，否则无法序列化；另外对于System.DateTime类型的字段，最终序列化成xml时，格式类似<F_AddTime>2007-03-07T15:48:04</F_AddTime>，ExtJs不能正确识别这种格式，无奈之下，只好手动修改*.designer.cs文件中自动生成的T_Class类，把F_AddTime手动修改为System.String类型，同时人工处理返回格式，如下：
Code
[Column(Storage="_F_AddTime", DbType="DateTime")]
[DataMember]
public string F_AddTime
{
get
{
return CNTVS.TOOLS.Utils.FormatDateString(this._F_AddTime,"yyyy-mm-dd");
}
set
{
if ((this._F_AddTime != value))
{
this.OnF_AddTimeChanging(value);
this.SendPropertyChanging();
this._F_AddTime = value;
this.SendPropertyChanged("F_AddTime");
this.OnF_AddTimeChanged();
}
}
}
这里，我调用了自己写的一个工具库的FormatDateString方法，当然大家也可以自己定义返回的格式，只要ExtJs能识别就可以了
2.前端页面，跟静态示例几乎一样，贴一下代码:
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="03_Grid_Editable.aspx.cs" Inherits="Ajax_WCF._3_Grid_Editable" %><!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 runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="js/ext2.2/resources/css/ext-all.css" /> <script type="text/javascript" src="js/ext2.2/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="js/ext2.2/ext-all.js"></script> <title>可编辑的网格</title></head><body><script type="text/javascript"> Ext.onReady(function() { Ext.QuickTips.init(); function newGuid() { var guid = ""; for (var i = 1; i <= 32; i++) { var n = Math.floor(Math.random() * 16.0).toString(16); guid += n; if ((i == 8) || (i == 12) || (i == 16) || (i == 20)) guid += "-"; } return guid; } function formatDate(value) { return value ? value.dateFormat('Y年m月d日') : ''; }; var fm = Ext.form; //定义复选框列 var checkColumn = new Ext.grid.CheckColumn({ header: "显示?", dataIndex: 'F_isShow', width: 55 }); //定义网格的列模板 var cm = new Ext.grid.ColumnModel([{ id: 'F_ID', header: "分类ID", dataIndex: 'F_ID', width: 220, editor: new fm.TextField({ allowBlank: false }) }, { header: "分类名称", dataIndex: 'F_ClassName', width: 130, editor: new fm.TextField({ allowBlank:false }) },{ header: "类别", dataIndex: 'F_Type', width: 130, editor: new fm.ComboBox({ allowBlank:false, typeAhead: true, triggerAction: 'all', transform: 'selType', lazyRender: true, listClass: 'x-combo-list-small' }) }, { header: "排序号", dataIndex: 'F_Orders', width: 70, align: 'right', editor: new fm.NumberField({ allowBlank: false, allowNegative: false, maxValue: 100000 }) }, { header: "添加时间", dataIndex: 'F_AddTime', width: 105, renderer: formatDate, editor: new fm.DateField({ format: 'm/d/y', minValue: '01/01/06', disabledDays: [0, 6], disabledDaysText: '不能早于2001年01月06日' }) }, checkColumn ]); cm.defaultSortable = true; //定义记录的类型 var T_Class = Ext.data.Record.create([ { name: 'F_ID', type: 'string' }, { name: 'F_ClassName', type: 'string' }, { name: 'F_ShortName',type:"string" }, { name: 'F_ParentID', type: 'string' }, { name: 'F_Depth', type: 'float' }, { name: 'F_RootID', type: 'float' }, { name: 'F_Orders', type: 'float' }, { name: 'F_ParentIDStr', type: 'string' }, { name: 'F_ParentNameStr', type: 'string' }, { name: 'F_ReadMe', type: 'string' }, { name: 'F_AddTime', type: 'date', dateFormat: 'Y-m-d' }, { name: 'F_Type' ,type:"string"}, { name: 'F_MaxPage', type: "float" }, { name: 'F_No', type: "float" }, { name: 'F_isShow', type: "bool" }, { name: 'F_AutoID', type: "float" } ]); //创建数据源 var store = new Ext.data.Store({ url: 'MyService.svc/GetData', reader: new Ext.data.XmlReader({ record: 'T_Class' }, T_Class), sortInfo: { field: 'F_ID', direction: 'ASC' } }); //创建可编辑的网格 var grid = new Ext.grid.EditorGridPanel({ store: store, cm: cm, renderTo: 'editor-grid', width: 750, height: 300, autoExpandColumn: 'F_ID', /**//*title: '基本网格示例',*/ viewConfig: { columnsText: '显示列', sortAscText: '升序', sortDescText: '降序' }, frame: false, plugins: checkColumn, clicksToEdit: 1, tbar: [{ text: '增加记录', handler: function() { var p = new T_Class({ F_ID:newGuid(), F_ClassName:"新分类1", F_ShortName:"", F_ParentID:"", F_Depth:0, F_RootID:0, F_Orders:0, F_ParentIDStr:"", F_ParentNameStr:"", F_ReadMe:"", F_AddTime:(new Date()).clearTime(), F_Type:"shop", F_MaxPage:0, F_No:"", F_isShow:0, F_AutoID:0 }); grid.stopEditing(); store.insert(0, p); grid.startEditing(0, 0); }}] }); //加载数据 store.load(); }); //复选框列改变时，保存gird的id列值 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><select name="selType" id="selType" style="display: none;"> <option value="shop">商家分类</option> <option value="product">产品分类</option> <option value="place">地区分类</option> </select><form id="form1" runat="server"> <div id="editor-grid"></div></form></body></html>
转载请注明来自"菩提树下的杨过"http://www.cnblogs.com/yjmyzz/archive/2008/08/29/1279307.html