PDA

View Full Version : Custom component with 'multiple inheritance'



Spenna
2 Nov 2011, 11:26 PM
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
3 Nov 2011, 7:11 AM
What do you want to override it with? How to tell to do some items and not others?

Spenna
3 Nov 2011, 11:06 PM
I want to override all items in the inner 'form' of the extended window, but inherit the rest of the form-config.

mitchellsimoens
4 Nov 2011, 4:06 AM
So build different items based on a property being set or create an abstract class and have subclasses

Spenna
4 Nov 2011, 4:53 AM
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
5 Nov 2011, 7:24 PM
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);
}