Javascript-форум (https://javascript.ru/forum/)
-   ExtJS (https://javascript.ru/forum/extjs/)
-   -   Проблема с аккордионом и меню (https://javascript.ru/forum/extjs/21111-problema-s-akkordionom-i-menyu.html)

Tie 29.08.2011 16:34

Проблема с аккордионом и меню
 
Вложений: 1
Есть viewport, west регион которого отдан под меню. Регион имеет layout: 'accordion'. Items этого аккордиона - меню (xtype: 'menu'). Проблема в том, что кнопки этого меню ни в какую не хотят полностью по горизонтали заполнять пространство левой панели (картинка прилагается). Более того, хочется, чтобы кнопка занимала все пространство при любых изменениях ширины west панели. Что посоветуете?

Код:
Ext.onReady(function(){
    var sysTabs = Ext.create('Ext.panel.Panel',{
        id: 'sysTabs',
        region: 'center',
        margins:'3 3 3 0',
        enableTabScroll:true,
        activeTab: 0,
        defaults:{autoScroll:true}
    });

    var nav = Ext.create('Ext.panel.Panel',{
        iconCls: 'icon-plugin',
        layout:'accordion',
        title: 'Меню',
        region: 'west',
        width: 200,
        collapsible: true,
        split:true,
        margins:'3 0 3 3',
        cmargins:'3 3 3 3',
        items: [{
            title: "Пункт меню 1",
            xtype: "menu",
            plain: true,
            floating: false,
            items: [
            {
                text: "Пункт меню 1.1",
                iconCls: "icon-application_osx_terminal",
                handler: function() {
                    alert('Тут написано: Пункт меню 1.1 \nГото урл: /test/');
                }
            },
            {
                text: "Пункт меню 1.2",
                iconCls: "icon-xhtml_valid",
                handler: function() {
                    alert('Тут написано: Пункт меню 1.2 \nГото урл: /test/');
                }
            },
            {
                text: "Пункт меню 1.3",
                iconCls: "icon-xhtml_valid",
                handler: function() {
                    alert('Тут написано: Пункт меню 1.3 \nГото урл: /test/');
                }
            }]
        },{
            title: "Пункт меню 2",
            xtype: "menu",
            plain: true,
            floating: false,
            items: [
            {
                text: "Пункт меню 2.1",
                iconCls: "icon-xhtml_valid",
                handler: function() {
                    alert('Тут написано: Пункт меню 2.1 \nГото урл: /test/');
                }
            },
            {
                text: "Пункт меню 2.2",
                iconCls: "icon-xhtml_valid",
                handler: function() {
                    alert('Тут написано: Пункт меню 2.2 \nГото урл: /test/');
                }
            }]
        }]
    });

    var topPanel = Ext.create('Ext.panel.Panel',{
        height: 30,
        region: 'north',
        border: false,
        layout: 'hbox',
        layoutConfig: {
            align : 'middle',
            pack: 'end'
        }
    });

    var viewport = Ext.create('Ext.container.Viewport',{
        layout: 'border',
        items: [topPanel, nav, sysTabs]
    });
});

ilshat 31.08.2011 09:57

var nav = Ext.create('Ext.panel.Panel', {
            iconCls: 'icon-plugin',
            layout:'accordion',
            title: 'Меню',
            region: 'west',
            width: 200,
            collapsible: true,
            split:true,
            margins:'3 0 3 3',
            cmargins:'3 3 3 3',
            items: [
                {
                    title: "Пункт меню 1",
                    xtype: "menu",
                    plain: true,
                    floating: false,
                    defaults: {
                        style: {
                            width: '100%'
                        }
                    },
                    items: [
                        {

                            text: "Пункт меню 1.1",
                            iconCls: "icon-application_osx_terminal",
                            handler: function() {
                                alert('Тут написано: Пункт меню 1.1 \nГото урл: /test/');
                            }
                        },
                        {
                            text: "Пункт меню 1.2",
                            iconCls: "icon-xhtml_valid",
                            handler: function() {
                                alert('Тут написано: Пункт меню 1.2 \nГото урл: /test/');
                            }
                        },
                        {
                            text: "Пункт меню 1.3",
                            iconCls: "icon-xhtml_valid",
                            handler: function() {
                                alert('Тут написано: Пункт меню 1.3 \nГото урл: /test/');
                            }
                        }
                    ]
                },
                {
                    title: "Пункт меню 2",
                    xtype: "menu",
                    plain: true,
                    floating: false,
                    defaults: {
                        style: {
                            width: '100%'
                        }
                    },
                    items: [
                        {
                            text: "Пункт меню 2.1",
                            iconCls: "icon-xhtml_valid",
                            handler: function() {
                                alert('Тут написано: Пункт меню 2.1 \nГото урл: /test/');
                            }
                        },
                        {
                            text: "Пункт меню 2.2",
                            iconCls: "icon-xhtml_valid",
                            handler: function() {
                                alert('Тут написано: Пункт меню 2.2 \nГото урл: /test/');
                            }
                        }
                    ]
                }
            ]
        });

ilshat 31.08.2011 09:58

добавь стиль для элементов с шириной 100% как в примере выше

Tie 01.09.2011 14:36

Спасибо огромное!
Width в defaults пробовали, но без style. Теперь ясно, что и как.


Часовой пояс GMT +3, время: 10:46.