如何使用自定义scss重新编译ExtJs 5主题

1 回答

• 3

  我在这里找到了关于这个主题的详细答案/信息：http://www.sencha.com/products/extjs/up-and-running/themes-introduction

  这非常有帮助 .

  DETAILS: Basicaly，我想在本地尝试这个例子：http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#side-navigation-tabs

  所以，这些是要完成我所要求的事情：

  首先，您必须使用Sencha Cmd生成工作空间 . 在工作区中，可以选择带主题的ext lib和带有主题的应用程序 . -ext 选项意味着此命令将在工作区内下载extjs，这非常有用 .

  sencha generate workspace -ext my-workspace
  

  然后，您必须进入工作区并生成应用程序 . （ -sdk ext 这意味着extjs lib位于ext目录中 . 当你在app上构建应用程序或执行其他操作时，总是使用ExtJs lib）

  cd my-workspace
      sencha -sdk ext generate app ThemeDemoApp theme-demo-app
  

  我想为我的tabpanel添加自定义ui . 让我们在适当的目录中创建该tabpanel：

  cd theme-demo-app 
      vim app/view/main/TabPanel.js
  

  我使用vim但你可以使用任何文本编辑器 . 将此代码放入该文件中：

  Ext.define('ThemeDemoApp.view.main.TabPanel', {
      extend: 'Ext.tab.Panel',
      xtype: 'customtabpanel',
  
      ui: 'navigation',
      tabPosition: 'left',
      tabRotation: 0,
  
      tabBar: {
          border: false
      },
  
      items: [{
          title: 'Tab 1',
          html: 'text content'
      }, {
          title: 'Tab 2',
          html: 'text content'
      }, {
          title: 'Tab 3',
          html: 'text content'
      }]
  });
  

  现在我们必须在css中定义 ui:'navigation' . 为此，我们必须在同一目录中创建 TabPanel.scss 文件，因为类相对于 sass/src 目录中的app（ view/main ）：

  mkdir sass/src/view
  mkdir sass/src/view/main
  vim sass/src/view/main/TabPanel.scss
  

  并使用任何文本编辑器将saas脚本放入该文件中（我使用vim）：

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

  让我们使用我们的自定义tabpanel而不是 app/view/main/Main.js 中使用的默认tabpanel . 因此，该文件的代码必须如下所示：

  Ext.define('ThemeDemoApp.view.main.Main', {
      extend: 'Ext.container.Container',
      requires: ['ThemeDemoApp.view.main.TabPanel'],
      xtype: 'app-main',
  
      controller: 'main',
      viewModel: {
          type: 'main'
      },
  
      layout: {
          type: 'border'
      },
  
      items: [{
          xtype: 'panel',
          bind: {
              title: '{name}'
          },
          region: 'west',
          html: '<ul><li>This area is commonly used for navigation, for example, using a "tree" component.</li></ul>',
          width: 250,
          split: true,
          tbar: [{
              text: 'Button',
              handler: 'onClickButton'
          }]
      },{
          region: 'center',
          xtype: 'customtabpanel'
      }]
  });
  

  现在我们必须构建应用程序 . （将我们的新组件放入 requires 非常重要，否则sencha cmd会忽略我们到目前为止所做的:)）

  sencha app build
  

  并在本地运行app：

  sencha app watch
  

  最后打开这个并看到结果：Demo App

  回复于 2024-04-28T04:29:01+08:00