動態創建網格EXTJS

Question

我想知道是否可以動態創建網格視圖。 我會盡力解釋...

我目前有一個數據庫表，該表具有不同的區域，我圍繞此表創建了一個網格，您可以在該網格中添加新條目，然后將其添加到表中。

我還有一個用於聯系人的數據庫表，其中包含姓名，電話號碼，並使用所有區域作為下拉列表。 同樣，您可以通過網格在此表中添加新條目。

最后，我有第三個網格，顯示了所有聯系人，並按他們的區域划分。 我遇到的問題是如何使它動態化？ 目前，我已經對區域標題進行了硬編碼，並填充了一個可以正確過濾的網格，但是如果有人完全添加了一個新區域怎么辦？ 如何為新添加的區域創建具有適當過濾器的標題和網格？

第三格代碼：

Ext.define('myproject.example', {
    extend: 'Ext.form.Panel',
    alias: 'widget.********',

    requires: [
        'store.exampleStore'
    ],
    modal: true,
    draggable: true,
    header: {
        title: 'Technical Advisors Contact Information',
        height: 55,
        items: [{
            xtype: 'button',
            text: 'X',
            listeners: { click: 'onModalX' }
        }]
    },
    scrollable: true,
    align: 'center',
    floating: true,
    width: 1500,
    height: 800,

    items: [{
        xtype: 'grid',
        title: 'Region: ME',
        scrollable: true,
        collapsible: true,
        store: { type: 'exampleStore', filters: [{ property: 'Region', value: 'ME' }, { property: 'Active', value: 'true' }] },
        columns: [{
            text: 'Contact',
            dataIndex: 'ContactName',
            sortable: true,
            flex: 2
        }, {
            text: 'Office #',
            dataIndex: 'Office',
            sortable: true,
            flex: 1
        }, {
            text: 'Home #',
            dataIndex: 'Home',
            sortable: true,
            flex: 1
        }, {
            text: 'Pager #',
            dataIndex: 'Pager',
            sortable: true,
            flex: 1
        }, {
            text: 'Cellular #',
            dataIndex: 'Cellular',
            sortable: true,
            flex: 1
        }, {
            text: 'Area',
            dataIndex: 'Region',
            sortable: true,
            flex: 3
        }] //continues...

Answer 1

首先，您需要在客戶端（在瀏覽器中）獲取數據。 這可以通過ajax請求（jsonp，ext.direct，rest等）來完成。

然后，您可以將數據加載到商店中：

grid.store.loadData(result.data);

您可以手動執行此操作，也可以閱讀有關extjs中的代理的信息。 最簡單的啟動方法是rest-proxy 。