Icon in Button Extjs

Usually a button would be more interesting if there were image, in this tutorial i will give a example how to use a icon in button extjs. I think a web developer have been known it, and i am sure you can also create it with ease. But there is nothing wrong if I write this tutorial, maybe there is not yet known.

<script type="text/javascript">&lt;!-- google_ad_client = &quot;pub-7723751324457193&quot;; google_alternate_color = &quot;FFFFFF&quot;; google_ad_width = 234; google_ad_height = 60; google_ad_format = &quot;234x60_as&quot;; google_ad_type = &quot;text_image&quot;; google_ad_channel =&quot;bismillah-search-defafe&quot;; google_color_border = &quot;#FFFFFF&quot;; google_color_link = &quot;#0000FF&quot;; google_color_bg = &quot;#FFFFFF&quot;; google_color_text = &quot;#000000&quot;; google_color_url = &quot;#333333&quot;; //--&gt;</script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script><script>google_protectAndRun(&quot;ads_core.google_render_ad&quot;, google_handleError, google_render_ad);</script>

below is a example code to create icon on button.

This code is part of javascript file

view source

print ?

01	buttons: [{

02	text: 'Submit' ,

03	iconCls: 'icon-submit'

04

05

},{

06	text: 'Close' ,

07	iconCls: 'icon-close' ,

08	handler: function (){

09	win.hide();

10

}

11

}]

“iconCls:’icon-close’,” and “iconCls:’icon-submit’” are main of this tutorial. icon-submit andicon-close are name of class icon, and will load in html file.

here is a code of html file

view source

print ?

01

<!--

02	.icon-submit

03

{

04	background-image:url(add.png) !important;

05

}

06	.icon-close

07

{

08	background-image:url(cross.gif) !important;

09

}

10

-->

This is a screen shot of this tutorial.

icone-in-button-extjs

 

http://defafe.com/icone-in-button