1. #1
    Sencha Premium Member
    Join Date
    Feb 2013
    Posts
    50
    Answers
    1
    Vote Rating
    2
    vicvolk87 is on a distinguished road

      0  

    Default Answered: Best practice: adding items dynamically

    Answered: Best practice: adding items dynamically


    Hi, guys! What is the best practice of adding items dynamically, so to avoid layout crash? In my application I have a top toolbar with buttons, each button contains a menu, which is populated with items on click event. This is a bit of code

    Code:
    var toolbar=Ext.getCmp('menuToolbar');
    toolbar.add({
        xtype:'button',
        text:'mybutton',
        listeners:{
            'click': function(){
                this.menu.items.each(function(item) {
                    item.destroy(); // do this in order to prevent duplication of items on the next click
                });
                var menuItem = this.menu; // this will be populated dynamically
                var storeItem=Ext.create('Ext.data.Store',{
                    fields:['id','text'],
                    proxy:{
                        type:'ajax',
                        url:'json/menuItems.php',
                        reader: {
                            type:'json',
                            root:'root'
                        }
                    },
                    autoLoad:true,
                    listeners: {
                        load:function(store,records,success,operation,opts){
                            store.each(function(record){
                                menuItem.add([{
                                    id:record.data.id,
                                    text:record.data.text
                                }]);
                            });
                        }
                    }
                });
                this.showMenu(); // I'm not sure whether to use this method
                // or show method for each added item
            }
        }
    });
    Layout crash happens when the user quickly doubleclicks on the button. Please, look what we get:

    Before dblclick (how it should look like):

    good.png
    After dblclick (layout crash):

    bad.png

  2. There's several points here:

    1) I wouldn't load a whole store just to do this, it's overkill.
    2) By calling add over and over, you're triggering a layout for each add. You should either:
    a) Add all items in a single array
    b) Suspend/resume layouts at the start/ respectively.

    3) As for controlling duplicates, that's left up to you. If you kick off a request while another is running, you can cancel the request, or ignore the result.

    I'd suggest you use the component loader, which is used for exactly this scenario:

    http://docs.sencha.com/extjs/4.2.0/e...nt-loader.html

    If you're using the component loader, you can use the abort() method to cancel an active request, so your code would be become:

    Code:
    toolbar.add({
        xtype: 'button',
        text: 'mybutton',
        handler: function(){
            this.showMenu();
            var menu = this.menu,
                loader = menu.getLoader();
                
            loader.abort();
            // Assumes server returns an array objects
            loader.load({
                url: 'json/menuItems.php'
            });
        }
    });

  3. #2
    Sencha Premium Member
    Join Date
    Feb 2013
    Posts
    50
    Answers
    1
    Vote Rating
    2
    vicvolk87 is on a distinguished road

      0  

    Default


    By the way, I tried to play with suspendLayouts and resumeLayouts methods, but I got the same picture.

  4. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,909
    Answers
    456
    Vote Rating
    626
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      2  

    Default


    There's several points here:

    1) I wouldn't load a whole store just to do this, it's overkill.
    2) By calling add over and over, you're triggering a layout for each add. You should either:
    a) Add all items in a single array
    b) Suspend/resume layouts at the start/ respectively.

    3) As for controlling duplicates, that's left up to you. If you kick off a request while another is running, you can cancel the request, or ignore the result.

    I'd suggest you use the component loader, which is used for exactly this scenario:

    http://docs.sencha.com/extjs/4.2.0/e...nt-loader.html

    If you're using the component loader, you can use the abort() method to cancel an active request, so your code would be become:

    Code:
    toolbar.add({
        xtype: 'button',
        text: 'mybutton',
        handler: function(){
            this.showMenu();
            var menu = this.menu,
                loader = menu.getLoader();
                
            loader.abort();
            // Assumes server returns an array objects
            loader.load({
                url: 'json/menuItems.php'
            });
        }
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #4
    Sencha Premium Member
    Join Date
    Feb 2013
    Posts
    50
    Answers
    1
    Vote Rating
    2
    vicvolk87 is on a distinguished road

      0  

    Default


    Thank you, evant!

Thread Participants: 1