1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    balyho0o is on a distinguished road

      0  

    Default Unanswered: Collapsed pannels are jerky

    Unanswered: Collapsed pannels are jerky


    I have a few expandable panels in my layout that begin collapsed. It seems that these panels when opened, especially for the first time, have very jerky animation. This seems to improve after the first opening but still not as smooth as I'd like.

    Are there any best practices to follow to avoid this? I thought perhaps initializing open and then closing so the rendered content will have a chance to figure out how tall it needs to be, but that seems kind of sloppy.

    I've searched but haven't had luck finding anything about this specific issue so think it may be in the way I am creating the component.

    Here is an example of one of the components I'm having trouble with. Appear in a column layout, in a fixed size col:
    Code:
    var alerts = Ext.create('Ext.grid.Panel', {        id: 'alerts-list',
            title: 'Alerts',
            //iconCls: 'icon-info',
            hideHeaders: true,
            margin: '0 5 20 5',
            collapsible: true,
            collapsed: true,
            autoHeight: true,
            store: {
                fields: ['message', 'tipmessage', 'type'],
                data: [{
                    'message': '<span class="author">Joe Smith</span><h1>Here is my internal note:</h1><span class="meta">April, 23 2011 2:15pm</span><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                    type: 'note',
                    'tipmessage': '<span class="author">Joe Smith</span><h1>Here is my internal note:</h1><span class="meta">April, 23 2011 2:15pm</span> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p><a href="">12345678</a>'
                }, {
                    'message': '<h1>High Priority:</h1><span class="meta">April, 23 2011 2:15pm</span><br />Nam sapien ligula, consectetuer id, hendrerit in, cursus sed',
                    type: 'high',
                    'tipmessage': '<h1>High Priority:</h1><span class="meta">April, 23 2011 2:15pm</span><br /><p>Nam sapien ligula, consectetuer id, hendrerit in, cursus sed</p>',
                }, {
                    'message': '<h1>Medium Priority Alert:</h1><span class="meta">April, 23 2011 2:15pm</span><br />ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis',
                    type: 'medium',
                    'tipmessage': '<h1>Medium Priority Alert:</h1><span class="meta">April, 23 2011 2:15pm</span><br />ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis'
                }, {
                    'message': '<h1>Low Priority:</h1><span class="meta">April, 23 2011 2:15pm</span><br />Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim',
                    type: 'low',
                    'tipmessage': '<h1>Low Priority:</h1><span class="meta">April, 23 2011 2:15pm</span><br />Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim'
                }]
            },
            columns: [{
                dataIndex: 'type',
                width: 30,
                renderer: function (value, meta) {
                    //custom class on this cell for icon indicator
                    if (value === 'high') {
                        meta.tdCls = 'icon-high icon';
                        return 'high';
                    } else if (value === 'medium') {
                        meta.tdCls = 'icon-medium icon';
                        return 'medium';
                    } else if (value === 'low') {
                        meta.tdCls = 'icon-low icon';
                        return 'low';
                    } else if (value === 'note') {
                        meta.tdCls = 'icon-note icon';
                        return 'note';
                    }
                }
            }, {
                tdCls: 'x-td-white-space-normal',
                dataIndex: 'message',
                flex: 1
            }]
        });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,635
    Answers
    613
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Can you specify the exact version of ExtJS that you are using and is this a problem in all browsers?

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    balyho0o is on a distinguished road

      0  

    Default Browser and Ext Version

    Browser and Ext Version


    This is using Ext 4.1.0 and tested in Chrome 18.0.1025.168 and Firefox 12

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar