在Coolite中动态添加有图标的Tab

使用Coolite中的TabPanel的Tab时，如果为Tab指定Icon，则该Tab便会出现我们指定的图标，但是在动态添加时则不行。

 

仔细检查了一下原因，发现Icon这个属性应该是Coolite自己扩展的，而在ExtJs中并无此属性，必须使用IconCls属性来处理。而Coolite的控件你会发现，如果指定Icon属性，则该控件的IconCls将会被赋上一个对应IconCls值。原来它的Icon枚举的每一个值对应了一个IconCls，举个例子，Icon.Email，他的IconCls=“icon-email"，这里要注意，IconCls为全小写，以"Icon-"开头,加上Icon.Email枚举的Text(key).

 

在AddTab时可通过如下代码加上图标：

var addTab = function (tabPanel, id, title, url,iconCls) { var tab = tabPanel.getComponent(id); if (!tab) { tab = tabPanel.add({ id: id, title: title, iconCls: iconCls, closable: true, autoLoad: { showMask: true, url: url, mode: "iframe", maskMsg: "正在加载页面 " + title + "..." } }); } tabPanel.setActiveTab(tab); }

 

同理，Coolite的其它控件应该都可使用相似方式处理图标问题