Создаем динамический Toolbar

В предыдущей статье мы создавали динамическое меню, в этой же мы создадим динамическую панель инструментов Ext.toolbar.Toolbar по аналогии.

Если вы собираетесь внедрять какие либо статичные компоненты в данную панель инструментов, вы должны сами подумать о механизме для поддержания определенного порядка.

PS: Кноки помечены флагом dynamicItem

Ext.define('app.ux.toolbar.Dynamic', {
    extend: 'Ext.toolbar.Toolbar',

    store: false,
    loadMessage: "Loading...",
    showTreeStoreLoading: true,

    initComponent: function () {
        this.initMenu();
        this.callParent();
    },

    initMenu: function () {
        this.getStore().on('beforeload', this.onStoreBeforeLoad, this);
        this.getStore().on('load', this.onStoreLoad, this);
        if (this.getStore().isLoaded()) {
            this.createDynamicItems();
        }
    },

    onStoreBeforeLoad: function () {
        this.removeDynamicItems();
        if (this.showTreeStoreLoading) {
            this.setLoading(this.loadMessage);
        }
    },

    onStoreLoad: function (store) {
        store.on('datachanged', this.onStoreDataChanged, this);
        this.createDynamicItems();
    },

    onStoreDataChanged: function () {
        this.createDynamicItems();
    },

    removeDynamicItems: function () {
        var dynamicItems = this.query('button[dynamicItem=true]');
        Ext.Array.each(dynamicItems, function (dynamicItem) {
            this.remove(dynamicItem);
        }, this);
        return this;
    },

    createDynamicItems: function () {
        this.setLoading(false);
        this.removeDynamicItems();
        var rootNode = this.getStore().getRoot();
        rootNode.eachChild(this.createToolbarButton, this);
    },

    createToolbarButton: function (record) {
        var button = Ext.create('Ext.button.Button', {
            text: record.get('text'),
            glyph: record.get('glyph'),
            record: record,
            dynamicItem: true,
            handler: this.menuItemHandler,
            scope: this
        });

        if (!record.isLeaf()) {
            var menu = Ext.create('Ext.menu.Menu');
            button.setMenu(menu);
            record.menu = menu;
            record.eachChild(this.createMenuItems, this);
        }
        this.add(button);
    },

    createMenuItems: function (record) {
        var menuItem = Ext.create('Ext.menu.Item', {
            text: record.get('text'),
            glyph: record.get('glyph'),
            record: record,
            handler: this.menuItemHandler,
            scope: this
        });
        if (record.isLeaf()) {
            record.parentNode.menu.add(menuItem);
        } else {
            var menu = Ext.create('Ext.menu.Menu');
                menuItem.setMenu(menu);
            record.menu = menu;
            record.item = menuItem;
            record.parentNode.menu.add(menuItem);
            record.eachChild(this.createMenuItems, this);
        }
    },

    getStore: function () {
        if (this.store.isStore) {
            return this.store;
        } else {
            return Ext.StoreManager.lookup(this.store);
        }
    },

    menuItemHandler: function(menuItem) {
        this.fireEvent('menuItemSelect', this, menuItem.record);
    }
});

Fiddle: