Extjs 4创建工具栏项目宽度ajax请求

Posted 2023-02-26

【中文标题】Extjs 4创建工具栏项目宽度ajax请求

【英文标题】：Extjs 4 create toolbar items width ajax request

【发布时间】：2011-10-12 20:47:19

【问题描述】：

我必须创建一个从 ajax 请求计算其项目的工具栏。查看initComponent 和buildItems 这两个函数，我没有得到toolbar.items 元素的相同结果，即使在调用console.log 后，您在builsItems 方法中看到的ajax 请求的运行也正确完成。 请帮助（我是初学者，我正在使用 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 仅在 initComponent 中的 callParent 之前起作用。

在那之后，项目已经初始化，ext 不会接受对其的更改。您应该改用 Toolbar 组件的 add method。

在您的 buildItems 方法中，无需构建数组，只需使用您的对象符号组件调用 add：

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

我还没有测试过，但我很确定我就是这样做的（从我的头顶上）

编辑：为作用域添加了 me 变量

【讨论】：

我做到了，但我得到了错误：this.add 不是一个函数。这是合乎逻辑的，因为每个内部的 this 意味着范围发生了变化，所以我在 Ext.each 之前声明了一个变量，如下所示：var listitems=this，我用 listitems.add 替换了 this.add。一切正常。非常感谢你。

@ora-271071。是的，公平点。那是范围问题。这意味着每个回调中的其他内容。 extjs 的方式通常是创建一个 me 变量并将其分配给它，然后 me 在任何嵌套函数中都可用。我已经修改了代码。

@ora-271071。您也应该接受其中一个答案（其中一个答案左侧的勾号）

【参考方案2】：

为什么不利用组件加载器呢？见：http://dev.sencha.com/deploy/ext-4.0.2a/examples/component-loader/component-loader.html

【讨论】：

非常感谢您的参与。事实上，用户对组件的隐式 ajax 请求是一个好主意（将来我将计划使用此功能）。但就目前而言，与我的需求相对应的答案 1 正是我想要的。非常感谢您的回答。

【参考方案3】：

您的第一个 console.log 调用不在您的回调范围内，因此它会在 Ajax 请求完成之前被调用。

在您的第二个console.log 调用中，它在回调中被调用...在Ajax 请求完成后启动。基本上，如果您希望使用从 Ajax 请求返回的数据，则需要在回调中完成所有工作。

【讨论】：

这并不能真正回答问题