ext3的toolbar怎么动态添加3个按钮????????????????

Question

我写的代码：/**
 * tbarCfg:{
 *  catUrl:"xx"
 * }
 */
MyToolbar = Ext.extend(Ext.Toolbar,{
category:null,

constructor:function(_cfg){

Ext.apply(this,_cfg);
MyToolbar.superclass.constructor.call(this,{
height:40,
items:this["category"],
listeners:{
"beforerender":function(_tbar){
Ext.Ajax.request({
url:this["tbCfg"].catUrl,
success:function(_response){
alert(_response.responseText);
this.category = _response.responseText;

}
});

}
}
});
}
}); 
url返回的JSON数据是[{text:'啊色'},{text:'阿杜'}，{text:'就啊'}] ,我明明给this["category"]赋值了啊
怎么样才能一次添加3个按钮？

Answer 1

两个地方this指向是不一样的回调函数中的this的指向应该是window而且就算把指向改正确同样不会得到正确结果
产生配置对象时ajax的回调函数并没有执行，所以this["category"]必定为undefined
还有就算有值items需要的是一个数组，不是字符串你这个错误挺多的，都不好给你改，
js基础需加强你这个的做法，建议改一下
MyToolbar.superclass.constructor.call(this,{
            height:40,
            items:[],//先配一个空的
            listeners:{
                "beforerender":function(_tbar){
                    var _this=this;//用一个局部变量保存this引用
                    Ext.Ajax.request({
                        url:this["tbCfg"].catUrl,
                        success:function(_response){
                            alert(_response.responseText);
                            var backData=eval(_response.responseText);//json字符串需解析为数组
                                for(var i=0;i<backData.length;i++)//动态添加项
                            {
                               _this.add(backData[i]);
                            }                            
                        }
                    });
                    
                }
            }
        });

Answer 2

首先谢谢了。js确实半吊子。。但这个好像也有问题。。render之前请求数据，得到请求的数据执行回调函数的时候貌似toolbar已经在游览器中渲染了啊。所以按钮还是加不上。。怎么样才能控制请求数据成功之后再渲染。

Answer 3

试了啊。
/**
 * tbarCfg:{
 *  catUrl:"xx"
 * }
 */
MyToolbar = Ext.extend(Ext.Toolbar,{

constructor:function(_cfg){

Ext.apply(this,_cfg);
MyToolbar.superclass.constructor.call(this,{
height:40,
items:[],
listeners:{
"beforerender":function(_tbar){
Ext.Ajax.request({
url:this["tbCfg"].catUrl,
success:function(_response){
alert(_response.responseText);
var backData = eval(_response.responseText);
for(var i=0;i<backData.length;i++){
var _btn = new Ext.Button(backData[i]);
alert(_btn instanceof Ext.Button);//返回true
_tbar.addButton(_btn);
}


}
});
}

}
});
}
}); 
按照您说的新改的代码。
不会报错了。但是还是没有啊。

Answer 4

一般外层渲染之后加render事件可以在内部加新的元素，但好像是ajax返回的速度太慢了吗，所以加不上新的按钮？后台返回的json串：[{text:'啊色'},{text:'阿杜'}，{text:'就啊'}]

Answer 5

for(var i=0;i<backData.length;i++)//动态添加项
{
   _this.add(backData[i]);
} 
_this.doLayout();//渲染后再更新组件必须调用该方法更新视图                         你就按我那样写,这儿差了点东西
你后面那种写法看着好像也对,也调用doLayout方法试试