EXTJs 中icon 與iconCls的區別及用法！

1、這倆個都是引入小圖片

   區別在於：

         (1)、icon :"直接寫圖片在專案上的路徑"

         (2)、iconCls:"css樣式名稱"

icon 顯示時為下面的新增：

iconCls 顯示為下面的新增：

大家都看到區別了吧！

2、iconCls程式碼：

js對應的程式碼：var tbar=new Ext.Toolbar([
   
   {text:"新增",id:"add",iconCls:'add',handler:function(){add();}},
   {text:"檢視",id:"view",iconCls:'view',handler:function(){add();}},
   {text:"刪除",id:"delete",iconCls:'delete',handler:function(){add();}}       
  ]);

--------------------------------------------------------

引入css樣式表

 <link rel="stylesheet" type="text/css" href="image.css"/>

--------------------------------------------------------

css樣式表內容:

.add{ background-image:url(images/icons/add.gif)!important;}
.view{ background-image:url(images/icons/view.gif)!important;}
.delete{ background-image:url(images/icons/delete.gif)!important;}

---------------------------------------------------------

3、icon程式碼

{text:"新增",id:"add",icon:'add.gif',handler:function(){add();}},