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

1
votes

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": "[email protected]",
            "first": "Martin",
            "last": "Späth"
        }, {
            "id": "2",
            "email": "[email protected]",
            "first": "Heinz",
            "last": "Erhart"
        }, {
            "id": "3",
            "email": "[email protected]",
            "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:

enter image description here

Beautified:

[{
    "type": "rpc",
    "name": null,
    "tid": 1,
    "action": "CRUDSampleMethods2",
    "method": "read",
    "result": {
        "success": true,
        "results": 3,
        "data": [{
            "id": "1",
            "email": "[email protected]",
            "first": "Martin",
            "last": "Späth"
        }, {
            "id": "2",
            "email": "[email protected]",
            "first": "Heinz",
            "last": "Erhart"
        }, {
            "id": "3",
            "email": "[email protected]",
            "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
1
extjsgridextjs4renderingext-direct
Can you see the correct HTTP request leave the browser and come back with the expected JSON payload? – rixo
What workflow would I perform to see this? (I can troubleshoot in either Mozilla Firefox or Google Chrome) – MacGyver
Just by looking in the network tab of your dev tools. You can put a js breakpoint on the store.load line, and clear all the requests when you get there before letting the execution go on. That will make it easier to find the relevant request. – rixo
@rixo I cleared the Network panel in Chrome when I hit the store.load JavaScript breakpoint line of code. After that, 4 gif files loaded and the directRouter.ashx loaded, with the same response you see in my EDIT (seen with Mozilla Firefox). Hopefully I followed your instructions okay? – MacGyver
That's it. So that's not a client-server communication issue. The problem is probably in the reader. – rixo

1 Answers

1
votes

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.

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.