[sergeyv]

Здравствуйте,

Совсем недолго изучаю Javascript и в частности ExtJS и что-то у меня случился затык с тем, как загрузить контент в центральный фрейм по клику из меню tree.Panel.

Код TreeStore:

Ext.define('CM.store.MenuTreeStore', {
    extend: 'Ext.data.TreeStore',
    root: {
        expanded: true,
        children: [
            {
                // General section
                text: 'General',
                leaf: false,
                expanded: true,
                children: [
                    {
                        text: 'Partners',
                        leaf: true,
                        icon: 'images/group.png',
                        id: 'partnerslist'
                    },
                    {
                        text: 'Users',
                        leaf: true,
                        id: 'userslist'
                    }
                ]
            },
            {
                // Expenses
                text: 'Expenses',
                leaf: false,
                expanded: true,
                children: [
                    {
                        text: 'Serviss',
                        leaf: true,
                        id: 'servisslist'
                    }
                ]
            }
        ]
    }
});

Код навигации:

Ext.define('CM.view.Navigation', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.appnavigation',
    width: 200,
    title: 'Menu',
    collapsible: true,
    collapseDirection: 'left',
    titleCollapse: true,
    store: 'MenuTreeStore',
    renderTo: Ext.getBody(),
    rootVisible: false,
    listeners:{
        itemclick: function(view,record) {
            if(record.isLeaf()) {
                console.log(record.data.id);
            } else if(record.isExpanded()) {
                record.collapse();
            } else {
                record.expand();
            }
        }
    }
});

Есть набор форм, примерно вот такого вида, которые предназначены для сбора разного рода данных, которые надо выводить в центральный фрейм border layout при клике в меню.

Ext.define('CM.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    xtype: 'userslist',
    allowDeselect: true,
    columnLines: true,
    forceFit: true,
    title: 'All Users',
    store: 'Users',

    initComponent: function () {

        this.tbar = [{
            text: 'Add User', action: 'create', icon: '/images/add.png'
        }];
        this.columns = [
            { header: 'Name', dataIndex: 'name', flex: 1 },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone', flex: 1 }
        ];
        this.addEvents('removeitem');
        this.actions = {
            removeitem: Ext.create('Ext.Action', {
                text: 'Remove User',
                handler: function () { this.fireEvent('removeitem', this.getSelected()) },
                scope: this
            })
        };
        var contextMenu = Ext.create('Ext.menu.Menu', {
            items: [
                this.actions.removeitem
            ]
        });
        this.on({
            itemcontextmenu: function (view, rec, node, index, e) {
                e.stopEvent();
                contextMenu.showAt(e.getXY());
                return false;
            }
        });
        this.callParent(arguments);
    },
    getSelected: function () {
        var sm = this.getSelectionModel();
        var rs = sm.getSelection();
        if (rs.length) {
            return rs[0];
        }
        return null;
    }
});

По клику в меню, я добился того, что у меня в консоли отображается id leof-ов из MenuTreeStore, только что с ним дальше делать, пока не понимаю. Может кто из гуру подтолкнёт меня в нужном направлении? Желательно реальным примером.

Заранее спасибо!

P.S. в качестве серверной части у меня RoR 4.0

С уважением,
Сергей