Custom component with 'multiple inheritance'

[Spenna]

Hi. I'm finding myself copy-pasting a lot of the same code for my views in a new MVC app i'm developing.
The common items are windows with gridpanel, which displays records that are edited via modal windows with forms.
I'd like to abstract these into my own components, i.e 'FormWin' (modal window with a formpanel), but i can't figure out how to dynamically override the internal items of the form inside the abstracted window.
This is my base class (simplified a bit for the sake of readability, important parts bolded)

Ext.define('App.view.Form', {
    extend: 'Ext.window.Window',
    layout: 'fit',
    modal : true,
    width : 325,
    autoShow: true,
    border : false,
    loadRecord : function(record) {
        this.setTitle((record.phantom?'Opprett <recordtype>':'Rediger <recordtype>'));
        this.down('button[action=create]').setVisible(record.phantom);
        this.down('button[action=save]').setVisible(!record.phantom);
        this.down('form').loadRecord(record);
    },
    initComponent: function() {

        this.items = [
            {
                frame : true,
                xtype: 'form',
                defaults : {
                    xtype : 'textfield',
                    msgTarget : 'side',
                    anchor : '100%'
                },
                items: [                        // This is essentially what i want to override in subclasses of this component
                    {
                        name : 'name',
                        xtype : 'textfield',
                        fieldLabel: 'Generic item' // Just something as default - should always be overridden
                    }
                ]
            }
        ];
        this.buttons = [
            {
                text: 'Create',
                action: 'create'
            },{
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                action: 'cancel',
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

And this illustrates how i'd like to extend my component in the app

Ext.define('App.view.user.Form', {
    extend: 'App.view.Form',
    alias : 'widget.userform',
    loadRecord : function(record) {
        this.down('form').getForm().findField('new_password').allowBlank = !record.phantom;
        this.down('form').getForm().findField('new_password').emptyText = (record.phantom?'':'Only fill out if you want to change password');
        this.callParent(arguments)
    },
    initComponent: function() {
        
         this.items[0].items = [ // I just want to override the items of this windows contained form
            {
                name : 'name',
                fieldLabel: 'Navn'
            },
            {
                name : 'username',
                fieldLabel: 'Brukernavn'
            },
            {
                name : 'new_password',
                fieldLabel: 'Passord'
            }
        ];

        this.callParent(arguments);
    }
});

Anyone have a clue how to accomplish this?

[mitchellsimoens]

What do you want to override it with? How to tell to do some items and not others?

[Spenna]

I want to override all items in the inner 'form' of the extended window, but inherit the rest of the form-config.

[mitchellsimoens]

So build different items based on a property being set or create an abstract class and have subclasses

[Spenna]

Ok, thought there might was an 'extish' way of doing this, i.e ApplyIf recursivly on objects or something.
But your solution works, so thanks!

[christophe.braud]

Did you try something like this?

initComponent: function() {
    var me = this;
    
    Ext.apply(me, {
        items: [{
            frame : true,
            xtype: 'form',
            defaults : {
                xtype : 'textfield',
                msgTarget : 'side',
                anchor : '100%'
            },
            items: [{
                name : 'name',
                xtype : 'textfield',
                fieldLabel: 'Generic item'
            }]
        }],
        buttons: [{
            text: 'Create',
            action: 'create'
        },{
            text: 'Save',
            action: 'save'
        },{
            text: 'Cancel',
            action: 'cancel',
            scope: this,
            handler: this.close
        }]        
    });

    me.callParent(arguments);    
}