PDA

View Full Version : Custom iconCls ?



Shijutv
19 Jan 2011, 6:03 AM
Hi All,
How can we create our own iconCls ?


Any Help would be appreciated

Shiju

VinylFox
19 Jan 2011, 6:10 AM
You will have to compile them with Compass/SASS

There are a few Sencha Touch specific articles on how to do this:

Custom Styling a Sencha Touch App (http://www.vinylfox.com/custom-styling-a-sencha-touch-app/)
An Introduction to Theming Sencha Touch (http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/)

Shijutv
19 Jan 2011, 6:15 AM
Hi VinyFox,
I just need to just change the arrow_left and arrow_right to my own images.

With out compile is there any other easy way to do this by adding class or other ?


Thanks
Shiju

VinylFox
19 Jan 2011, 6:42 AM
Generating new CSS using the techniques noted in those two blog posts is really the best way, sure there are other ways to do it, but they will impact performance.

jep
19 Jan 2011, 8:13 AM
VinylFox - Is there some problem with just doing this? Will this somehow impact performance?



.x-tab img.locate3,
.x-button img.x-icon-mask.locate3 {
-webkit-mask-image: url(../../sencha/resources/themes/images/default/pictos/locate3.png);
}


When I dug through the CSS, this is all that I found that was actually in there for these various pictos.

Shijutv - Put the above in your apps CSS, then use iconCls='locate3'.

VinylFox
19 Jan 2011, 12:37 PM
What your doing is adding another HTTP request for an image file. The CSS that comes with Sencha Touch has encoded images in the CSS itself, so no extra overhead to request images.

Remember that your dealing with a cell phone here, so every bit of optimization counts, and every shortcut you take will be noticed.

jep
19 Jan 2011, 12:52 PM
Ah, I see. So you'd have no problem with just base64 encoding the file (if you don't already have a base64 encoder, you can use http://www.opinionatedgeek.com/dotnet/tools/base64encode/ to upload your file and get the base64) and sticking it in the code like Sencha does, right?

So you'd have this:


.x-tab img.locate3,
.x-button img.x-icon-mask.locate3 {
-webkit-mask-image:/*url(../../sencha/resources/themes/images/default/pictos/locate3.png);*/
url('data:image/png;base64,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')
}


At this point, there wouldn't be any more of a performance hit than with the sencha provided ones, as they use the same technique in the end.

VinylFox
19 Jan 2011, 1:03 PM
I guess so. I'm just not sure why all of this effort is easier to you than just using Compass/SASS to generate the CSS. Just do it the right way instead of trying to hack around another way.

The default CSS also comes with a bunch of icons included that you probably arent using - generating custom CSS would allow you to remove those.

Also keep in mind that you have now modified the default CSS, so if you ever have to upgrade the library then you will need to put your CSS changes back in the upgraded CSS file.

jep
19 Jan 2011, 1:07 PM
I agree that you definitely have some points. But currently, it's just more hassle than it's worth to take on yet another task and learn the sass/ruby stuff. It was bad enough getting my eclipse all in proper order. :D

If at some point we ever get to a release version of an app, I'll definitely bite that bullet and use the techniques you posted for creating a trimmed down and specific set of css. Until then, the other way of doing it took about 10 seconds. I like my rapid application development to be rapid. :)