88029

Ext.grid.Panel in Ext 4 not loading data from Ext.Direct proxy store

Question:

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.

<strong>HTML:</strong>

<!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>

Ext Direct Grid Integration

Source code: <a href="XGrid.js">XGrid.js</a>

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

<strong>Proxy API Descriptor:</strong>

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 }] } };

<strong>Proxy data (aka Router rendered JSON):</strong>

[{ "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 }]

<strong>JavaScript code (XGrid.js):</strong>

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() }); });

<strong>JavaScript code (XGrid_writer.js):</strong>

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

<strong>EDIT 1:</strong>

<strong>Response:</strong>

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/TzL0V.jpg" data-original="https://i.stack.imgur.com/TzL0V.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

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 }]

<strong>EDIT 2:</strong>

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

Answer1:

In fact, your reader configuration is ignored. <a href="http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.proxy.Proxy-cfg-reader" rel="nofollow">reader</a> is a config option of a <strong>proxy</strong>, 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 <a href="http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.data.DirectStore" rel="nofollow">here</a>):

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.

Recommend

  • WPF Designer exception while trying to edit UI in Visual studio 2008
  • Can not connect slave to master
  • Spring AOP ignores some methods of Hessian Service
  • Example for subscribing for BLE indicate in android
  • Erlang raise number of opened sockets, MacOS and CentOs
  • Number of ways to partition a number in Python
  • pythonic way to find all potential longest sequence
  • Simple Injector fails if using verify before setting dependency resolver for MVC 4
  • How to only store 3 values for a key in a dictionary? Python
  • Reshape array on xAxis and fill with mean value in Python?
  • WCF service runs in Debug mode but not in Release
  • Deployments not visible in Kubernetes Dashboard
  • How can I count unique terms in a plaintext file case-insensitively?
  • Programmatically Update Linked Named Range of excel object in MS Word (2007)
  • Want to save selected (i.e., more than 1) enums as string with NHibernate
  • How do I check if System::Collections:ArrayList is empty / nullptr / null?
  • Send emails through VB6 if no email client
  • How to use animated gif in Firemonkey?
  • Angular - routerLinkActive and queryParams handling
  • Is it possible to get the word under the mouse cursor in a ``?
  • converter json to two dimensional array
  • Best way to dynamically load an xml configuration file into a Flex4/Flash movie at runtime?
  • Remove final comma from string in vb.net
  • copying resource to sdcard gives a damaged file in android
  • JQuery Internet Explorer and ajaxstop
  • How to attach a node.js readable stream to a Sendgrid email?
  • How to delay loading a property with linq to sql external mapping?
  • Cannot connect to cassandra from Spark
  • Insert into database using onclick function
  • req.body is undefined - nodejs
  • jQuery show() function is not executed in Safari if submit handler returns true
  • Symfony2: How to get request parameter
  • Hazelcast - OperationTimeoutException
  • Web-crawler for facebook in python
  • Akka Routing: Reply's send to router ends up as dead letters
  • 0x202A in filename: Why?
  • RestKit - RKRequestDelegate does not exist
  • Is there a mandatory requirement to switch app.yaml?
  • Revoking OAuth Access Token Results in 404 Not Found
  • Free memory of cv::Mat loaded using FileStorage API