Javascript 无法实现示例中的ExtJs 5侧导航选项卡

有人设法在本地嵌入了这个吗

当我尝试在本地项目中执行相同操作时，只有选项卡的右侧部分可见，而左侧部分隐藏。我使用iconCls而不是glyph

我想问题是我不能正确编译这个

@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选项卡面板ui( $ui:'导航'， $ui选项卡背景色：透明， $ui选项卡背景色覆盖：#505050， $ui选项卡背景色激活：#303030， $ui选项卡背景渐变：“无”， $ui选项卡背景渐变覆盖：“无”， $ui选项卡背景渐变处于活动状态：“无”， $ui选项卡颜色：#acacac， $ui选项卡颜色覆盖：#C4C4， $ui选项卡颜色处于活动状态：#fff， $ui选项卡图示符颜色：#acacac， $ui选项卡图示符颜色覆盖：#C4， $ui选项卡图示符颜色处于活动状态：#fff， $ui选项卡图示符不透明度：1， $ui选项卡边框半径：0， $ui选项卡边框宽度：0， $ui选项卡内边框宽度：0， $ui选项卡填充：24px， $ui页边距：0， $ui选项卡字体大小：15px， $ui选项卡字体大小超过：15px， $ui选项卡字体大小活动：15px， $ui选项卡行高：19px， $ui选项卡字体重量：粗体， $ui选项卡字体重量超过：粗体， $ui选项卡字体重量活动：粗体， $ui选项卡图标宽度：24px， $ui选项卡图标高度：24px， $ui栏背景色：#404040， $ui栏背景渐变：“无”， $ui栏填充：0， $ui条带高度：0 );

---

如何在extjs主题中添加此脚本并编译？也许主题重建是nedeed？

我不是ExtJS方面的专家。我正在学习extjs5，以便在我的一个项目中实现它。我能够让侧导航面板在我的设置下工作。步骤：

• 使用senchacmd（带有app generate选项）创建应用程序
• 使用senchacmd watch命令启动服务器
• 在app/view/tab/目录中创建名为“NavigationTabs.js”的视图“NavigationTabs”，并将代码放在下面：

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

• 等待应用程序和SCS编译（sencha cmd watch命令自动编译代码）

• 在浏览器中刷新您的应用程序并检查其是否有效

希望这会有用

---

注意：以上代码取自ExtJS5厨房水槽示例。

我也遇到了同样的问题。我刚刚删除了“ui:‘导航’，”行。它成功了。试着那样做。

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