1. #1
    Sencha User rabelanger's Avatar
    Join Date
    Jan 2010
    Location
    Montreal
    Posts
    15
    Vote Rating
    1
    rabelanger is on a distinguished road

      1  

    Default Undefined mixin - ExtJs 4.2

    Undefined mixin - ExtJs 4.2


    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 :

    Code:
    @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
    rafael

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What file (and dir) are you trying to use the mixin? There is an order to when directories are included.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    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
    Posts
    9
    Vote Rating
    3
    jpeckham is on a distinguished road

      2  

    Default


    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:

    Code:
    xtype: 'widget.button',
            ui: 'orange-small'
    Sencha Cmd 3.1 way:

    Code:
    xtype: 'button',
            ui: 'orange'
    Hope that helps.

    -James

  4. #4
    Sencha Premium Member
    Join Date
    May 2013
    Posts
    11
    Vote Rating
    0
    colingaj is on a distinguished road

      0  

    Default Thanks!

    Thanks!


    @jpeckham

    Yes, that definitely helped.