ExtJS создает элементы динамически на основе элементов магазина

Question

Можно ли создать некоторые другие элементы, кроме Ext.panel.Grid, используя store свойство?

Например.Допустим, у меня есть панель:

Ext.create('Ext.panel.Panel', {

layout: 'vbox',
scrollable: true,
items: [
    myItemsFunction()
]
}));

И из бэкэнда я получаю такой ответ:

{
    "rows": [
    {
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "de.txt",
        "id": "1"
    },
    {
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "en.txt",
        "id": "2"
    },
    {
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "it.txt",
        "id": "3"
    }]
}

, который я загружаю в магазине:

var store_documents = Ext.create('Ext.data.Store', {
    remoteSort: true,
    remoteFilter: true,
    proxy: {
        type: 'ajax',
        api: {
            read: baseURL + '&SubFunc=Documents&Action=view',
        },
        reader: { type: 'json', rootProperty: 'rows', totalProperty: 'total' }
    },
    autoLoad: true
});

Теперь допустим, что я хочу иметь кнопки загрузки для этих трех файлов (de.txt, en.txt, it.txt).Как я могу создать их динамически на основе элементов магазина?Я хочу поместить его в этот myItemsFunction() и показать его в элементах панели (первый блок примера кода)?

Или магазин можно связать только с сеткой?

Answer 1

Определите контроллер для вашей панели;

создайте функцию события для последующего вывода;

внутри него, загрузите ваш магазин;

передайте параметр обратного вызова в загрузку вашего магазинафункция, в которой вы перебираете загруженные данные, создавая компоненты кнопок;

вызывайте this.getView().add(button), чтобы добавить свои кнопки на панель items attribute

Answer 2

Вы можете использовать хранилище ExtJs без привязки его к сетке, потому что Ext.data.Store имеет прокси, который действует как запрос ajax при вызове store.load ().

Так что вы можете найти это работающимпример ExtJs Fiddle основная идея состоит в том, чтобы определить новый класс панели и использовать функцию initComponent (), чтобы позволить вам создавать динамические элементы на основе данных, полученных из запроса

app.js

Ext.application({
    name: 'Fiddle',
    launch: function () {
        var storeData = {};
        let store = Ext.create('Ext.data.Store', {
            storeId: 'myStoreId',
            fields: ['id', 'name'],
            proxy: {
                type: 'ajax',
                url: 'app/data.json',
                reader: {
                    type: 'json',
                    rootProperty: 'rows'
                }
            }
        });
        store.load(function(){
            storeData = this.getData().items;
            Ext.create('Fiddle.MyPanel',{panelData:storeData});
        });
    }
});

app / MyPanel.js

Ext.define('Fiddle.MyPanel', {
    extend: 'Ext.panel.Panel',
    renderTo: Ext.getBody(),
    title: 'Dynamic button creation',
    width: 600,
    height: 300,
    initComponent: function () {
        let panelItems = [];
        //Creating items dynamicly
        for (btn in this.panelData) {
            let me = this;
            panelItems.push(
                Ext.create('Ext.button.Button', {
                    text:me.panelData[btn].data.Name
                })
            );
        }
        this.items = panelItems;
        //must call this.callParent()
        this.callParent();
    }
})

app / data.json

{
    "rows": [
    {
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "de.txt",
        "id": "1"
    },
    {
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "en.txt",
        "id": "2"
    },
    {
        "CreateDateTime": "2015-02-09 14:05:46",
        "Name": "it.txt",
        "id": "3"
    }]
}