Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.08.2013, 11:40
Кандидат Javascript-наук
Отправить личное сообщение для assd18 Посмотреть профиль Найти все сообщения от assd18
 
Регистрация: 07.03.2012
Сообщений: 118

Создание активного меню
Здравствуйте. Начал изучать ExtJS. По доке создал грид+меню. Как можно навешать на меню ссылки (кликаем на grid выводится табличка, кликаем tabs получаем табы)?
Вот моя вьюха:

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',

    title : 'All Users',
    store: 'Users',
    columns: [
        {header: 'Name',  dataIndex: 'name'},
        {header: 'Email', dataIndex: 'email'}
    ],
    
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{          
          text: 'Table',
          handler: function () {
                alert('Show table');
            }        
          
        },{         
          text: 'Edit',
          handler: function () {
                alert('Show tabs');
            }
        }]    
      }]    
    
});
Ответить с цитированием
  #2 (permalink)  
Старый 15.08.2013, 19:29
Профессор
Отправить личное сообщение для siber-biber Посмотреть профиль Найти все сообщения от siber-biber
 
Регистрация: 07.08.2013
Сообщений: 214

У вас уже есть 2 обработчика кнопок вот и реализовывайте в них то что вам надо ..типа: прячем панель1, показывам панель2 и тд и тп...
Ответить с цитированием
  #3 (permalink)  
Старый 15.08.2013, 22:18
Профессор
Отправить личное сообщение для novikov Посмотреть профиль Найти все сообщения от novikov
 
Регистрация: 19.11.2012
Сообщений: 178

Вам нужно делать иначе. Вы сейчас поместили меню внутрь грида. Если по нажатию кнопки скроете гид, то меню с кнопками пропадёт вместе с ним. Лучше для грида и табов создать общий контейнер. Меню прикрепить к контейнеру. Как-то так:

Файл с определением контейнера:

Ext.define('AM.view.user.Container' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.mycontainer',

    layout: 'fit',

    items: [
        {
            xtype: 'userlist',
            title : 'All Users',
            hidden: false
        }, {
            xtype: 'mytabpanel',
            title : 'Tabs',
            hidden: true
        }
    ],

    dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{          
          text: 'Table',
          handler: function (button) {
                button.up('mycontainer').down('userlist').show();
                button.up('mycontainer').down('mytabpanel').hide();
          }        
          
        },{         
          text: 'Edit',
          handler: function (button) {
                button.up('mycontainer').down('userlist').hide();
                button.up('mycontainer').down('mytabpanel').show();
            }
        }]    
      }]
    
});


Файл с определением грида:

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',
    store: 'Users',
    columns: [
        {header: 'Name',  dataIndex: 'name'},
        {header: 'Email', dataIndex: 'email'}
    ]
    
});


Файл с определением табов:

Ext.define('AM.view.user.Tabs' ,{
    extend: 'Ext.tab.Panel',
    alias : 'widget.mytabpanel', // перед свими алиасами ставьте префикс, чтобы случайно имя не совпало с алиасом компонента библиотеки

    items: [
          // здесь подключаем компоненты внутри вкладок
   ]

});


Возможны и другие варианты компоновки.

Последний раз редактировалось novikov, 15.08.2013 в 22:27.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
анимация активного пункта меню rustleofstars Элементы интерфейса 0 27.04.2013 17:56
Подсветка выделенного элемента меню ajax-сайта crayday AJAX и COMET 0 11.05.2012 12:25
Оптимизация кода (создание горизонтального меню) IONEX jQuery 0 16.01.2012 05:07
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
Связь активного пункта меню с iframe dadada1916 Элементы интерфейса 2 13.12.2010 02:03