Extjs 4 создание ajax-запроса ширины элементов панели инструментов

#javascript #extjs #extjs4 #extjs-mvc

Вопрос:

Мне нужно создать панель инструментов, которая вычисляет свои элементы из запроса ajax. посмотрите на обе функции initComponent и buildItems, я не получаю одинакового результата элементов toolbar.items, даже выполнение ajax-запроса выполнено правильно, как вы видите в методе builsItems после вызова console.log. пожалуйста, помогите (я новичок, я использую Extjs 4) Большое спасибо.

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

   }
   });

Ответ №1:

Назначение компонентов объектной нотации this.items работает только перед callParent в initComponent.

После этого элементы уже инициализированы, ext не будет получать изменения в нем. Вместо этого вы должны использовать метод добавления компонента панели инструментов.

В вашем методе buildItems вместо построения массива просто вызовите add с вашим компонентом object notation:

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

Я не тестировал это, но я почти уверен, что именно так я это и сделал (из головы)

Редактировать: добавлена переменная me для области видимости

1. Я сделал это, но получаю сообщение об ошибке: this.add не является функцией. Это логично, потому что это внутри каждого означает изменение области видимости, поэтому я объявил перед Ext.each переменную, подобную следующей: var listitems=this , и я заменил this.add на listitems.add. все работает нормально. ТАК ЧТО БОЛЬШОЕ СПАСИБО, ПАРЕНЬ.

2. @ora-271071. Да, справедливое замечание. Это проблема области. это означает что-то еще в каждом обратном вызове. Способ extjs обычно заключается в создании переменной me и присвоении ей этой переменной, после чего me доступен в любой вложенной функции. Я внес изменения в код.

3. @ora-271071. Вы также должны принять один из ответов (галочка слева от одного из ответов)

Ответ №2:

Почему бы не воспользоваться загрузчиком компонентов? Смотрите: http://dev.sencha.com/deploy/ext-4.0.2a/examples/component-loader/component-loader.html

1. Большое спасибо за ваше участие. на самом деле, это отличная идея для неявного ajax-запроса пользователя для компонента (в будущем я планирую использовать эту функцию). но на данный момент ответ № 1 соответствует моим потребностям, это именно то, что я хочу. ОЧЕНЬ БЛАГОДАРЕН ПАРНЮ ЗА ВАШ ОТВЕТ.

Ответ №3:

Ваш первый console.log вызов находится за пределами вашего обратного вызова, и поэтому он вызывается до завершения Ajax-запроса.

При вашем втором console.log вызове он вызывается внутри обратного вызова … который инициируется после завершения Ajax-запроса. В принципе, вам нужно выполнить всю свою работу в обратном вызове, если вы ожидаете использовать данные, возвращенные из Ajax-запроса.