Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.08.2011, 16:34
Tie Tie вне форума
Интересующийся
Отправить личное сообщение для Tie Посмотреть профиль Найти все сообщения от Tie
 
Регистрация: 15.12.2010
Сообщений: 11

Проблема с аккордионом и меню
Есть 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]
    });
});
Изображения:
Тип файла: jpg err.JPG (10.2 Кб, 18 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 31.08.2011, 09:57
Аспирант
Отправить личное сообщение для ilshat Посмотреть профиль Найти все сообщения от ilshat
 
Регистрация: 28.07.2008
Сообщений: 67

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/');
                            }
                        }
                    ]
                }
            ]
        });
Ответить с цитированием
  #3 (permalink)  
Старый 31.08.2011, 09:58
Аспирант
Отправить личное сообщение для ilshat Посмотреть профиль Найти все сообщения от ilshat
 
Регистрация: 28.07.2008
Сообщений: 67

добавь стиль для элементов с шириной 100% как в примере выше
Ответить с цитированием
  #4 (permalink)  
Старый 01.09.2011, 14:36
Tie Tie вне форума
Интересующийся
Отправить личное сообщение для Tie Посмотреть профиль Найти все сообщения от Tie
 
Регистрация: 15.12.2010
Сообщений: 11

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с меню акордеоном technokid Библиотеки/Тулкиты/Фреймворки 0 24.05.2011 15:15
Программа Sothink DHTML. Проблема с выпадающем меню в Opere и Мозила. wertor Javascript под браузер 1 27.01.2010 17:19
Проблема с меню для кнопки в Гриде progi2007 ExtJS 0 03.08.2009 14:16
Проблема с меню не корректно отображается в браузерах отличных от IE (т.е. FF Opera) 3xv Элементы интерфейса 2 16.04.2009 19:51
Проблема с меню 856 Общие вопросы Javascript 3 28.07.2008 14:29