Results 1 to 6 of 6

Thread: [EXTJS 6] XTemplate modern doesn't work in Edge/IE11

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-23263 in 6.5.1.
  1. #1
    Ext JS Premium User
    Join Date
    Aug 2012
    Posts
    12

    Default [EXTJS 6] XTemplate modern doesn't work in Edge/IE11

    Hello,
    I have problem with showing list with a template in Modern. If i use this simple code it doesn't work in Edge or IE11. It works on Chrome and Firefox.
    Code:
    <tpl if="this.OrientationL()">
        <div class='clsMain'>
            <div class='top'>
                <div class='clsType'><b>{TYPE}</b></div>
                <div class='clsClient'>{CLIENT_NAME}</div>
            </div>
            <hr class='clear'>
            <div class='bottom'>
                <div class='clsDateFrom'>{DateFromConvert}</div>    
                <div class='clsDesc'>{DESCRIPTION}</div>
            </div>
        </div>
    </tpl>
    But it just seems to be the problem with the <tpl> tag as if I remove that the list shows perfectly. I'm using tpl to know how to layout the list if the device is Landscape or Portrait orientated. Could anyone help perhaps?

    Best regards

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,239

    Default

    Can you provide some more context? Where is the template being used? Where is OrientationL() declared? What does it return?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext JS Premium User
    Join Date
    Aug 2012
    Posts
    12

    Default

    I am using the lastest SA4. So I have a list on my main page and to that list I try to format my record data that I get from the server in to more readable list.
    The function OrientationL() returns true if the Ext.Viewport.getOrientation(); is Landscape and is under my template

    Code:
    {
                xtype: 'list',
                flex: 1,
                itemId: 'listMainData',
                width: '100%',
                itemTpl: Ext.create('Ext.XTemplate', 
                    '',
                     '<tpl if="this.OrientationL()">',
                    '    <div class=\'clsMain\'>',
                    '        <div class=\'top\'>',
                    '            <div class=\'clsType\'><b>{TYPE}</b></div>',
                    '            <div class=\'clsClient\'>{CLIENT_NAME}</div>',
                    '        </div>',
                    '        <hr class=\'clear\'>',
                    '        <div class=\'bottom\'>',
                    '            <div class=\'clsDateFrom\'>{DateFromConvert}</div>    ',
                    '            <div class=\'clsDesc\'>{DESCRIPTION}</div>',
                    '        </div>',
                    '    </div>',
                    '</tpl>',
                    {
                        OrientationL: function() {
                            var orient = Ext.Viewport.getOrientation();
                            if(orient === 'landscape')
                            return true;
                        },
                        OrientationP: function() {
                            var orient = Ext.Viewport.getOrientation();
                            if(orient === 'portrait')
                            return true;
                        }
                    }
                )
    this is how my code looks. And I open in the browser which has 16:9 and is landscape. It returns true on Chrome/Firefox/Sfari it seems. Maybe I know what's going on after consol.log(orient). It seems that Ext.Viewport.getOrientation() returns nothing ('') and so return is false.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,239

    Default

    Seems like there's a bug with getOrientation in those browsers, I'll create a ticket for it.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,239

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  6. #6
    Ext JS Premium User
    Join Date
    Aug 2012
    Posts
    12

    Default

    OK. Thank you for your help.

    Current fix is to just compare actual window DOM height/width.
    Code:
    window.innerWidth > window.innerHeight

Similar Threads

  1. Replies: 4
    Last Post: 16 Jun 2016, 5:57 AM
  2. Modern Ext.Map Pinch does not work in Edge on a Touch PC.
    By MikeLowery in forum Ext JS 6.x Bugs
    Replies: 2
    Last Post: 18 Dec 2015, 2:49 PM
  3. ExtJS 6.0.0 Modern with IE11 Windows Phone 8.1
    By alexander.urban in forum Ext JS 6.x Bugs
    Replies: 6
    Last Post: 8 Dec 2015, 12:52 AM
  4. [FIXED] Cors doesn't work in IE11
    By jeffrey.bolleboom in forum Ext:Bugs
    Replies: 4
    Last Post: 19 Nov 2014, 7:08 AM
  5. RowExpander doesnt work correctly in IE11.
    By De3MoHD in forum Sencha GXT Bugs
    Replies: 0
    Last Post: 18 Jun 2014, 11:34 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •