如何在Extjs4 tpl中添加检测当前浏览器的条件

Question

我正在使用extjs4。我TPL显示随着时间的推移，项目名和projectnumber.I有TPL原样

tpl : '<tpl for=".">'+ 
     '<div class = "timer-icon"><img class="taskTimerIconCls" src="./UI-INF/images/s.gif" onclick="Ext.getCmp(\'' + me.id + '\').showTimerWindow()">' + 
     '<span> <span id="timerId"> {hrsWorked}</span><br><a onclick="Ext.getCmp(\'' + me.id + '\').showTimerWindow()">Stop Timer</a></span></div>' + 
     '<div class = "task-text-cls"><span id="taskText">{projectName}&nbsp&nbsp({formattedProjectNumber})</span><br>{title}</div>' 
     + '</tpl>', 

而对于类“任务文本CLS”我有CSS原样

.task-text-cls { 
    color: white; 
    display: inline-block; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 260px; 
    padding: 0 0 0 10px; 
    font-size: 12px; 
    position:relative; 
    top:14%; 
} 

它在IE工作正常，FireFox，但在铬的问题[更多的空间越来越包含在字段之间]。 Chrome需要宽度为125px才能正常工作。因此，在extjs tpl中，如何检测当前的浏览器以及如何应用条件式CSS。

Answer 1

ExtJS的增加了一个CSS类指示浏览器（发动机），以HTML主体元件，如：

• 的x的webkit
• 的x铬
• 的x壁虎
• X-即
• X-IE8
• ...等等...

你可以看到例如在Chrome的开发者工具，当你检查HTML：

在你的CSS文件，你可以使用这个类来创建一个基于浏览器的选择，例如：

.x-chrome .task-text-cls { 
    width: 125px; 
} 

如果你想根据不同的浏览器上更改模板的标记，你可以在Ext对象上使用相应的属性，如Ext.isChrome：

tpl: (
    '<tpl for=".">' + 
     (Ext.isChrome ? '<div class="chrome">' : '<div>') + 
      '<img src="test.jpg" />' + 
     '</div>' 
    '</tpl>' 
)