Search code examples
cssextjsmixinsextjs6

extjs6 theming guide - mixing not being recognized

I am following the ExtJS6 theming guide and creating my first mixin on a panel. I've created a theme in packages/local/my-classic-theme2/sass/var/panel/Panel.scss The panel is not being changed when I run and I am getting the following errors. in the panel.scss it says undeclared mixin.

sencha app watch error in pictureenter image description here

am I missing a step?

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

and I put this on the actual panel

ui: 'highlight',
frame: true,
Solution

  • Here is what I did:

    Created a new app with the following command

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

    cd MyTestApp

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

    Created the folder panel inside packages/local/my-classic-theme2/sass/src and created a file Panel.scss inside that folder.

    Edited that file and pasted your code as is: 

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

    Edited the classic/src/view/main/Main.js file and replaced the items block with this: 

    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'
        }]
    }]
}]

    And finally edited app.json and made sure my "theme" is pointing to my-classic-theme2

    Ran sencha app watch and went to http://localhost:1841

    My Users tab displayed the panel with red title like it should.

    highlight ui