Ext 4 中的 Ext.grid.Panel 未从 Ext.Direct 代理存储加载数据 [英] Ext.grid.Panel in Ext 4 not loading data from Ext.Direct proxy store
本文介绍了Ext 4 中的 Ext.grid.Panel 未从 Ext.Direct 代理存储加载数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经消除了这段代码中的所有异常.但是，来自我的代理的数据没有呈现在我的 Ext.grid.Panel 小部件中.您将在下面找到页面呈现时的不同组件.我没有包含 Ext.Direct 代理的服务器端堆栈代码.
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>
代理 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": 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
}]
}
};
代理数据(又名路由器渲染的 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 代码 (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 代码 (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);
});
}); // onready
编辑 1:
回应:
美化:
[{
"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
}]
编辑 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 中创建我的定义，但至少这让我开始了.编写器还没有运行，所以这是下一个挑战.
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
推荐答案
其实你的阅读器配置被忽略了.阅读器 是 proxy 的配置选项，而不是 store... 请注意，XGrid.js(其中配置了代理)中的 store 配置在 XGrid_writer.js 中完全替换.
In fact, your reader configuration is ignored. reader is 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.
要确认此诊断，您可以直接在您创建的 DirectStore 中设置您的阅读器配置(如 这里):
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 4 中的 Ext.grid.Panel 未从 Ext.Direct 代理存储加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
