Results 1 to 4 of 4

Thread: Undefined mixin - ExtJs 4.2

  1. #1
    Sencha User rabelanger's Avatar
    Join Date
    Jan 2010
    Vote Rating

    Default Undefined mixin - ExtJs 4.2


    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?


  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    What file (and dir) are you trying to use the mixin? There is an order to when directories are included.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2

    Think my support is good? Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2008
    Vote Rating


    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.


  4. #4
    Sencha Premium Member
    Join Date
    May 2013
    Vote Rating

    Default Thanks!


    Yes, that definitely helped.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts