PDA

View Full Version : Use of icon-classes



dudek
23 May 2010, 3:43 AM
Hi

On most objects in ExtDesigner you have a "iconCls", but how to use? Do you have like an index of possible classes, and then when you use a class, the js automatically adds graphical icons or huh?

Cheers
Bo Dudek
Webdeveloper
Denmark

jarrednicholls
23 May 2010, 11:51 AM
Hi Bo,

The iconCls configuration option is for you to specify your own CSS class name, which sets a background-image of an icon, typically that is 16x16 but can be larger for bigger buttons. In the Designer, there is currently not a place to define custom CSS or import icons...thus, the iconCls is configurable in the Designer but you won't see its effect until you export your project code and define your custom CSS classes. Importing and using icon images may be a future feature of the Designer.

And of course, as always, you can refer to the Ext JS API Documentation (http://www.extjs.com/deploy/dev/docs/) that describes all of the configuration options in detail. We will also be incorporating these docs into the Designer in some fashion in the near future.

Good question, thanks.

froamer
25 May 2010, 9:10 AM
Hi Bo,

Note that if you use your own CSS by editing the exported xds_index.html file it will be overwritten each time you export. I copy this file and keep the copy in the export folder. That way when you export you can browse your copy complete with your custom CSS.

There is also an icon property on most components that have an iconCls property. This can be the path to an icon image file. If you use this instead, you will still not see the icon at design time, but you will see it when you export and you won't need a separate CSS file (for icons at least).

dudek
25 May 2010, 12:29 PM
Hi

Thanks for the note. I've managed to make a index.html file as well including the stuff from the xds_index.html and some extra goodies, so my ongoing exports don't overwrite :)

Cheers
Bo Dudek
Webdeveloper
Denmark

bincrawler
5 Jan 2011, 9:43 AM
I noticed there are some default iconcls that ext designer uses
eg.
icon-config
icon-save
icon-delete
icon-load

are there other available that can be used that shows up in designer at design time?

jarrednicholls
5 Jan 2011, 12:46 PM
There are none publicly documented, you can of course scan the ext-all.css file for others. Unlike Ext JS 3.3, Sencha Touch does have a plethora of available icons available as a part of the framework. Ext JS 4.0 may offer a similar type of icon pack, but don't take my word for it.