PDA

View Full Version : Issues with extending form panel



Renoken
10 Apr 2013, 12:55 AM
Hello,

I'm having trouble with extending a form panel. Basically, I need to use a same kind of form panel in different situations, but depending on the situation, other fields are added to the form. All the forms though have the same set of fields in common.

What I have now for my own form that extends Ext.form.Panel:

Ext.define('DynamicForms.form.Panel', { extend: 'Ext.form.Panel',
alias: 'dynamicforms.formpanel',
config: {
border: false,
title: 'Properties',
bodyPadding: 5,
formControlConfig: { key: 'test', value: 'test' }
},
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
constructor: function (cnfg) {
this.callParent(arguments);
this.initConfig(cnfg);
this.addEvents('configchanged');
},
setFormControlConfig: function (newConfig) {
this.formControlConfig = newConfig;
if (newConfig.id != undefined) {
this.getForm().findField('id').setValue(newConfig.id);
this.getForm().findField('fieldLabel').setValue(newConfig.fieldLabel);
this.getForm().findField('anchor').setValue(parseInt(newConfig.anchor.replace('%', '')));
this.getForm().findField('allowBlank').setValue(newConfig.allowBlank);
}
this.fireEvent('configchanged', this, newConfig);
},
items: [{
fieldLabel: 'Id',
name: 'id',
allowBlank: false,
minLength: 5,
maxLength: 20,
vtype: 'alphanum'
}, {
fieldLabel: 'Label',
name: 'fieldLabel',
allowBlank: false,
enableKeyEvents: true,
listeners: {
keyup: function (source, e, eOpts) {
Ext.getCmp(this.up('form').formControlConfig.id).setFieldLabel(source.getValue().toString());
Ext.getCmp(this.up('form').formControlConfig.id).initialConfig.fieldLabel = source.getValue().toString();
}
}
}, {
xtype: 'checkbox',
fieldLabel: 'Optional',
name: 'allowBlank',
listeners: {
change: function (source, newValue, oldValue, eOpts) {
Ext.getCmp(this.up('form').formControlConfig.id).allowBlank = newValue;
Ext.getCmp(this.up('form').formControlConfig.id).initialConfig.allowBlank = newValue;
Ext.getCmp("editModeForm").doLayout();
Ext.getCmp("editModeForm").getForm().isValid();
}
}
}, {
xtype: 'slider',
fieldLabel: 'Width',
name: 'anchor',
listeners: {
change: function (slider, newValue, thumb, eOpts) {
Ext.getCmp(this.up('form').formControlConfig.id).anchor = newValue.toString() + '%';
Ext.getCmp(this.up('form').formControlConfig.id).initialConfig.anchor = newValue.toString() + '%';
Ext.getCmp("editModeForm").doLayout();
}
}
}]
});




On another location in the code, I try to use this form panel, and add additional fields to it, but that is not working:


TextFieldCardPanel = Ext.create('DynamicForms.form.Panel', { id: 'propertyGridTextField',
layout: 'anchor',
items: [{
fieldLabel: 'Initial value',
name: 'value',
allowBlank: true,
enableKeyEvents: true,
listeners: {
keyup: function (source, e, eOpts) {
Ext.getCmp(this.up('form').formControlConfig.id).setValue(source.getValue().toString());
Ext.getCmp(this.up('form').formControlConfig.id).initialConfig.value = source.getValue().toString();
}
}
}],
listeners: {
configchanged: function (source, config) {
if (config.id != undefined) {
this.getForm().findField('value').setValue(config.value);
}
}
}
});




This ends up with a new form with only one field (because I actually overwrite the items collection), but I tried other ways, but I can't seem to get it work.... (or I just don't understand it ;-)).

Is there anyone who could give me a quick head-start...

Thanks,

Reno

slemmon
11 Apr 2013, 1:56 PM
When defining your subclass you can set the items config programmatically inside of the initComponent method. In that you can take any passed items and merge them with some default items.

Also, you won't commonly include a config inside of Ext.define() unless you're setting accessor methods for custom properties - a departure from the way classes are defined in Sencha Touch.

Since I'm afraid I don't know how to explain away initComponent all that elegantly here's a simple snippet to help illustrate:


Ext.define('MyForm1', {
extend: 'Ext.form.Panel'
, layout: 'anchor'


, initComponent: function () {
var items = this.items || [];
this.items = [{
xtype: 'textfield'
, fieldLabel: 'Field 1'
}].concat(items);


this.callParent(arguments);
}
});


Ext.create('MyForm1', {
renderTo: document.body
, items: [{
xtype: 'textfield'
, fieldLabel: 'Field 2'
}]
});