Ext.grid.Panel在Ext 4中不会从Ext.Direct代理存储中加载数据 [英] Ext.grid.Panel in Ext 4 not loading data from Ext.Direct proxy store
本文介绍了Ext.grid.Panel在Ext 4中不会从Ext.Direct代理存储中加载数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
HTML：
<！doctype html>
< html>
< head>
< meta charset =utf-8>
< title> Ext直接网格集成< / title>
< link rel =stylesheettype =text / csshref =http://www.rasc.ch/extjs-4.1.3/resources/css/ext-all.css/> ;
< link rel =stylesheettype =text / csshref =http://www.rasc.ch/extjs-4.1.3/examples/shared/example.css/>
< script src =http://www.rasc.ch/extjs-4.1.3/ext-all-dev.js>< / script>
< script type =text / javascriptsrc =../ directProxy.ashx>< / script>
< script type =text / javascriptsrc =XGrid_writer.js>< / script>
< script type =text / javascriptsrc =XGrid.js>< / script>
<！ - < script src =../ api-debug.js？group = turnover>< / script> - >
<！ - < script src =api-debug.js>< / script> - >
< / head>
< body>
< h1> Ext直接网格集成< / h1>
< p>
源代码：< a href =XGrid.js> XGrid.js< / a>
< / p>
< div id =loading-maskstyle =>< / div>
< div id =loading>
< div class =load-indicator>< img src =../ extjs / examples / shared / icons / fam / add.pngwidth =32height =32 =margin-right：8px; float：left; vertical-align：top;/> Ext Writer< br />< span id =loading-msg> Loading ...< / span> ;< / DIV>
< / div>
< / body>
< / html>
代理API描述符
Ext.app.REMOTING_API = {
type：remoting，
id：1，
url：../directRouter.ashx，
actions：{
CallTypes：[{
name：Echo，
len ：1，
formHandler：false
}，{
name：GetTime，
len：0，
formHandler
}，{
name：UploadHttpRequestParam，
len：1，
formHandler：true
}，{
名称：UploadNamedParameter，
len：1，
formHandler：true
}，{
name：SaveMethod，
len：3，
formHandler：false
}，{
name：SaveMethod_Form，
len：1，
formHandler ：true
}，
name：DateSample，
len：2，
formHandler：false
}]，
TreeAction {
name：getChildNodes，
len：2，
formHandler：false
}]，
CRUDSampleMethods：[{
name：create，
len：1，
formHandler：false
}，{
name：read b $ blen：1，
formHandler：false
}，{
name：update，
len：2，
formHandler：false
}，{
name：destroy，
len：1，
formHandler：false
} {
name：reset，
len：0，
formHandler：false
}]，
CRUDSampleMethods2：[{
name：create，
len：1，
formHandler：false
}，{
name：read，
len：1，
formHandler ：false
}，{
name：update，
len：2，
formHandler：false
}，{
name：destroy，
len：1，
formHandler：false
}，{
name：reset，
len：0，
formHandler：false
}]
}
};
代理数据（又称路由器渲染的JSON）：
[{
type：rpc，
name：null，
tid ：1，
action：CRUDSampleMethods2，
method：read，
result：{
success：true，
results：3，
data：[{
id：1，
email：email1@extjs.com，
first ：Martin，
last：Späth
}，{
id：2，
email：email2@extjs.com ，
first：Heinz，
last：Erhart
}，{
id：3，
email ：email1@extjs.com，
first：Albert，
last：Einstein
}]
}，
消息：null，
其中：null，
errorcode：0
}]
JavaScript代码（XGrid。 js）：
Ext.require（['Ext.direct。*'，'Ext.data。 '，'Ext.grid。*'，'Ext.util.Format']）;
Ext.define（'User'，{
extends：'Ext.data.Model'，
fields：['id'，'email'，'first' 'last']
}）;
Ext.onReady（function（）{
Ext.direct.Manager.addProvider（Ext.app.REMOTING_API）;
//创建树
Ext.define（'mypanel'，{
extends：'Ext.grid.Panel'，
store：{
model：'User'，
remoteSort：true，
autoLoad：true，
//引导者：[{
//属性：'email'，
// direction：'ASC'
//}，{
// property：'first'，
// direction：'DESC'
//}]，
proxy：{
type：'direct'，
directFn：CRUDSampleMethods2.read
}
}，
列：[{
dataIndex：'email'，
flex：1，
文本：'Email'
}，{
dataIndex：'first'，
// align：'right'，
wi dth：120，
text：'First'
// renderer：Ext.util.Format.usMoney
}]，
height：350，
width：600 ，
title：'User Grid'，
renderTo：Ext.getBody（）
}）;
}）;
JavaScript代码（XGrid_writer.js）：
Ext.onReady（function（）{
Ext.Direct.addProvider（Ext.app.REMOTING_API）;
Ext.define（'User'，{
extends：'Ext.data.Model'，
fields：['id'，'email'，'first'，'last' ]
}）;
// var reader = new Ext.data.JsonReader（{// ext 3 code
// totalProperty：'results'，
// successProperty：'success'，
// idProperty：'id'，
// root：'data'
//}，[{
/ / name：'id'
//}，{
// name：'email'，
// allowBlank：false
//}，{
/ / name：'first'，
// allowBlank：false
//}，{
// name：'last'，
// allowBlank：false
//}]
//）;
var reader = Ext.create（'Ext.data.JsonReader'，{// e xt 4 code
totalProperty：'results'，
successProperty：'success'，
idProperty：'id'，
root：'data'
}）;
// var writer = new Ext.data.JsonWriter（{//从ext 3转换为ext 4
var writer = Ext.create（'Ext.data。 JsonWriter'，{
returnJson：false，
writeAllFields：true
}）;
// var store = new Ext.data.DirectStore（{
var store = Ext.create（'Ext.data.DirectStore'，{
model：'User'，
api：{
read：CRUDSampleMethods2.read，
create： CRUDSampleMethods2.create，
update：CRUDSampleMethods2.update，
destroy：CRUDSampleMethods2.destroy
}，
reader：reader，
baseParams：{
dummy： 'blubb'
}，
writer：writer，//< - 将DataWriter插入商店，就像读者
paramsAsHash：true，
batchSave：false ，
批次：false，
prettyUrls：false，
remoteSort：true，
听众：{
load：function（result）{}，
loadexception：function（）{
}，
范围：this
}
}）;
//
var myPageSize = 10;
var userColumns = [{
header：ID，
width：40，
sortable：true，
dataIndex：'id'
}，{
header：Email，
width：100，
sortable：true，
dataIndex：'email'
// editor：new Ext .form.TextField（{}）
}，{
header：First，
width：50，
sortable：true，
dataIndex：'first'
// editor：new Ext.form.TextField（{}）
}，{
header：Last，
width：50，
sortable：true ，
dataIndex：'last'
// editor：new Ext.form.TextField（{}）
}];
Ext.onReady（function（）{
Ext.QuickTips.init（）;
// var userForm = new App.user.Form（{
/ / renderTo：'user-form'，
// listeners：{
// create：function（fpanel，data）{// < - customcreate在App.user中定义的事件。 Form class
// var rec = new userGrid.store.recordType（data）;
// userGrid.store.insert（0，rec）;
//}
/ /}
//}）;
//创建user.Grid实例（@see UserGrid.js）
var userGrid = Ext.create（'mypanel'，{
renderTo：Ext.getBody（），
store：store，
列：userColumns，
// bbar：new Ext.PagingToolbar（{
bbar：Ext.create （'Ext.PagingToolbar'，{
store：store，// grid and PagingToolbar u唱相同的商店
displayInfo：true，
pageSize：myPageSize，
prependButtons：true，
items：[
'text 1'
]
}），
listeners：{
rowclick：function（g，index，ev）{
var rec = g.store.getAt（index）;
//userForm.loadRecord(rec）;
}，
destroy：function（）{
//userForm.getForm（）。reset（）;
}
}
}）;
setTimeout（function（）{
Ext.get（'loading'）。remove（）;
Ext.fly（'loading-mask'）。fadeOut（{
remove ：true
}）;
store.load（{
params：{
start：0，//如果使用页面
限制，请指定第一页加载的参数：myPageSize，
foo：'bar'
}
}）;
}，250）;
}）;
}）; // onready
编辑1：
回应：
美化：
[{/ pre>
type：rpc，
name：null，
tid：1，
action：CRUDSampleMethods2，
method：read，
result：{
success：true，
results：3，
data：[{
id：1，
email：email1@extjs.com，
first：Martin，
last：Späth
}，{
id：2，
email：email2@extjs.com，
first：Heinz，
last：Erhart
}，{
id：3，
email：email1@extjs.com，
first ：Albert，
last：爱因斯坦
}]
}，
message：null，
其中：null，
errorcode：0
}]
编辑2：
var store = Ext.create（'Ext.data.Store'，{
model：'User'，
// fields：['id'，'email'，'first'，'last ']，
proxy：{
type：'direct'，
directFn：CRUDSampleMethods2.read，
reader：{
root：'data'
}
}
}）;
我有一个存储在定义（Ext.define）和实例（Ext.create）之前。所以现在我只有一个Ext.grid.Panel的实例。我不再有XGrid.js。下面的代码是XGrid.html。后来，我可以在MVC中创建我的定义，但至少这让我开始。作者也没有运作，所以这是下一个挑战。
Ext.require（['Ext.direct。* '，'Ext.data。*'，'Ext.grid。*'，'Ext.util.Format']）;
Ext.onReady（function（）{
Ext.Direct.addProvider（Ext.app.REMOTING_API）;
Ext.define（'用户'，{
extends：'Ext.data.Model'，
fields：['id'，'email'，'first'，'last']
}）;
// var reader = new Ext.data.JsonReader（{
// totalProperty：'results'，
// successProperty：'success'，
// idProperty：'id'，
// root：'data'
//}，[{
// name：'id'
//}，{
// name：'email'，
// allowBlank：false
//}，{
// name：'first'，
// allowBlank： false
//}，{
// name：'last'，
// allowBlank：false
//}]
//）;
var reader = Ext.create（'Ext.data.JsonReader'，{
totalProperty：'results'，
successProperty：'success'，
idProperty：'id'，
root：'data'
// fields：[
// {
// name：' id'
//}，{
// name：'email'
//}，{
// name：'first'
//} {
// name：'last'
//}
//]
}）;
// var writer = new Ext.data.JsonWriter（{//从ext 3转换为ext 4
var writer = Ext.create（'Ext.data。 JsonWriter'，{
returnJson：false，
writeAllFields：true
}）;
var store = Ext.create（'Ext.data.Store'，{
model：'User'，
// fields：['id'，'email'，'first'，'last']，
proxy：{
type：直接'，
directFn：CRUDSampleMethods2.read，
reader：{
root：'data'
}
}
}）;
// var store = new Ext.data.DirectStore（{
// var store = Ext.create（'Ext.data.DirectStore'，{
// model：'User' ，
// api：{
// read：CRUDSampleMethods2.read，
// create：CRUDSampleMethods2.create，
// update：CRUDSampleMethods2.update，
// destroy：CRUDSampleMet hods2.destroy
//}，
// // reader：reader，
// baseParams：{
// dummy：'blubb'
//} ，
// writer：writer，//< - 将DataWriter插入商店，就像读者
// paramsAsHash：true，
// batchSave：false，
// batch：false，
// prettyUrls：false，
// remoteSort：true，
// listeners：{
// load：function（result） {}，
// loadexception：function（）{
//}，
// scope：this
//}
//} ）;
// //
var myPageSize = 10;
var userColumns = [{
header：ID，
flex：1，
sortable：true，
dataIndex：'id'
}，{
header：Email，
flex：1，
sortable：true，
dataIndex：'email'
// editor：new Ext .form.TextField（{}）
}，{
header：First，
flex：1，
sortable：true，
dataIndex：'first'
// editor：new Ext.form.TextField（{}）
}，{
header：Last，
flex：1，
sortable：true ，
dataIndex：'last'
// editor：new Ext.form.TextField（{}）
}];
// Ext.onReady（function（）{
Ext.QuickTips.init（）;
// var userForm = new App。 user.Form（{
// renderTo：'user-form'，
// listeners：{
// create：function（fpanel，data）{//< - custom create事件定义在App.user.Form类
// var rec = new userGrid.store.recordType（data）;
// userGrid.store.insert（0，rec）;
$}
//}
//}）;
//创建user.Grid实例（@see UserGrid.js）
var userGrid = Ext.create（'Ext.grid.Panel'，{
title：'user grid'，
renderTo：Ext.getBody（），
height：350，
width： 600，
remoteSort：false，
// autoLoad：true，
store：store，
列：userColumns，
// bbar：new Ext .PagingToolbar（{
bbar：Ext.create（'Ext.PagingToolbar'，{
store：store，// grid and PagingToolbar using same store
displayInfo：true，
pageSize：myPageSize，
prependButtons ：$，
项目：[
'text 1'
]
}），
listeners：{
rowclick：function（g，index，ev ）{
var rec = g.store.getAt（index）;
//userForm.loadRecord(rec）;
}，
destroy：function（）{
//userForm.getForm（）。reset（）;
}
}
}）;
setTimeout（function（）{
Ext.get（'loading'）。remove（）;
Ext.fly（'loading-mask'）。fadeOut（{
remove ：true
}）;
store.load（{
params：{
start：0，//如果使用页面
限制，请指定第一页加载的参数：myPageSize，
foo：'bar'
}
}）;
}，250）;
//}）;
// Ext.require（['Ext.direct。*'，'Ext.data。*'，'Ext.grid。*'，'Ext.util.Format']）;
// Ext.define（'User'，{
// extends：'Ext.data.Model'，
// fields：['id'，'email '，'first'，'last']
//}）;
// Ext.direct.Manager.addProvider（Ext.app.REMOTING_API）;
//创建树
// var userGrid = Ext.create（'mypanel'，{
// store：store，
/ / // store：{
// // model：'User'，
// // remoteSort：true，
// // autoLoad：true，
// ////分拣机：[{
// //// property：'email'，
// //// direction：'ASC'
// ////} ，{
// // // property：'first'，
// //// direction：'DESC'
// ////}]，
// // proxy：{
// // type：'direct'，
// // directFn：CRUDSampleMethods2.read
// //}
// / /}，
//列：[{
// dataIndex：'email'，
// flex：1，
// text：'Email'
// }，{
// dataIndex：'first'，
// // align：'right'，
// width：120，
// text：'First'
// // renderer：Ext.util.Format.usMoney
//}]，
// height：350，
// width：600，
// title：'User Grid'，
// renderTo：Ext.getBody（）
//}）;
}）; // onready
解决方案事实上，您的读卡器配置被忽略。
阅读器是代理的配置选项，而不是存储...请注意，XGrid.js中的存储配置（配置了代理）是在XGrid_writer.js中完全替换。
要确认此诊断，您可以直接在您创建的DirectStore中设置读卡器配置（记录在案 here ）：
var store = Ext.create（'Ext.data.DirectStore'，{
...
// reader：reader，
totalProperty：'results'，
successProperty：'success'，
idProperty：'id'，
root：'data'，
...
}）;
然后，您可以搜索一种干净的方法。请注意，由于同样的原因，您的写入程序配置也被忽略。
I've eliminated all exceptions from this code. However, the data from my proxy isn't rendering in my Ext.grid.Panel widget. Below you will find the different components of the page as it renders. I did not include the server-side stack code for the Ext.Direct proxy.
HTML:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Ext Direct Grid Integration</title> <link rel="stylesheet" type="text/css" href="http://www.rasc.ch/extjs-4.1.3/resources/css/ext-all.css" /> <link rel="stylesheet" type="text/css" href="http://www.rasc.ch/extjs-4.1.3/examples/shared/example.css" /> <script src="http://www.rasc.ch/extjs-4.1.3/ext-all-dev.js"></script> <script type="text/javascript" src="../directProxy.ashx"></script> <script type="text/javascript" src="XGrid_writer.js"></script> <script type="text/javascript" src="XGrid.js"></script> <!--<script src="../api-debug.js?group=turnover"></script>--> <!--<script src="api-debug.js"></script>--> </head> <body> <h1>Ext Direct Grid Integration</h1> <p> Source code: <a href="XGrid.js">XGrid.js</a> </p> <div id="loading-mask" style=""></div> <div id="loading"> <div class="loading-indicator"><img src="../extjs/examples/shared/icons/fam/add.png" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>Ext Writer <br /><span id="loading-msg">Loading ...</span></div> </div> </body> </html>Proxy API Descriptor:
Ext.app.REMOTING_API = { "type": "remoting", "id": "1", "url": "../directRouter.ashx", "actions": { "CallTypes": [{ "name": "Echo", "len": 1, "formHandler": false }, { "name": "GetTime", "len": 0, "formHandler": false }, { "name": "UploadHttpRequestParam", "len": 1, "formHandler": true }, { "name": "UploadNamedParameter", "len": 1, "formHandler": true }, { "name": "SaveMethod", "len": 3, "formHandler": false }, { "name": "SaveMethod_Form", "len": 1, "formHandler": true }, { "name": "DateSample", "len": 2, "formHandler": false }], "TreeAction": [{ "name": "getChildNodes", "len": 2, "formHandler": false }], "CRUDSampleMethods": [{ "name": "create", "len": 1, "formHandler": false }, { "name": "read", "len": 1, "formHandler": false }, { "name": "update", "len": 2, "formHandler": false }, { "name": "destroy", "len": 1, "formHandler": false }, { "name": "reset", "len": 0, "formHandler": false }], "CRUDSampleMethods2": [{ "name": "create", "len": 1, "formHandler": false }, { "name": "read", "len": 1, "formHandler": false }, { "name": "update", "len": 2, "formHandler": false }, { "name": "destroy", "len": 1, "formHandler": false }, { "name": "reset", "len": 0, "formHandler": false }] } };Proxy data (aka Router rendered JSON):
[{ "type": "rpc", "name": null, "tid": 1, "action": "CRUDSampleMethods2", "method": "read", "result": { "success": true, "results": 3, "data": [{ "id": "1", "email": "email1@extjs.com", "first": "Martin", "last": "Späth" }, { "id": "2", "email": "email2@extjs.com", "first": "Heinz", "last": "Erhart" }, { "id": "3", "email": "email1@extjs.com", "first": "Albert", "last": "Einstein" }] }, "message": null, "where": null, "errorcode": 0 }]JavaScript code (XGrid.js):
Ext.require(['Ext.direct.*', 'Ext.data.*', 'Ext.grid.*', 'Ext.util.Format']); Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'email', 'first', 'last'] }); Ext.onReady(function () { Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); // create the Tree Ext.define('mypanel', { extend: 'Ext.grid.Panel', store: { model: 'User', remoteSort: true, autoLoad: true, // sorters: [{ // property: 'email', // direction: 'ASC' // }, { // property: 'first', // direction: 'DESC' // }], proxy: { type: 'direct', directFn: CRUDSampleMethods2.read } }, columns: [{ dataIndex: 'email', flex: 1, text: 'Email' }, { dataIndex: 'first', //align: 'right', width: 120, text: 'First' //renderer: Ext.util.Format.usMoney }], height: 350, width: 600, title: 'User Grid', renderTo: Ext.getBody() }); });JavaScript code (XGrid_writer.js):
Ext.onReady(function () { Ext.Direct.addProvider(Ext.app.REMOTING_API); Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'email', 'first', 'last'] }); // var reader = new Ext.data.JsonReader({ // ext 3 code // totalProperty: 'results', // successProperty: 'success', // idProperty: 'id', // root: 'data' // }, [{ // name: 'id' // }, { // name: 'email', // allowBlank: false // }, { // name: 'first', // allowBlank: false // }, { // name: 'last', // allowBlank: false // }] // ); var reader = Ext.create('Ext.data.JsonReader', { // ext 4 code totalProperty: 'results', successProperty: 'success', idProperty: 'id', root: 'data' }); //var writer = new Ext.data.JsonWriter({ // convert from ext 3 to ext 4 var writer = Ext.create('Ext.data.JsonWriter', { returnJson: false, writeAllFields: true }); //var store = new Ext.data.DirectStore({ var store = Ext.create('Ext.data.DirectStore', { model: 'User', api: { read: CRUDSampleMethods2.read, create: CRUDSampleMethods2.create, update: CRUDSampleMethods2.update, destroy: CRUDSampleMethods2.destroy }, reader: reader, baseParams: { dummy: 'blubb' }, writer: writer, // <-- plug a DataWriter into the store just as you would a Reader paramsAsHash: true, batchSave: false, batch: false, prettyUrls: false, remoteSort: true, listeners: { load: function (result) { }, loadexception: function () { }, scope: this } }); // var myPageSize = 10; var userColumns = [{ header: "ID", width: 40, sortable: true, dataIndex: 'id' }, { header: "Email", width: 100, sortable: true, dataIndex: 'email' //editor: new Ext.form.TextField({}) }, { header: "First", width: 50, sortable: true, dataIndex: 'first' //editor: new Ext.form.TextField({}) }, { header: "Last", width: 50, sortable: true, dataIndex: 'last' //editor: new Ext.form.TextField({}) }]; Ext.onReady(function () { Ext.QuickTips.init(); // var userForm = new App.user.Form({ // renderTo: 'user-form', // listeners: { // create: function (fpanel, data) { // <-- custom "create" event defined in App.user.Form class // var rec = new userGrid.store.recordType(data); // userGrid.store.insert(0, rec); // } // } // }); // create user.Grid instance (@see UserGrid.js) var userGrid = Ext.create('mypanel', { renderTo: Ext.getBody(), store: store, columns: userColumns, //bbar: new Ext.PagingToolbar({ bbar: Ext.create('Ext.PagingToolbar', { store: store, // grid and PagingToolbar using same store displayInfo: true, pageSize: myPageSize, prependButtons: true, items: [ 'text 1' ] }), listeners: { rowclick: function (g, index, ev) { var rec = g.store.getAt(index); //userForm.loadRecord(rec); }, destroy: function () { //userForm.getForm().reset(); } } }); setTimeout(function () { Ext.get('loading').remove(); Ext.fly('loading-mask').fadeOut({ remove: true }); store.load({ params: { start: 0, // specify params for the first page load if using paging limit: myPageSize, foo: 'bar' } }); }, 250); }); }); // onreadyEDIT 1:
Response:
Beautified:
[{ "type": "rpc", "name": null, "tid": 1, "action": "CRUDSampleMethods2", "method": "read", "result": { "success": true, "results": 3, "data": [{ "id": "1", "email": "email1@extjs.com", "first": "Martin", "last": "Späth" }, { "id": "2", "email": "email2@extjs.com", "first": "Heinz", "last": "Erhart" }, { "id": "3", "email": "email1@extjs.com", "first": "Albert", "last": "Einstein" }] }, "message": null, "where": null, "errorcode": 0 }]EDIT 2:
var store = Ext.create('Ext.data.Store', { model: 'User', //fields: ['id', 'email', 'first', 'last'], proxy: { type: 'direct', directFn: CRUDSampleMethods2.read, reader: { root: 'data' } } });I had a store in the definition (Ext.define) and the instance (Ext.create) before. So now I just have a single instance of 'Ext.grid.Panel'. I no longer have XGrid.js. The code below is XGrid.html. Later on, I can create my definition within MVC, but at least this gets me started. The writer also doesn't function yet, so that's the next challenge.
Ext.require(['Ext.direct.*', 'Ext.data.*', 'Ext.grid.*', 'Ext.util.Format']); Ext.onReady(function () { Ext.Direct.addProvider(Ext.app.REMOTING_API); Ext.define('User', { extend: 'Ext.data.Model', fields: ['id', 'email', 'first', 'last'] }); // var reader = new Ext.data.JsonReader({ // totalProperty: 'results', // successProperty: 'success', // idProperty: 'id', // root: 'data' // }, [{ // name: 'id' // }, { // name: 'email', // allowBlank: false // }, { // name: 'first', // allowBlank: false // }, { // name: 'last', // allowBlank: false // }] // ); var reader = Ext.create('Ext.data.JsonReader', { totalProperty: 'results', successProperty: 'success', idProperty: 'id', root: 'data' //fields: [ // { // name: 'id' // }, { // name: 'email' // }, { // name: 'first' // }, { // name: 'last' // } // ] }); //var writer = new Ext.data.JsonWriter({ // convert from ext 3 to ext 4 var writer = Ext.create('Ext.data.JsonWriter', { returnJson: false, writeAllFields: true }); var store = Ext.create('Ext.data.Store', { model: 'User', //fields: ['id', 'email', 'first', 'last'], proxy: { type: 'direct', directFn: CRUDSampleMethods2.read, reader: { root: 'data' } } }); //var store = new Ext.data.DirectStore({ // var store = Ext.create('Ext.data.DirectStore', { // model: 'User', // api: { // read: CRUDSampleMethods2.read, // create: CRUDSampleMethods2.create, // update: CRUDSampleMethods2.update, // destroy: CRUDSampleMethods2.destroy // }, // //reader: reader, // baseParams: { // dummy: 'blubb' // }, // writer: writer, // <-- plug a DataWriter into the store just as you would a Reader // paramsAsHash: true, // batchSave: false, // batch: false, // prettyUrls: false, // remoteSort: true, // listeners: { // load: function (result) { }, // loadexception: function () { // }, // scope: this // } // }); // // var myPageSize = 10; var userColumns = [{ header: "ID", flex: 1, sortable: true, dataIndex: 'id' }, { header: "Email", flex: 1, sortable: true, dataIndex: 'email' //editor: new Ext.form.TextField({}) }, { header: "First", flex: 1, sortable: true, dataIndex: 'first' //editor: new Ext.form.TextField({}) }, { header: "Last", flex: 1, sortable: true, dataIndex: 'last' //editor: new Ext.form.TextField({}) }]; // Ext.onReady(function () { Ext.QuickTips.init(); // var userForm = new App.user.Form({ // renderTo: 'user-form', // listeners: { // create: function (fpanel, data) { // <-- custom "create" event defined in App.user.Form class // var rec = new userGrid.store.recordType(data); // userGrid.store.insert(0, rec); // } // } // }); // create user.Grid instance (@see UserGrid.js) var userGrid = Ext.create('Ext.grid.Panel', { title: 'user grid', renderTo: Ext.getBody(), height: 350, width: 600, remoteSort: false, // autoLoad: true, store: store, columns: userColumns, //bbar: new Ext.PagingToolbar({ bbar: Ext.create('Ext.PagingToolbar', { store: store, // grid and PagingToolbar using same store displayInfo: true, pageSize: myPageSize, prependButtons: true, items: [ 'text 1' ] }), listeners: { rowclick: function (g, index, ev) { var rec = g.store.getAt(index); //userForm.loadRecord(rec); }, destroy: function () { //userForm.getForm().reset(); } } }); setTimeout(function () { Ext.get('loading').remove(); Ext.fly('loading-mask').fadeOut({ remove: true }); store.load({ params: { start: 0, // specify params for the first page load if using paging limit: myPageSize, foo: 'bar' } }); }, 250); // }); // Ext.require(['Ext.direct.*', 'Ext.data.*', 'Ext.grid.*', 'Ext.util.Format']); // Ext.define('User', { // extend: 'Ext.data.Model', // fields: ['id', 'email', 'first', 'last'] // }); // Ext.direct.Manager.addProvider(Ext.app.REMOTING_API); // create the Tree // var userGrid = Ext.create('mypanel', { // store: store, // // store: { // // model: 'User', // // remoteSort: true, // // autoLoad: true, // //// sorters: [{ // //// property: 'email', // //// direction: 'ASC' // //// }, { // //// property: 'first', // //// direction: 'DESC' // //// }], // // proxy: { // // type: 'direct', // // directFn: CRUDSampleMethods2.read // // } // // }, // columns: [{ // dataIndex: 'email', // flex: 1, // text: 'Email' // }, { // dataIndex: 'first', // //align: 'right', // width: 120, // text: 'First' // //renderer: Ext.util.Format.usMoney // }], // height: 350, // width: 600, // title: 'User Grid', // renderTo: Ext.getBody() // }); }); // onready
解决方案In fact, your reader configuration is ignored.
readeris a config option of a proxy, not the store... Note that the store config in XGrid.js (where a proxy is configured) is completely replaced in XGrid_writer.js.To confirm this diagnostic, you can set your reader configuration directly in the DirectStore you create (as documented here):
var store = Ext.create('Ext.data.DirectStore', { ... // reader: reader, totalProperty: 'results', successProperty: 'success', idProperty: 'id', root: 'data', ... });Then, you can search for a way to do that cleanly. Notice that your writer configuration is also ignored, for the same reason.
这篇关于Ext.grid.Panel在Ext 4中不会从Ext.Direct代理存储中加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
