Dynamically Setting config options

[sprakash]

I am building a dynamic form builder with EXTJS 4.1
I have a property grid with some properties. and a preview of a component (in this case a number field).
On edit of the properties, i would like to see the updated property values.
for example, initially no min value is set in the preview.
if i edit th min value in property grid, it should be set to the component used for preview.

see the image below.
37658

I use the code as:
var numberEditorProperties=[
{configName:'fieldLabel',name:'Field Label',value:'',type:'string'},
{configName:'minValue',name:'Min Value',value:'',type:'number'},
{configName:'minText',name:'Min Value Text',value:'',type:'number'},
{configName:'maxValue',name:'Max Value',value:'',type:'number'},
{configName:'maxText',name:'Max Value Text',value:'',type:'string'},
{configName:'formatPattern',name:'Number Format',value:'0,000',type:'string'}
];

var propertyStore = Ext.create('Ext.data.Store', {
model: 'OptionProperties',
data:numberEditorProperties,
autoLoad: true
});


var properties=Ext.create('Ext.grid.property.Grid', {
title: 'Option Configuration',
width: 300,
store:propertyStore,
listeners:{
edit:function(ed,e,eo){
e.record.commit();
e.grid.applyPreview();
}
},
applyPreview:function(){
var config={};
this.store.each(function(r){
config[r.data.configName]=r.data.configName;
config[r.data.configName]=r.data.value;
});

var target=Ext.getCmp('numberFieldPreview');
if(target)// I tried the following.
{
//var targetCmp=target.cloneConfig();
//Ext.apply(config,{id:'numberFieldPreview'})
//Ext.apply(targetCmp,config);
//target.setConfig(targetConfig);
//Ext.getCmp('numberFieldPreview').destroy();
//Ext.getCmp('numberEditorContainer').insert(1,targetCmp);
//Ext.getCmp('numberFieldPreview').doComponentLayout( );
}

}
});




var numberEditorContainer={
xtype:'container',
id:'numberEditorContainer',
items:[properties,{
xtype:'numberfield',
id:'numberFieldPreview',
padding:3,
anchor:'100%',
msgTarget:'qtip',
height:'55',
fieldLabel:'Number Field'
}]
};

[evant]

If you want Ext help, please post in the Ext help forums. Moving.

[iplanit]

No one gave information for this since August to sprakash, but probably it is not complicated to do. is it ?


If you want Ext help, please post in the Ext help forums. Moving.

[kaendsle]

Most components have methods like "setValue" or "setWidth" that allow you to change their behavior or appearance after they are instantiated. You should consult the documentation to see if the configuration you want to change has a corresponding "setSomething" method.

If the component you want to dynamically change does not have a setSomething() method for the configuration you want to change, you may need to replace that component with a new one. This is where the cloneConfig() method of components comes in handy. You can ask the component's parent to remove the object, clone its configuration, alter that configuration, and insert a new component that does what you want.

Something like following:


// Get the target child component
oldComponent = Ext.ComponentQuery.query('testcomponentxtype');

// Get its parent
parent = oldComponent.ownerCt;

// remove() and cloneConfig() both return components; chain them
newComponent = parent.remove(oldComponent).cloneConfig({
minValue: myMinValue,
maxValue: myMaxValue
});

parent.insert(oldIndex, newComponent);
parent.doLayout();