Panel and GridPanel 여러 줄 tbar 추가

5345 단어 ext
패널에 여러 줄 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();
});

좋은 웹페이지 즐겨찾기