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

1 回答

• 2

  我不是ExtJS的专家 . 我正在学习ExtJS 5以在我的一个项目中实现它 . 我能够在我的设置下使用侧面导航面板 . 脚步：

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

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

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

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

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

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

  希望，这将是有用的 .

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

  回复于 2024-05-02T08:40:26+08:00