0

I am working in extjs4. I am displaying tpl with time, projectName and projectnumber.I have tpl as-

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>',

And for class "task-text-cls" i have css as-

.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%;
}

Its working correctly in IE,FireFox but giving issue in chrome[more space is getting included between fields]. Chrome requires width as 125px to work properly. So in extjs tpl, how to detect which is current browser and how to apply conditional css.

user1722857
  • 877
  • 2
  • 19
  • 33

1 Answers1

0

ExtJS adds a CSS class indicating the browser (engine) to the HTML body element, such as:

  • x-webkit
  • x-chrome
  • x-gecko
  • x-ie
  • x-ie8
  • ...and so on...

You can see that e.g. in Chrome's developer tools, when you inspect the HTML:

ExtJS browser CSS class

In your CSS file you can use that class to create a browser-based selector, e.g.:

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

If you want to change your template's markup depending on the browser, you can use the corresponding properties on the Ext object, such as Ext.isChrome:

tpl: (
    '<tpl for=".">' +
        (Ext.isChrome ? '<div class="chrome">' : '<div>') + 
            '<img src="test.jpg" />' + 
        '</div>'
    '</tpl>'
)
matt
  • 4,027
  • 2
  • 25
  • 32
  • Thanx a lot sir for reply...it will help me a lot...Sir wanted to ask one more question, if i want to apply operating system wise css,then how i can apply? because some of my css are not supporting mac. So how to apply conditional css for windows and mac os – user1722857 Mar 26 '14 at 06:23
  • Sir,x-gecko is for mozilla firefox as well as for Internet explorer11. So how to differentiate between those to apply separate css – user1722857 Mar 26 '14 at 07:22
  • 1
    There's no CSS class applied for the OS automatically, however you could use [`Ext.isMac`](http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext-property-isMac) for the second approach shown above or to add a class like `x-mac` to the body element and then use the first approach. I don't think `x-gecko` is supposed to be used for IE11. IE11 is not supported prior to ExtJS 4.2.2 and Microsoft changed its user agent, that's why the framework erroneously detects Gecko. Also refer to [my answer here](http://stackoverflow.com/questions/21881671/ext-isie-return-false-in-ie-11/21882477#21882477). – matt Mar 26 '14 at 09:11
  • @matt...thanx for helping me. For IE11 i want margin-left :30px and for mozila firefox, -70px. I tried as .x-gecko .notification_bubble { margin-left: -30px; } ..then its working in IE11 but not supporting for mozilla firefox. – user1722857 Mar 26 '14 at 09:17