您的位置：首页 > Web前端 > JavaScript

ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)

2008-08-30 09:33 387 查看

这一节，我们将看到ExtJs功能强大的可编辑网格控件，几乎与VS.Net的GridView功能一样了，但是ExtJs的可是纯JS的UI

一.静态示例(改自ExtJs的官方示例)

a.因为我们是采用xml做为数据源的，这里贴出xml的内容

Code

<?xml version="1.0" encoding="utf-8"?>

<plant>

<botanical>产自加拿大</botanical>

</plant>

<plant>

<botanical>Erythronium americanum</botanical>

</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">

<head>

<title>可编辑的网格</title>

</head>

<body>

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>

</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">

<title>可编辑的网格</title>

</head>

<body>

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>

</form>

</body>

</html>
转载请注明来自"菩提树下的杨过"/article/4607612.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航