ExtJS 6 Tutorial : Add slider navigation for modern toolkit

1. Генерируем стартовое приложение. 

Создаем папку с проектом, копируем туда framework (в папку ext) , переходим в папку и генерируем приложение

sencha -sdk ./ext generate app Slider ./

2.Построние мею

Приводим код файла /modern/src/view/main/Main.js к следующему виду:

Ext.define('Slider.view.main.Main', {
   extend: 'Ext.Container',
   xtype: 'app-main',
   controller: 'main',
   requires: [
      'Ext.Menu'
   ],
   layout: {
      type: 'card'
   },
   items: [
      {
         xtype: 'toolbar',
         docked: 'top',
         title: 'Слайдер меню',
         items: [
            {
               xtype: 'button',
               handler: function() {
                  if(Ext.Viewport.getMenus().left.isHidden()){
                     Ext.Viewport.showMenu('left');
                  } else {
                     Ext.Viewport.hideMenu('left');
                  }
               }
            }
         ]
   }]
});

Пока кнопка вызова меню не работает, т.к самого меню ещё нет. Добавим его создание и прикрепление к Viewport в событие initialize.

Ext.define('Slider.view.main.Main', {
   extend: 'Ext.Container',
   xtype: 'app-main',
   controller: 'main',
   requires: [
      'Ext.Menu'
   ],
   layout: {
      type: 'card'
   },
   items: [
      {
         xtype: 'toolbar',
         docked: 'top',
         title: 'Слайдер меню',
         items: [
            {
               xtype: 'button',
               handler: function() {
                  if(Ext.Viewport.getMenus().left.isHidden()){
                     Ext.Viewport.showMenu('left');
                  } else {
                     Ext.Viewport.hideMenu('left');
                  }
               }
            }
         ]
   }],
   initialize: function(){
      Ext.Viewport.setMenu(this.createMenu(),{
         side: 'left',
         reveal: true
      });
   },
   createMenu: function(){
      var menu = Ext.create('Ext.Menu', {
         width: 250,
         scrollable: 'vertical',
         items: [
            {
               xtype: 'button',
               text: 'Option 1',
            },{
               xtype: 'button',
               text: 'Option 2',
            }
         ]
      });
      return menu;
   }
});

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

  • AlissaJix сказал

    Зарабатывайте не выходя из дома большие деньги! Доступно для всех! 100% гарантия дохода! https://goo.gl/3zq9Df

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