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(https://blog.csdn.net/images/icons/add.gif)!important;}
.view{ background-image:url(https://blog.csdn.net/images/icons/view.gif)!important;}
.delete{ background-image:url(https://blog.csdn.net/images/icons/delete.gif)!important;}

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

3、icon代码

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