internet explorer very slow with setVisible

**[email protected]** · 5 Jun 2012, 12:38 AM

REQUIRED INFORMATION Ext version tested:

Ext 4.1.0

Browser versions tested against:

IE6
IE7
IE8

DOCTYPE tested against:

<!DOCTYPE html>

Description:

Ie6,7,8 are very slow when show or hidde elements in toptoolbar i think a doLayout problems
IE9 OK
FireFox12 OK
chrome OK

Steps to reproduce the problem:

I create a GridPanel with a topToolBar and 5 buttons.
I use the event selectionChange the grid to show or hide the buttons.
The row selection change is very long. There are more buttons and more is a long

Test Case:

Code:

     Ext.onReady(function(){
    var arrayStore = {
        xtype:'array',
        fields:['id','name'],
        data:{'items':[
             {id:'1',name:'a'},
             {id:'2',name:'b'},
             {id:'3',name:'c'},
             {id:'4',name:'d'},
             {id:'5',name:'e'},
             {id:'6',name:'f'}
         ]},
         proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    };
    
    var columns = [
         {header: 'Id',  dataIndex: 'id'},      
         {header: 'Name',  dataIndex: 'name'}         
     ];
    
    var toolBar = {
        items:[
            { xtype: 'button', text:'btn1',hidden:true},
            { xtype: 'button', text:'btn2',hidden:true},
            { xtype: 'button', text:'btn3',hidden:true},
            { xtype: 'button', text:'btn4',hidden:true},
            { xtype: 'button', text:'btn5',hidden:true},
            { xtype: 'button', text:'btn6',hidden:true}
        ]
    };
    
    Ext.create('Ext.container.Viewport',{
        layout:'fit',
        items:{
            xtype:'grid',
            store:arrayStore,
            columns:columns,
            tbar:toolBar,
            multiSelect:true,
            scope:this,
            listeners:{
                'selectionchange':function(sm,selected){
                    var topToolBar = this.getDockedItems('toolbar[dock="top"]')[0];
                    if(selected.length){
                        topToolBar.getComponent(0).setVisible(true);
                        topToolBar.getComponent(1).setVisible(true);
                        topToolBar.getComponent(2).setVisible(true);
                        topToolBar.getComponent(3).setVisible(true);
                        topToolBar.getComponent(4).setVisible(true);
                        topToolBar.getComponent(5).setVisible(true);
                    }else{
                        topToolBar.getComponent(0).setVisible(false);
                        topToolBar.getComponent(1).setVisible(false);
                        topToolBar.getComponent(2).setVisible(false);
                        topToolBar.getComponent(3).setVisible(false);
                        topToolBar.getComponent(4).setVisible(false);
                        topToolBar.getComponent(5).setVisible(false);
                    }
                }
            }
        }
    });
});

Debugging already done:

none

Possible fix:

not provided

Additional CSS used:

only default ext-all.css

Operating System:

WinXP Pro

**evant** · 5 Jun 2012, 12:47 AM

Use suspend/resume:

Code:

Ext.onReady(function() {
    var arrayStore = {
        xtype: 'array',
        fields: ['id', 'name'],
        data: {
            'items': [{
                id: '1',
                name: 'a'
            }, {
                id: '2',
                name: 'b'
            }, {
                id: '3',
                name: 'c'
            }, {
                id: '4',
                name: 'd'
            }, {
                id: '5',
                name: 'e'
            }, {
                id: '6',
                name: 'f'
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    };

    var columns = [{
        header: 'Id',
        dataIndex: 'id'
    }, {
        header: 'Name',
        dataIndex: 'name'
    }];

    var toolBar = {
        items: [{
            xtype: 'button',
            text: 'btn1',
            hidden: true
        }, {
            xtype: 'button',
            text: 'btn2',
            hidden: true
        }, {
            xtype: 'button',
            text: 'btn3',
            hidden: true
        }, {
            xtype: 'button',
            text: 'btn4',
            hidden: true
        }, {
            xtype: 'button',
            text: 'btn5',
            hidden: true
        }, {
            xtype: 'button',
            text: 'btn6',
            hidden: true
        }]
    };

    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: {
            xtype: 'grid',
            store: arrayStore,
            columns: columns,
            tbar: toolBar,
            multiSelect: true,
            scope: this,
            listeners: {
                'selectionchange': function(sm, selected) {
                    var toolbar = this.down('toolbar'),
                        items = toolbar.items,
                        len = items.getCount(),
                        i = 0,
                        visible = selected.length > 0,
                        d = new Date();
                        
                    Ext.suspendLayouts();
                    for (; i < len; ++i) {
                        items.getAt(i).setVisible(visible);
                    }
                    Ext.resumeLayouts(true);
                    console.log(new Date() - d);
                }
            }
        }
    });
});

**[email protected]** · 5 Jun 2012, 1:07 AM

It's ok with Ext.suspendLayouts() and Ext.resumeLayouts(true); But where are this functions in Docs?

It works in a simple case but in a more complex case (with more elements) it lagg.

Code:

listeners:{
                'selectionchange':function(sm,selected){
                    var topToolBar = this.getDockedItems('toolbar[dock="top"]')[0];
                     Ext.suspendLayouts();
                    if(selected.length){
                        topToolBar.getComponent(0).setVisible(true);
                        topToolBar.getComponent(1).setVisible(true);
                        topToolBar.getComponent(2).setVisible(true);
                        topToolBar.getComponent(3).setVisible(true);
                        topToolBar.getComponent(4).setVisible(true);
                        topToolBar.getComponent(5).setVisible(true);
                    }else{
                        topToolBar.getComponent(0).setVisible(false);
                        topToolBar.getComponent(1).setVisible(false);
                        topToolBar.getComponent(2).setVisible(false);
                        topToolBar.getComponent(3).setVisible(false);
                        topToolBar.getComponent(4).setVisible(false);
                        topToolBar.getComponent(5).setVisible(false);
                    }
                      Ext.resumeLayouts(true);
                }
            }

Thread: internet explorer very slow with setVisible

Thread Tools

Search Thread

Display

internet explorer very slow with setVisible

suspend and resume

Tags for this Thread

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News