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

Данный компонент позволяет динамически создавать menu для Ext.button.Button, в качестве источника данных он использует Ext.data.TreeStore. Он может использоваться для локализации или разрешать пользователям различные действия в зависимости от прав. При перезагрузке store компонент изменит структуру внутреннего меню. Я реализовал функцию простого фильтра, чтобы показать изменение состояния меню на лету.

Ext.define('app.ux.button.DynamicMenu', {
    extend: 'Ext.button.Button',

    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.createMenu();
        }
    },

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

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

    onStoreDataChanged: function () {
        console.log('datachanged');
        this.createMenu();
    },

    createMenu: function () {
        this.setLoading(false);
        var rootNode = this.getStore().getRoot();
        rootNode.menu = Ext.create('Ext.menu.Menu');
        this.setMenu(rootNode.menu);
        rootNode.eachChild(this.createMenuItem, this);
    },

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

            record.eachChild(this.createMenuItem, this);
        }
    },

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

    menuItemHandler: Ext.emptyFn
});

Fiddle:

1 комментарий

  1. А как здесь работает store? Где хранятся записи? Т.е. в данном варианте нужно использовать сторонний TreeStore и в this.store указывать его storeId?

Добавить комментарий

Ваш адрес email не будет опубликован.