2016-06-07 109 views
0

我遵循ExtJS6主题指南并在面板上创建我的第一个mixin。 我在packages/local/my-classic-theme2/sass/var/panel/Panel.scss中创建了一个主题。 当我运行时面板未被更改,并且出现以下错误。在panel.scss中,它表示未声明的mixin。在画面enter image description hereextjs6主题指导 - 混音不被识别

煎茶应用中观看错误我错过了一步?

@include extjs-panel-ui(
$ui: 'highlight-framed', 
$ui-header-background-color: red, 
$ui-border-color: red, 
$ui-header-border-color: red, 
$ui-body-border-color: red, 
$ui-border-width: 5px, 
$ui-border-radius: 5px, 
$ui-header-color: white 

);

,我把这个实际的面板

ui: 'highlight', 
frame: true, 
+0

肯定做了些什么......面板标题变小了,但一切仍然是默认的蓝色。即使我说红色。有原因吗? (我把上面的mixin) – solarissf

回答

1

这里的是我做过什么:

创建一个新的应用程序使用下面的命令

sencha -sdk <path to ext 6.0.2> generate app -ext MyApp MyTestApp

cd MyTestApp

sencha generate theme --extend theme-classic my-classic-theme2

packages/local/my-classic-theme2/sass/src的内部创建了文件夹panel,并在该文件夹内创建了一个文件Panel.scss

编辑该文件并粘贴您的代码是:

@include extjs-panel-ui(
    $ui: 'highlight-framed', 
    $ui-header-background-color: red, 
    $ui-border-color: red, 
    $ui-header-border-color: red, 
    $ui-body-border-color: red, 
    $ui-border-width: 5px, 
    $ui-border-radius: 5px, 
    $ui-header-color: white 
); 

编辑的classic/src/view/main/Main.js文件,并替换的项目与此块:

items: [{ 
    title: 'Home', 
    iconCls: 'fa-home', 
    // The following grid shares a store with the classic version's grid as well! 
    items: [{ 
     xtype: 'mainlist' 
    }] 
}, { 
    title: 'Users', 
    iconCls: 'fa-user', 
    items : [{ 
     xtype: 'panel', 
     frame: true, 
     ui: 'highlight', 
     title: 'Testing my highlight panel', 
     items: [{ 
      xtype: 'textfield', 
      fieldLabel: 'Foo', 
      value: 'Bar' 
     }] 
    }] 
}] 

最后编辑app.json并确保我"theme"是指向my-classic-theme2

sencha app watch并去了http://localhost:1841

我的用户选项卡以红色标题显示面板。

highlight ui