2 May 2013 12:31 PM #1
Undefined mixin - ExtJs 4.2
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 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?
6 May 2013 7:53 AM #2
- Join Date
- Mar 2007
- St. Louis, MO
- Vote Rating
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
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 email@example.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.
8 May 2013 5:29 AM #3
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'
xtype: 'button', ui: 'orange'
5 Nov 2013 1:32 PM #4
Yes, that definitely helped.