Panel and GridPanel 添加多行tbar

在panel中，添加多行tbar还是比较简单的,直接
tbar.render(grid.tbar)//grid 是GridPanel对象
测试代码如下：

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();
});

然而在gridpanel中，却是要在grid中增加监听事件render，才能添加多行tbar

listeners: {
            'render': function () {
                tbar2.render(this.tbar); //add one tbar      
                }
        }

测试代码如下：

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();
});

评论

3 楼 wenxiang_tune 2009-11-24  

建议都贴效果图。。。这样比较直观

2 楼 atian25 2009-08-25  

不能通过嵌套panel来解决么

1 楼 atian25 2009-08-25  

无图无真相.

我总觉得这样不好,自己去添加的一个额外的东西.
父容器的布局管理器可能会出问题.