Can not implement ExtJs 5 side navigation tabs from example

Question

Had anyone managed to embed this example locally?

When I try to do the same in my local project only right part of tabs are visible other left part is hidden. I use iconCls not glyph.

I think problem is that I couldn't compile this properly

@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
);

How to add this script inside extjs theme and compile? Maybe theme rebuild is nedeed?

I was having same issue. I just removed "ui: 'navigation'," line. and it worked. Try that way. — Yash Vekaria

Subrat Pattnaik Subrat Pattnaik · Accepted Answer · 2014-08-06T12:10:17

I am not an expert in ExtJS. I am learning ExtJS 5 to implement it in one of my projects. I am able to get the side navigation panel working under my setup. Steps:

Create an app using senchacmd (with app generate option).
Start the server with senchacmd watch command.

Create a view "NavigationTabs" in app/view/tab/ directory with name "NavigationTabs.js" and place the code below:

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"
  }]
});

Now, in the sass/src/view/tab/ directory create a file, named : NavigationTabs.scss and place your sass code (you specified in the question) in this file.

In your Main.js file, present in the app/view/main/ directory, include the following, in the items list:

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

Wait for the app and scss to compile (sencha-cmd watch command automatically compiles your code).
Refresh your app in browser and check if this works.

Hope, this will be useful.

NOTE: The above code is taken from ExtJS5 Kitchen Sink example.

Can not implement ExtJs 5 side navigation tabs from example

1 Answers