Results 1 to 3 of 3

Thread: internet explorer very slow with setVisible

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Mar 2010
    Location
    FRANCE - Lyon
    Posts
    4

    Default internet explorer very slow with setVisible

    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

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

    Default

    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);
                    }
                }
            }
        });
    });
    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
    Sencha User
    Join Date
    Mar 2010
    Location
    FRANCE - Lyon
    Posts
    4

    Default suspend and resume

    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);
                    }
                }

Tags for this Thread

Posting Permissions

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