应用错误收集

我想补充一点：

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

以ext-theme-crisp然后编译并获取自定义ext-all.css。我怎么能这样做？

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

非常有帮助。

的详细信息：的基本上，我想在本地尝试这个例子：http://dev.sencha.com/extjs/5.0.0/examples/kitchensink/#side-navigation-tabs

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

首先，您必须使用Sencha Cmd生成工作区。在工作区中，可以选择主题和您的应用程序+主题。 -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：＆＃39;导航＆＃39; 。为此，我们必须在 sass / src 目录中相对于app（ view / main ）的相同目录中创建 TabPanel.scss 文件：


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

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

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

现在我们必须构建应用程序。（将我们的新组件放入要求非常重要，否则sencha cmd将忽略我们迄今为止所做的工作:)）


sencha app build

在本地运行app：


sencha app watch

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

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

1 个答案: