1

我已经消除了这段代码中的所有异常。但是，来自我的代理的数据没有呈现在我的 Ext.grid.Panel 小部件中。您将在下面找到页面呈现时的不同组件。我没有包含 Ext.Direct 代理的服务器端堆栈代码。

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 中创建我的定义，但至少这让我开始了。编写器还没有运行，所以这是下一个挑战。

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
4

1 回答 1

1

实际上，您的阅读器配置被忽略了。reader是代理的配置选项，而不是商店...请注意，XGrid.js 中的商店配置（配置了代理）在 XGrid_writer.js 中完全替换。

要确认此诊断，您可以直接在您创建的 DirectStore 中设置您的阅读器配置（如此处所述）：

var store = Ext.create('Ext.data.DirectStore', {
    ...

    // reader: reader,
    totalProperty: 'results',
    successProperty: 'success',
    idProperty: 'id',
    root: 'data',

    ...     
});

然后，您可以寻找一种干净利落的方法。请注意，出于同样的原因，您的编写器配置也会被忽略。

于 2013-07-29T07:32:23.700 回答