Undefined mixin - ExtJs 4.2

[rabelanger]

Hi,

I have an app that I just upgraded to 4.2 from 4.1.2. I'm using the sandbox version because we still haven't fully migrated everything to Ext 4 yet.

I managed to create my new theme following the guide from the docs, I split all my scss files to be class oriented like suggested (creating a folder with the app's namespace name). My theme extends the ext-theme-classic-sandbox theme. Changed a few vars in the /var/Component.scss. Moved all my sass for each file matching the classe's name. Compiling works sort of, only issue I had is that I had to import each sass file I added that matched my classes (figured it would pick them up automatically). Everything compiles and I get the expected results.

The real issue im having is that I can't use any mixins. When I do something like this :

@include extjs-panel-ui(
    $ui-label: '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
);

I get an error : Undefined mixin 'extjs-panel-ui'. None of the mixins are working. Anyone had a similar issue or has a idea what might be causing this problem?

I know I use to have to include ext4/default/all, which isn't required anymore.. is there an alternative to this or everything gets included from the parent theme?

Thanks,
rafael

[mitchellsimoens]

What file (and dir) are you trying to use the mixin? There is an order to when directories are included.

[jpeckham]

I ran into the same myself and realized I didn't read the documentation carefully. The variables go in the "var" folder, but mixins go in the "src" folder, following the same directory structure.

In your case, you should put your mixin in "src/panel/Panel.scss" file. Variables related to all panels go in the "var/panel/Panel.scss" file.

You'll also need to put it in the manifest.js file so it knows to render it for slicing, which if you are building the theme in the packages folder, you should create in the "example" folder and double check that the theme.html has reference to it (I think it does by default).

Also note, if you are bringing code from Sencha Cmd 3.0, buttons in the manifest file have changed to not require the size. I was getting an error saying: Manifest contains conflicting slices (--tolerate not set) - I just had to take the size part out and it worked fine:

Sencha Cmd 3.0 way:

xtype: 'widget.button',
        ui: 'orange-small'

Sencha Cmd 3.1 way:

xtype: 'button',
        ui: 'orange'

Hope that helps.

-James

[colingaj]

@jpeckham

Yes, that definitely helped.