PDA

View Full Version : How do I use Ext.ux classes?



williampiovano
4 Sep 2013, 12:07 AM
Hi,

I've googled around and searched the docs, but I can't find an up-to-date explanation of how one is supposed to include sencha's ux classes in one's project. For example, I'm trying to use the GroupTabPanel. The js file is in ext/src/ux, and its css sits in ext/src/ux/css.

Currently I have added the mapping to app.js:

Ext.Loader.setPath({
'Ext.ux': './app/ux'
});
As I understand, I'm supposed to copy the js file into app/ux or equivalent application sub-folder. Is this so that the user doesn't have to download the entire folder?
Where does the css file go? sass/var/ux? sass/src/ux? (I would have thought var, which is for global ext styling, whereas src is for view styling)
Why keep the GroupTabPanel namespace as Ext.ux.GroupTabPanel? Is it not supposed to be MyApp.ux.GroupTabPanel now to match the directory?
I've gotten the panel to display using packages but I'd like to keep this class in the top level folders since they're not theme-specific.
Many thanks.

-Will

ettavolt
4 Sep 2013, 1:03 AM
1. As I remember, you will only need to add 'requires' somewhere - path to ux is inherited from path to Ext, if using CMD-made application.
2. Unfortunately, you must copy it to sass/etc as {name}.scss and include in your sass/etc/all.scss.
3. Of course, if you copy it to your app folder, you will need to change its namespace. Also, you won't need Loader configuration.

williampiovano
4 Sep 2013, 4:39 AM
Hey and thanks for the reply.

I'm still a little confused. Do I need to manually change the css extension to scss? I'm still confused as to why it needs to be put in sass/etc and not sass/var. Also, you meantion all.css, but the docs say that in 4.2.2 should no longer be used (see "Migrating a Theme from Ext Js 4.1 or Earlier" in http://docs.sencha.com/extjs/4.2.1/#%21/guide/theming).

It all seems a little contrived. Surely a function as core as using library components should have a well-defined process associated with it, or at least a doc that elucidates all the secret steps involved?

Thanks.

-Will

ettavolt
4 Sep 2013, 8:00 AM
Yes, you need to change extension to scss, because compass/sass imports only such files.
I propose to use all.scss to include stylesheet for that third-party component, not for you component rules. However, if you change it's namespace then, of course, you should place that scss under sass/src/ux

ux is decrypted as User eXtension - so these are not part of library and Sencha does not support them. :)

williampiovano
5 Sep 2013, 9:11 AM
I see your point about user extensions. I was just trying to get one of their examples to work:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/grouptabs/grouptabs.html

Didn't think it would be unsupported. If I look at the source for that page in the Chrome debugger, GroupTabPanel.css is in the ux folder, which seems to go against general practice.

Anyway, I've left the GroupTabPanel.js file in the ext folder but moved the GroupTabPanel.scss into sass/var/ux/ as you suggested, but I'm not having any luck. What's strange is that if I change the color in sass/src/view/Viewport.scss, the viewport does change color, which is why I was wondering if ux classes are to be treated any differently.

Thanks.

ettavolt
6 Sep 2013, 3:56 AM
GroupTabPanel.scss should better go to sass/src/ux/, but that is not a requirement.
However, you must change primary namespace in GroupTabPanel.js to MyApp, because sass/*/ux/ is mapped to MyApp.ux - I mean, CMD will use only those *.scss, for which it finds respective class in your namespace.