Using CSS to style a Sencha Touch form - how do I find the elements?

Question

I'm starting out with Sencha Touch, and I am getting a pretty decent handle on the Javascript elements of this powerful tool. But I've recently come to the CSS portion, and I'm afraid I can't figure out how to style it accurately.

I can guess at some of the elements, and I know some of the others because I created them. But I can't look at the generated source or examine the DOM, not even using FireMobileSimulator or some such plug-in. So when I, say, try to style my form elements and I find that I can't get the labels and input fields to float, for example, I have no way to diagnose exactly why it isn't working.

Does anybody know? Thanks! SS

Answer 1

Hey StormShadow. To edit the style of Sencha components you shuld learn SASS, in fact, Sencha Touch, exactlly like the new Ext 4 framework, uses SASS and COMPASS to create theyre themes and you can do the same creating your own. I know that at the beginning you could be "scared" about to use these new technologies, but I assure you that you will able to change the whole application by editing a simple variable. However, if you want to miss this great opportunity, I suggest you to take a look at this file " resources\themes\stylesheets\sencha-touch\default\widgets_form.scss " inside your Sencha Touch root, to have an idea on how the component are created and witch CSS classes are used for Form components. Then you can try to edit them by hacking the Sencha Touuch theme CSS.

But I warn you: This is not the Sencha way to do that. if you want to be a great Sencha Touch developer, you have to learn SASS. It's really easy and it really worths to be learned!

Hope this helps.

Answer 2

you can also use less, rather than compass to generate your css (after all it's just CSS!)

LESS can be implemented clientside or serverside so you don't have to go near Ruby.

Less Website