8

私はjsonファイルを持っていますが、その内容について何も知らないと思います。モデルはわかりません。ただし、json ファイルには、モデル、データ、およびグリッドに関するその他の情報が含まれています。この方法で列などを作成するにはどうすればよいですか?

4

3 に答える 3

9

Stackoverflow には、これとよく似た質問が散らばっています。私はそれらすべてに取り組みましたが、決定的な解決策は見つかりませんでした。ただし、提供された回答のほとんどは、私を正しい方向に向けてくれました。これらすべての提案をまとめて、他の人にこれを明確にするための最善の方法を教えてください。

モデル: (すべての JSON 応答に含まれる 2 つのフィールドのみを示します。引き続き上書きされます)

Ext.define('RTS.model.TestsModel', {
    extend: 'Ext.data.Model',
    alias: 'model.TestsModel',

    fields: [
        {
            name: 'poll_date'
        },
        {
            name: 'poller'
        }
    ]
});

店：

Ext.define('RTS.store.TestsStore', {
    extend: 'Ext.data.Store',
    alias: 'store.TestsStore',

    model: 'RTS.model.TestsModel',

    constructor: function(cfg) {
        var me = this;

        cfg = cfg || {};

        me.callParent([Ext.apply({
            autoLoad: false,
            proxy       : {
                type    : 'ajax',
                url     : 'tests.php',
                reader  : {
                    type    : 'json',
                    root    : 'tests',
                    successProperty : 'success'
                }
            },            
            storeId: 'tests-store'
        }, cfg)]);
    }
});

表示: (列は各 JSON 応答で定義されます)

Ext.define('RTS.view.TestsView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.TestsView',

    id: 'tests-view',
    title: 'Tests',
    emptyText: '',
    store: 'TestsStore',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            viewConfig: {

            },
            columns: [
            ]
        });

        me.callParent(arguments);
    }

});

コントローラー: (コントローラーは、JSON 応答に基づいてビューとモデルを強制的に変更するすべての作業を行います)。

Ext.define('RTS.controller.TestsController', {
    extend: 'Ext.app.Controller',
    alias: 'controller.TestsController',

    stores: [
        'TestsStore'
    ],
    models: [
        'TestsModel'
    ],
    views: [
        'TestsView'
    ],

    init: function(application) {

        // When store changes, trigger an event on grid
        // to be handled in 'this.control'.  

        // NOTE : Ext JS does not allow control of 
        // non-component events.

        // Ext JS 4.2 beta will allow the controller
        // to detect non-component changes and handle them
        var testsStore = this.getStore('TestsStore');
        testsStore.on("metachange", metaChanged, this);
        function metaChanged(store, meta) {
            var grid = Ext.ComponentQuery.query('TestsView')[0];
            grid.fireEvent('metaChanged', store, meta);
        };


        this.control({
            "TestsView": {
                metaChanged: this.handleStoreMetaChange
            }
        });
    },

    /**
     * Will update the model with the metaData and
     * will reconfigure the grid to use the
     * new model and columns.
     */
    handleStoreMetaChange: function(store, meta) {
        var testsGrids = Ext.ComponentQuery.query('TestsView')[0];
        testsGrids.reconfigure(store, meta.columns);
    }

});

JSON 応答: JSON 応答 には、「metaData」プロパティが含まれている必要があります。フィールドを表示するために通常定義される静的モデルとビューで行うのと同じように、フィールドを定義する必要があります。

{
    "success": true,
    "msg": "",
    "metaData": {
        "fields": [
            {
                "name": "poller"
            },
            {
                "name": "poll_date"
            },
            {
                "name": "PING",
                "type": "int"
            },
            {
                "name": "SNMP",
                "type": "int"
            },
            {
                "name": "TELNET",
                "type": "int"
            },
            {
                "name": "SSH",
                "type": "int"
            },
            {
                "name": "all_passed"
            }
        ],
        "columns": [
            {
                "dataIndex": "poller",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "Poller"
            },
            {
                "dataIndex": "poll_date",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "Poll Date"
            },
            {
                "dataIndex": "PING",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "PING",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "SNMP",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "SNMP",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "TELNET",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "TELNET",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "SSH",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "SSH",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "all_passed",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "All Passed",
                "renderer": "RenderFailedTests"
            }
        ]
    },
    "tests": [
        {
            "poller": "CHI",
            "poll_date": "2013-03-06",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "DAL",
            "poll_date": "2013-03-06",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "CHI",
            "poll_date": "2013-03-04",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "DAL",
            "poll_date": "2013-03-04",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "CHI",
            "poll_date": "2013-03-01",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        }
    ]
}
于 2013-03-07T21:31:39.480 に答える
2

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json -> レスポンス メタデータ セクション

グリッドでこれを追加することを忘れないでください。columns: [],次に、ストアの下にlisteners: { 'metachange': function(store, meta) { myGrid.reconfigure(store, meta.columns); } }、応答 json ファイルにフィールドと列を含むメタデータが含まれている必要があります。詳細については、ドキュメントのResponse MetaDataセクションを参照してください。

于 2012-06-14T08:29:31.067 に答える
1

実行時にグリッド定義を作成できます。reconfigureメソッドを見てください: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.Panel-method-reconfigure

于 2012-06-11T12:05:49.020 に答える