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
'A TabPanel component can be a region.
',[/code]
tbar2 就是显示不出来
小弟刚学EXT，快要疯了 请达人帮我看下 帮我改下代码 实在是找不出问题了
啊，终于测试可以用了，主要是要在监听器中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]
测试了下，gridpanel的确有问题，不过换做panel就不会有问题；
下面这个是panel中多个tbar示例
[code="java"]Ext.onReady(function () {
var oneTbar = new Ext.Toolbar({
items: [{
text: '复制'
},
{
text: '粘贴'
}]
});
var twoTbar = new Ext.Toolbar({
items: [
new Ext.Toolbar.TextItem('工具栏：') //显示文本
]
});
var threeTbar = new Ext.Toolbar({
items: [{
xtype: "tbfill"
},
//后面的tools显示在右边
{
pressed: true,
text: '刷新'
}]
});
var win = new Ext.Window({
title: '墨客剑谍之演示多行tbar',
width: 500,
height: 300,
modal: false,
renterTo: Ext.getBody(),
items: [{
xtype: 'panel',
tbar: [{
text: '添加'
},
'-', {
text: '删除'
},
'-', {
text: '修改'
}],
listeners: {
'render': function () {
oneTbar.render(this.tbar); //add one tbar
twoTbar.render(this.tbar); //add two tbar
threeTbar.render(this.tbar); //add three tbar
}
}
}]
});
win.show();
});[/code]