之前一直在做基于Ext的网页。前2天同学遇到Ext.Toolbar的问题让我帮忙看看。之前做Toolbar一直没遇到什么问题,很奇怪,于是自己试了一下,结果一样出错了。然后网上找原因,查看源代码。
出错代码是这么写的
Ext.onReady(function(){
var topToolbar = new Ext.Toolbar([
{text:'test',
handler : function(){
topToolbar.add({text:'Test1'});
}
}
]);
var cm = new Ext.grid.ColumnModel([
{header: "Ticker", width: 60, dataIndex:'Ticker'}
]);
var data = [
{Ticker:'1'},
{Ticker:'2'},
{Ticker:'3'}
]
var store = new Ext.data.JsonStore({
autoLoad : true,
data : data,
fields :['Ticker']
});
topToolbar.addButton({text:'add'});//此行出错
//var layout=toolbar.getLayout();
//console.log(layout);
//topToolbar.addButton({text:'add'});
var grid = new Ext.grid.GridPanel({
cm : cm,
store : store,
width:600,
height:300,
tbar : topToolbar,
renderTo : 'testDiv'
});
//topToolbar.addButton({text:'add'});//此行不出错
});
然后发现放在GridPanel后面就正常,个人觉得是因为Toolbar没有render而产生的错误。调试代码发现出错的代码位于
// private Toolbar 268
nextBlock : function(){
var td = document.createElement("td");
this.tr.appendChild(td);
return td;
},
Toolbar的this.tr初始化是在
// private
onRender : function(ct, position){
this.el = ct.createChild(Ext.apply({ id: this.id },this.autoCreate), position);
this.tr = this.el.child("tr", true);
},
那么明显是没有调用onRender。于是进一步查看GridPanel的onRender,发现没有需要的信息,进一步找到Panel的onRender。发现在onRender里面有这么一句:this.topToolbar.render(this.tbar);所以出现了以上在错误。
总结一下就是,在this.tr还没初始化的时候不能向Toolbar里面添加按钮。