Ext4核心组件Grid的变化及学习（4）：grid与服务端使用direct进行数据交互

using System;
using System.Collections.Generic;
using Ext.Direct;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Web.SessionState;
using DBUtility;
using System.Data;
using System.Text;
using System.Data.SqlClient;
using Persister;

/// <summary>
///FileAction 的摘要说明
/// </summary>
[DirectAction]
public class FileAction
{

[DirectMethod]
public FileInfoSerializer Load(Dictionary<string,object> arg)
{
object[] sorters = (object[])arg["sort"];
Dictionary<string, object> sorter = (Dictionary<string, object>)sorters[0];
FileInfoCollection coll = new FileInfoCollection();
coll.OrderField = sorter["property"].ToString();
coll.OrderDirection = sorter["direction"].ToString().ToLower() == "desc" ? FileInfoCollection.Direction.DESC : FileInfoCollection.Direction.ASC;
return new FileInfoSerializer(coll);
}

[DirectMethod]
public FileInfoSerializer PagingLoad(string order, string direction, long start, long limit)
{
FileInfoCollection coll = new FileInfoCollection();
coll.OrderField = order;
coll.OrderDirection = direction.ToLower() == "desc" ? FileInfoCollection.Direction.DESC : FileInfoCollection.Direction.ASC;

return new FileInfoSerializer(coll, Convert.ToInt32(start), Convert.ToInt32(limit));
}

[DirectMethod]
[ParseAsJson]
public JObject Destroy(JObject o)
{
JValue val = (JValue)o["data"];
FileInfo c = new FileInfo(Convert.ToString(val.Value));
c.Destroy();
return new JObject(
new JProperty("data", new JArray())
);
}

[DirectMethod]
[ParseAsJson]
public FileInfo Create(JObject o)
{
FileInfo c = JsonConvert.DeserializeObject<FileInfo>(o.ToString());
c.Save();
return c;
}

[DirectMethod]
[ParseAsJson]
public JObject Update(JObject o)
{
FileInfo c = JsonConvert.DeserializeObject<FileInfo>(o.ToString());
JProperty success = new JProperty("success","false");
try
{
c.Save();
success = new JProperty("success", "true");
}
catch
{
}
return new JObject(
success,
new JProperty("id",c.Id),
new JProperty("title",c.Title)
);
}

}

<%@ WebHandler Language="C#" Class="Api" %>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.SessionState;
using System.Web;
using Ext.Direct;

public class Api : DirectHandler, IRequiresSessionState
{

public override string ProviderName
{
get
{
return "Ext.app.USER_API";
}
}

public override string Namespace
{
get
{
return "MyApp";
}
}

protected override void ConfigureProvider(DirectProvider provider)
{
this.Configure(provider, new object[] { new CheckLogin(),new TreeAction(),new FileAction() });
}

}

Ext.define('File', {
extend: 'Ext.data.Model',
fields: [
'id','title', 'classId',
{name: 'datetimeCreated',type: 'date',dateFormat: 'c'},
'docAbstract','typeId'
]
});

//定义fileClassModel
Ext.define('FileClass', {
extend: 'Ext.data.Model',
fields: ['id', 'name']
});
//创建fileClass下拉选择框的store
new Ext.data.Store({
model: 'FileClass',
storeId:'fileClassStore',
proxy: {type: 'memory'},
data : [
{"id":"1e887509-dd86-49f4-9d63-4e8640409758", "name":".Net"},
{"id":"3384fcb7-3106-4fdd-ab65-31152eef9edb", "name":"java"}
]
});

Ext.data.DirectStore中DirectAction的回调函数问题

//创建filesStore的callback function
var callback = function(response, e) {
if(response.success=='true'){
Ext.getStore('filesStore').getById(response.id).commit()
Ext.MessageBox.alert('callback',response.title+'已经更新')
}
else{
Ext.getStore('filesStore').getById(response.id).reject()
Ext.MessageBox.alert('callback',response.title+'更新失败')
}};
//创建filesStore
Ext.create('Ext.data.DirectStore', {
model: 'File',
storeId: 'filesStore',
autoLoad: true,
autoSync: true,
remoteSort: true,
api: {
create: MyApp.FileAction.Create,
read: MyApp.FileAction.Load,
update: function(rec){MyApp.FileAction.Update(rec,callback);},
destroy: MyApp.FileAction.Destroy
},
writer: new Ext.data.JsonWriter({
encode: false,
writeAllFields: true
}),
idProperty: 'id',
totalProperty: 'total',
root: 'data',
sorters: [{
property: 'datetimeCreated',
direction: 'DESC'
}]
});

//定义MainFileGrid
Ext.define('App.MainFileGrid', {
extend: 'Ext.grid.Panel',
store: 'filesStore',
alias: 'widget.MainFileGrid',
columns: [
{
header: '文档',
dataIndex: 'title',
flex: 1,
renderer: function(value, o, record) {
return Ext.String.format('<div class="topic"><b>{0}</b><span class="author">{1}</span></div>',
value, record.get('author'));
},
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: '类别',
flex: 1,
dataIndex: 'classId',
width: 100,
renderer: function(value) {
return Ext.getStore('fileClassStore').getById(value).data.name;
},
field: {
xtype: 'combobox',
store: 'fileClassStore',
queryMode: 'local',
//提前加载数据，防止延迟
autoRender: true,
displayField: 'name',
valueField: 'id',
editable: false,
allowBlank: false
}
}, {
header: '文件类型',
flex: 1,
dataIndex: 'typeId',
width: 70,
align: 'right',
editor: {
// defaults to textfield if no xtype is supplied
allowBlank: false
}
}, {
header: '时间',
dataIndex: 'datetimeCreated',
renderer : Ext.util.Format.dateRenderer('Y年m月d日'),
width: 150,
field: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}
],
plugins: [Ext.create('Ext.grid.plugin.RowEditing', {
autoCancel: false,
clicksToEdit: 2
})],

initComponent: function(){
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
cls: 'x-docked-noborder-top',
items: [{
text: '新文件',
iconCls: 'icon-new-topic',
handler: function(){
alert('Not implemented');
}
}, '-', {
text: '显示详细信息',
iconCls: 'icon-preview',
enableToggle: true,
pressed: true,
scope: this,
toggleHandler: this.onPreviewChange
}]
},{
dock: 'bottom',
xtype: 'pagingtoolbar',
store: 'filesStore',
displayInfo: true,
displayMsg: '显示 {0} - {1} 共 {2} 文档',
emptyMsg: '无文档'
}],
selModel: Ext.create('Ext.selection.RowModel', {
mode: 'SINGLE',
listeners: {
scope: this,
select: this.onSelect
}
})
});
this.callParent();
},

onSelect: function(selModel, rec){
this.ownerCt.onSelect(rec);
},

loadForum: function(id){
var store = this.store;
store.getProxy().extraParams.forumId = id;
store.loadPage(1);
},

onPreviewChange: function(btn, pressed){
this.ownerCt.togglePreview(pressed);
},

onSummaryChange: function(btn, pressed){
this.getView().getPlugin('preview').toggleExpanded(pressed);
}
});

a）“类别”列自定义显示，根据类别id到类别store中找name

renderer: function(value) {

return Ext.getStore('fileClassStore').getById(value).data.name;

},

如果不设置就会直接显示id，效果对比如下（其中文件类型就是没有自定义的，显示原始id）

field: {
xtype: 'combobox',
store: 'fileClassStore',
queryMode: 'local',
//提前加载数据，防止延迟
autoRender: true,
displayField: 'name',
valueField: 'id',
editable: false,
allowBlank: false
}