Ext.grid.Panel in Ext 4 not loading data from Ext.

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:

enter image description here

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

标签： Extjs grid extjs4 rendering ext-direct

1条回答

不美不萌又怎样

2楼-- · 2019-06-06 18:25

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.

0人赞添加讨论(0) 举报

Ext.grid.Panel in Ext 4 not loading data from Ext.

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间