0

有没有人设法在本地嵌入这个例子？

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

我认为问题是我无法正确编译它

@include extjs-tab-panel-ui(
    $ui: '导航',
    $ui-tab-background-color: 透明,
    $ui-tab-background-color-over: #505050,
    $ui-tab-background-color-active: #303030,
    $ui-tab-background-gradient: '无',
    $ui-tab-background-gradient-over: '无',
    $ui-tab-background-gradient-active: '无',
    $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: 粗体,
    $ui-tab-font-weight-over: 粗体,
    $ui-tab-font-weight-active：粗体，
    $ui-tab-icon-width: 24px,
    $ui-tab-icon-height: 24px,
    $ui-bar-background-color: #404040,
    $ui-bar-background-gradient: '无',
    $ui-bar-padding: 0,
    $ui-strip-height: 0
);

如何在 extjs 主题中添加这个脚本并编译？也许需要重建主题？

4

1 回答 1

2

我不是 ExtJS 方面的专家。我正在学习 ExtJS 5 以在我的一个项目中实现它。我可以让侧面导航面板在我的设置下工作。脚步：

  • 使用 senchacmd 创建一个应用程序（带有应用程序生成选项）。
  • 使用 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"
  }]
});

  • 现在，在 sass/src/view/tab/ 目录中创建一个名为： NavigationTabs.scss 的文件，并将您的 sass 代码（您在问题中指定）放在此文件中。

  • 在 app/view/main/ 目录中的 Main.js 文件中，在项目列表中包含以下内容：

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

  • 等待应用和 scss 编译（sencha-cmd watch 命令会自动编译你的代码）。

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

希望，这将是有用的。

注意：以上代码取自 ExtJS5 Kitchen Sink 示例。

于 2014-08-06T12:10:17.047 回答