Extjs 4 create toolbar items width ajax request

I have to create a toolbar that calculates its items from an ajax request. look at both functions initComponent and buildItems, I don't get the same result of toolbar.items elements, even the run of ajax request done correctly as you see in the builsItems method after calling console.log. please Help (I am beginner, I am using Extjs 4) Thanks a lot.

Ext.define('Dev.view.layout.Toolbarapp',{
   extend:'Ext.toolbar.Toolbar',
   alias :'widget.toolbarapp',
   border:false,
   height:35,
   initComponent:function(){
           this.items=[];
           Ext.Ajax.disableCaching=false;
           Ext.Ajax.request({
                        url : '/gdev/jsontest',
                        callback:this.buildItems,       
                        scope:this
           });  
       console.log(this.items); //THE RESULT IS []    
       this.callParent(arguments);
   },   
   buildItems:function(options, sucess, response){      
        if (sucess==true) {
            var listItems=[];
            var applist=Ext.JSON.decode(response.responseText);
            Ext.each(applist, function(rec){
                   listItems.push({'text'     :rec.appid,
                                   'iconCls'  :rec.iconcls,
                                   'operation':rec.appcode
                                  }
                                );                     
                 });
            this.items=listItems;   
            console.log(this.items); //THE RESULT IS [Object { text=100,      
    iconCls="appsysadmin", operation="appsysadmin"}, Object { text=101, 
    iconCls="appmailxe", operation="appmailxe"}]
        }
        else {
            Ext.MessageBox.alert('Error','not found');
        }

   }
   });

Answers:

Answer

Assigning object notation components to this.items only works before the callParent in initComponent.

After that, the items are already initialised, ext won't pick up changes to it. You should use the Toolbar component's add method instead.

In your buildItems method, rather than building an array, simply call add with your object notation component:

var me = this;
Ext.each(applist, function(rec){
                   me.add({'text'     :rec.appid,
                                   'iconCls'  :rec.iconcls,
                                   'operation':rec.appcode
                                  }
                                );                     
                 });

I haven't tested it but I'm pretty sure that's how I did it (from top of my head)

Edit: added me variable for scope

Answer

Your first console.log call is outside of your callback, and therefore it gets called before the Ajax request ever completes.

With your second console.log call, it's being called inside the callback... which is initiated after the Ajax request has finished. Basically, you need to do all of your work in your callback if you're expecting to use data returned from the Ajax request.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.