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);
});
}); // onready
EDIT 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
https://stackoverflow.com/questions/17917316
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian