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

Question

我需要一些关于以下方面的建议。

背景：

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

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

Ext.应用程序（{ 应用程序：'testmixin'， autoCreateViewport: 真，

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


}

    });

是否可以在父类中添加一个项目，它会通过继承自动添加到子类中？

谢谢 热血

Answer 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