Ext.Toolbar的使用 添加按钮报错

之前一直在做基于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里面添加按钮。

你可能感兴趣的:(javascript,Ext)