扩展extjs视图

时间:2013-03-14 20:05:15

标签: extjs extjs4

我需要使用相同的内容创建多个视图,只有一个网格与其他网格略有不同。

我的想法是创建一个基本视图,但我不知道如何在继承的类中更改此网格。

基地:

Ext.define('App.view.cadastro.FiltroBase',{
    extend: 'App.controls.CoWindow',
    alias: 'widget.filtrobase',
    modal: false,
    width: 800,
    height: 400,
    layout: 'vbox',
    items: [
        {
            xtype: 'container',
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            width: '100%',

            defaults: {
                padding: 4
            },
            items: [
                {
                    xtype: 'label',
                    text: i18n.procurarPor
                },
                {
                    xtype: 'combobox',
                    itemId: 'comboBox',
                    queryMode: 'local',
                    forceSelection: true,
                    width: 150
                },{
                    xtype: 'label',
                    text: 'Filtro:'
                },
                {
                    xtype: 'textfield',
                    itemId: 'filtro',
                    enableKeyEvents: true,
                    flex: 1
                },
                {
                    xtype: 'container',
                    width: 100,
                    layout: 'fit',
                    items: [
                        {
                            xtype: 'button',
                            text: i18n.pesquisar,
                            action: 'pesquisar',
                            itemId: 'botaoPesquisa',
                            icon: 'assets/img/16/find.png'
                        }
                    ]
                }

            ]
        },
        {
            xtype: 'grid',   ******************
            flex: 1,
            width: '100%',
            itemId: 'grid',
            columns: [
                {
                    text: i18n.nome,
                    dataIndex: 'nome',
                    flex: 1
                }
            ],
            dockedItems: [{
                xtype: 'pagingtoolbar',
                dock: 'bottom',
                displayInfo: true
            }]*****************
        }
    ],
    buttons: [
        {
            text: i18n.incluir,
            action: 'incluir',
            itemId: 'botaoIncluir',
            icon: 'assets/img/16/new.png'
        },
        {
            text: i18n.editar,
            action: 'editar',
            itemId: 'botaoEditar',
            icon: 'assets/img/16/edit.png'
        }
    ]

});

1 个答案:

答案 0 :(得分:4)

一般的想法是做这样的事情:

Ext.define('BaseGrid', function(){
    initComponent: function(){
        this.columns = this.getColumns();
        this.callParent();
    },

    getColumns: Ext.emptyFn
});

Ext.define('SubGrid', {
    getColumns: function(){
        return [];
    }
});