Sencha Touch 2:是否可以实现视图对象的继承?

时间:2013-04-03 18:29:37

标签: extjs sencha-touch sencha-touch-2

我需要就以下方面提出一些建议。

背景

我正在研究Sencha 2 MVC应用程序。 在我的应用程序中,我在几个屏幕上有一个工具栏。 目前,我已经为工具栏创建了一个类,然后在所需的视图上使用xType将工具栏添加为xType:'customizedToolbar'。 但是,我想要声明一个定义了这个工具栏的父类,然后从所有其他子类扩展这个父类,这样我就可以避免每次使用xType添加工具栏。

例如,下面是示例应用程序

Ext.application({             应用程序: 'testmixin',             autoCreateViewport:true,

        launch: function()    {

// Parent Class
        Ext.define('MyParentClass', {
            extend: Ext.Panel,
                mixinConfig: {
                        id: 'myMixinIdentifier'
                         },
                config: {
                // Is there a way that the items defined in this class will be added in the child class         
                items:[

                    {
                        xtype : 'emailfield',
                        name : 'name',
                        id : 'userName',
                        placeHolder : 'Email',

                    },

                    ]

                    },


                });


                // Main Class
    Ext.define('MyMainClass', {
    // Benefit of using mixins is that you can add to your class with one
    // or more mixins, rather than by extending another class
            extend: Ext.Panel,
            mixins: {
                myMixinIdentifier: 'MyParentClass'
            },

        constructor: function(config) {
            this.callParent(arguments);
            this.sample();
            },
        });


    var panel = Ext.create('MyMainClass');
            panel.test('abc');
            panel.test1('abc');
            Ext.Viewport.add(panel);


}

    });

是否可以在Parent类中添加一个项目,它将通过继承自动添加到子类中?

由于   Gendaful

1 个答案:

答案 0 :(得分:1)

以下代码不使用混合,而是使用基本类继承:

Ext.Loader.setConfig({
    enabled : true
});

Ext.application({
    name : ('SF' || 'SenchaFiddle'),

    launch : function() {

        Ext.define('PanelWithToolbar', {
            extend: 'Ext.Container',
            xtype: 'panelwithtoolbar',

            config: {
                items: [{
                    xtype: 'toolbar',
                    docked: 'top'
                }]
            }
        });

        Ext.define('PanelA', {
            extend: 'PanelWithToolbar',
            xtype: 'panela'
        });

        Ext.define('PanelB', {
            extend: 'PanelWithToolbar',
            xtype: 'panelb'
        });

        Ext.create('Ext.TabPanel', {
            fullscreen: true,
            tabBarPosition: 'bottom',

            defaults: {
                styleHtmlContent: true
            },

            items: [
                {
                    xtype: 'panela',
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Home Screen'
                },
                {
                    xtype: 'panelb',
                    title: 'Contact',
                    iconCls: 'user',
                    html: 'Contact Screen'
                }
            ]
        });
    }
});

Here is the fiddle