Невозможно реализовать боковые навигационные вкладки ExtJs 5 из примера

Удалось ли кому-нибудь встроить этот пример локально? ?

Когда я пытаюсь сделать то же самое в моем локальном проекте, видна только правая часть вкладок, а другая левая часть скрыта. Я использую iconCls, а не глиф.

Думаю, проблема в том, что я не смог это правильно скомпилировать

@include extjs-tab-panel-ui(
    $ui: 'navigation',
    $ui-tab-background-color: transparent,
    $ui-tab-background-color-over: #505050,
    $ui-tab-background-color-active: #303030,
    $ui-tab-background-gradient: 'none',
    $ui-tab-background-gradient-over: 'none',
    $ui-tab-background-gradient-active: 'none',
    $ui-tab-color: #acacac,
    $ui-tab-color-over: #c4c4c4,
    $ui-tab-color-active: #fff,
    $ui-tab-glyph-color: #acacac,
    $ui-tab-glyph-color-over: #c4c4c4,
    $ui-tab-glyph-color-active: #fff,
    $ui-tab-glyph-opacity: 1,
    $ui-tab-border-radius: 0,
    $ui-tab-border-width: 0,
    $ui-tab-inner-border-width: 0,
    $ui-tab-padding: 24px,
    $ui-tab-margin: 0,
    $ui-tab-font-size: 15px,
    $ui-tab-font-size-over: 15px,
    $ui-tab-font-size-active: 15px,
    $ui-tab-line-height: 19px,
    $ui-tab-font-weight: bold,
    $ui-tab-font-weight-over: bold,
    $ui-tab-font-weight-active: bold,
    $ui-tab-icon-width: 24px,
    $ui-tab-icon-height: 24px,
    $ui-bar-background-color: #404040,
    $ui-bar-background-gradient: 'none',
    $ui-bar-padding: 0,
    $ui-strip-height: 0
);

Как добавить этот скрипт в тему extjs и скомпилировать? Может быть, нужна перестройка темы?


javascript navigation tabpanel extjs5
person Zango    schedule 14.06.2014    source источник
comment
У меня была такая же проблема. Я только что удалил ui: 'navigation', line. и это сработало. Попробуйте так.   -  person Yash Vekaria    schedule 12.01.2015

Ответы (1)


arrow_upward
2
arrow_downward

Я не эксперт в ExtJS. Я изучаю ExtJS 5, чтобы реализовать его в одном из моих проектов. Я могу заставить боковую панель навигации работать в моих настройках. Шаги:

  • Создайте приложение с помощью senchacmd (с опцией создания приложения).
  • Запустите сервер с помощью команды senchacmd watch.

  • Создайте представление «NavigationTabs» в каталоге app / view / tab / с именем «NavigationTabs.js» и поместите следующий код:

    Ext.define('MyProject.view.tab.NavigationTabs', {
  extend: 'Ext.tab.Panel',
  xtype: 'navigation-tabs',

  //<example>
  exampleTitle: 'Navigation Tabs',
  otherContent: [{
    type: 'Styles',
    path: 'sass/src/view/tab/NavigationTabs.scss'
  }],
  //</example>

  height: 400,
  width: 600,


  ui: 'navigation',
  tabPosition: 'left',
  tabRotation: 0,
  tabBar: {
    layout: {
        pack: 'center'
    },
    border: false
  },

  defaults: {
    iconAlign: 'top',
    bodyPadding: 15
  },

  items: [{
    title: 'Home',
    glyph: 72,
    html: "Some text"
  }, {
    title: 'Users',
    glyph: 117,
    html: "Some other text"
  }, {
    title: 'Groups',
    glyph: 85,
    html: "Some more text"
  }, {
    title: 'Settings',
    glyph: 42,
    html: "Extra text"
  }]
});

  • Теперь в каталоге sass / src / view / tab / создайте файл с именем: NavigationTabs.scss и поместите свой код sass (вы указали в вопросе) в этот файл.

  • В вашем файле Main.js, находящемся в каталоге app / view / main /, включите в список элементов следующее:

    items: [
{
  ...
  ...
},
{
  region: 'west',
  xtype: 'navigation-tabs',
  reference: 'navigation'
}],

  • Подождите, пока приложение и scss скомпилируются (команда sencha-cmd watch автоматически компилирует ваш код).

  • Обновите приложение в браузере и проверьте, работает ли оно.

Надеюсь, это будет полезно.

ПРИМЕЧАНИЕ. Приведенный выше код взят из примера кухонной мойки ExtJS5.

person Subrat Pattnaik    schedule 06.08.2014