grid内的多行tbar

Question

gridpanel 中的多行toolbar 一直显示不了 网上都说要 render：grid.tbar,不过就是显示不了，那是相当滴郁闷。

我的代码：
[code="java"]
var myextend=Ext.extend(Ext.grid.GridPanel,{
title:'Requirment',
autoScoll:true,
layout:"fit",
autoHeight:true,
bodyStyle : "width:100%;",
autoWidth : true,
initComponent:function(){
this.cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
//sm,
{header:'ID',dataIndex:'ID',width: 220,sortable: true},
{header:'aa',dataIndex:'aa'},
{header:'bb',dataIndex:'bb'},
{header:'cc',dataIndex:'cc'}
]),
this.ds=new Ext.data.Store({
proxy:new Ext.data.HttpProxy({url:'xinasplist.asp',method:'POST'}),
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root'},
[{name:'ID'},{name:'aa'},{name:'bb'},{name:'cc'}])
}),
this.tbar=[
new Ext.Toolbar({
items : [{
text : 'ADD',
iconCls : 'add'
}, {
text : 'MODIFY',
iconCls : 'modify'
}, {
text : 'DELETE',
iconCls : 'delete'
}, '-',{
text : 'PRINT',
iconCls : 'print'
}]
})

],

this.grid=new Ext.grid.GridPanel({
//renderTo:Ext.getBody(),
renderTo:Ext.getCmp("tabs"),
ds:this.ds,
cm:this.cm,
tbar : this.tbar,
tbar2 : this.tbar2,
stripeRows : true
});

this.[b]tbar2 [/b]= new Ext.Toolbar({
[b] renderTo : grid.tbar, [/b]
items : [
'create Date: ', {
id : 'itemDateFrom',
xtype : 'datefield',
format : 'Y-m-d',
readOnly : true
},
{
xtype : 'hidden',
id : 'action',
value : 'QUERY_T_SYS_USER_ACTION'
}, 'username: ',
{
xtype : 'textfield',
id : 'description',
width : 120
},
{
text : 'query',
iconCls : 'query',
handler : function() {
store.load({
params : {
start : 0,
limit : 25,
USER_NAME : Ext.get('description').dom.value,
action : Ext.get('action').dom.value
}
})
}
}]
}),

this.ds.load({params:{start:0,limit:15}});
myextend.superclass.initComponent.call(this);
}

})

var treeTR = new Ext.tree.TreePanel({

    title: 'Test Requirment',
    border: false,
    iconCls: 'settings',
    layout:"fit",
    autoScroll:true,
    animate:false,
    enableDD:false,
    rootVisible:false,
    border:false,
    listeners: {  
       'dblclick':function(node,e){  
         if(node.isLeaf()){
          tabs.add({
             title: node ,
             iconCls: 'tabs',
            autoScroll:true,
            closable:true,
            items: [[color=red]new myextend()[/color]] //在这里调用grid
         }).show();
         }
       }  
    } 
});

var tabs=new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,

enableTabScroll:true,
defaults: {autoScroll:true}
});
//以下是我的W E S N 4个方向的panel
var viewport = new Ext.Viewport({
layout: 'border',
items: [
// create instance immediately
new Ext.BoxComponent({
region: 'north',
height: 32, // give north and south regions a height
autoEl: {
tag: 'div',
html:'

north - generally for menus, toolbars and/or advertisements

'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
id:'south_panel',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title: 'South',
margins: '0 0 0 0'
}, {
region: 'east',
id:'east-panel',

title: 'East Side',
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
layout: 'fit',
items:

new Ext.TabPanel({
border: false,
activeTab: 1,
tabPosition: 'bottom',
items: [{
html: '

A TabPanel component can be a region.

',
title: 'A Tab',
autoScroll: true
}, new Ext.grid.PropertyGrid({
title: 'Property Grid',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": new Date(Date.parse('10/15/2006')),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
})
}, {
region: 'west',
id: 'west-panel',
title: 'West',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '0 0 0 5',
layout: {
type: 'accordion',
animate: true
},
items: [
treeTR,
treeTP,
treeTL,
{
contentEl: '',
title: 'Defect Track',
border: false,
iconCls: 'nav'
},{
contentEl: '',
title: 'Test Report',
border: false,
iconCls: 'nav'
}
],layoutConfig:{
animate:true
}
},
[b]tabs[/b] ]
});

[/code]
tbar2 就是显示不出来
小弟刚学EXT，快要疯了 请达人帮我看下 帮我改下代码 实在是找不出问题了

Answer 1

啊，终于测试可以用了，主要是要在监听器中render；
测试代码如下：
[code="java"]Ext.onReady(function () {
var data = [
['rowen', 'hohai', 'basketball', '2004-11-01'],
['yyy', 'hohai', 'football', '2004-01-11'],
['ysc', 'hohai', 'pingpong', '2004-01-21'],
['yww', 'hohai', 'pingpong', '2004-01-31']];
var reader = new Ext.data.ArrayReader({},
[{
name: 'name'
},
{
name: 'school'
},
{
name: 'sport'
},
{
name: 'year',
type: 'date',
dateFormat: 'Y-m-d'
},
{
name: 'desc'
}]);
var store = new Ext.data.Store({
data: data,
reader: reader,
sortInfo: {
field: 'name',
direction: 'desc'
}
});

var cm = new Ext.grid.ColumnModel([{
    header: '姓名',
    sortable: true,
    width: 160,
    dataIndex: 'name'
},
{
    header: '入学年份',
    sortable: true,
    width: 160,
    dataIndex: 'school',
    editor: new Ext.form.TextField({
        allowBlank: false
    })
},
{
    header: '运动爱好',
    sortable: true,
    width: 160,
    dataIndex: 'sport'
},
{
    header: '入学年份',
    sortable: true,
    width: 160,
    dataIndex: 'year',
    renderer: Ext.util.Format.dateRenderer('Y-m-d')
}]);
var tbar2 = new Ext.Toolbar({
    //renderTo : grid.tbar,//其中grid是上边创建的grid容器
    items: ['第二行工具栏', '-', {
        text: '查询',
        iconCls: 'search'
    },
    '-']
});
var grid = new Ext.grid.GridPanel({
    title: 'groupGrid',
    store: store,
    cm: cm,
    width: 600,
    height: 500,
    frame: true,
    //draggable :true,
    enableDragDrop: true,
    tbar: [{
        id: 'newWindow',
        text: '票据入库',
        iconCls: 'add',
        handler: function () {
            showMemerAddWindow(); //显示表单所在窗体
        }
    }],
    listeners: {
        'render': function () {
            tbar2.render(this.tbar); //add one tbar      
            //twoTbar.render(this.tbar); //add two tbar      
            // threeTbar.render(this.tbar); //add three tbar      
        }
    }

});
var win = new Ext.Window({
    title: '墨客剑谍之演示多行tbar',
    width: 500,
    height: 300,
    modal: false,
    renterTo: Ext.getBody(),
    items: [
    grid]
});

win.show();

});[/code]