PDA

View Full Version : Dynamically adding elements in ExtJs



jai@15
18 Aug 2013, 11:05 PM
Hi i am new extjs ,as per requirement of our product i am using ExtJS 4.1
here i have a requirement of adding fields dynamically to my form based on the ajax request result so i am using for loop here it is taking time for adding elements and displaying data so i am trying add loadmask but i am facing problem.
can some help me out of this issue or any other alternatives please suggest me .

Thank You :)

tobiu
18 Aug 2013, 11:25 PM
You should convince your company to not stick with 4.1 and go for the latest version instead.

The method add() supports arrays, so you do not need to use a for loop:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Panel-method-add

You could also manually use suspendLayout() and resumeLayout() in case there are too many items, but add with passing an array already does that internally:
http://docs.sencha.com/extjs/4.2.1/source/AbstractContainer.html#Ext-container-AbstractContainer-method-add

jai@15
19 Aug 2013, 1:33 AM
Thank you ,Actually i am creating objects in loops and using add method.
please find the below example code


for (var i = 1; i <dataArray.length; i++) {

var container = Ext.getCmp('addTOContainer');

var config = Ext.apply({}, container.initialConfig.items[0]);

config.id ='addTOContainerIDDD'+container.items.length;

config.items[0].items[0].items[4].name = 'addImg'+container.items.length;
config.items[0].items[0].items[4].id = 'addImg'+container.items.length;

config.items[0].items[0].items[5].name = 'deleteImg'+container.items.length;
config.items[0].items[0].items[5].id = 'deleteImg'+container.items.length;

config.items[0].items[1].name = 'competency'+container.items.length;
config.items[0].items[1].id = 'competency'+container.items.length;

config.items[0].items[2].name = 'snoId'+container.items.length;
config.items[0].items[2].id = 'snoId'+container.items.length;

config.items[0].items[5].items[0].items[0].items[2].name = 'empScoreSlider'+container.items.length;

config.items[0].items[5].items[0].items[0].items[2].id = 'empScoreSlider'+container.items.length;

config.items[0].items[5].items[0].items[0].items[4].name = 'empScoreValue'+container.items.length;

config.items[0].items[5].items[0].items[0].items[4].id = 'empScoreValue'+container.items.length;

config.items[0].items[5].items[0].items[2].name = 'empScorecomments'+container.items.length;

config.items[0].items[5].items[0].items[2].id = 'empScorecomments'+container.items.length;

config.items[0].items[5].items[2].items[0].items[2].name = 'mgrScoreSlider'+container.items.length;

config.items[0].items[5].items[2].items[0].items[2].id = 'mgrScoreSlider'+container.items.length;

config.items[0].items[5].items[2].items[0].items[4].name = 'mgrScoreValue'+container.items.length;

config.items[0].items[5].items[2].items[0].items[4].id = 'mgrScoreValue'+container.items.length;

config.items[0].items[5].items[2].items[2].name = 'mgrScorecomments'+container.items.length;

config.items[0].items[5].items[2].items[2].id = 'mgrScorecomments'+container.items.length;

config.items[0].items[5].items[2].items[3].name = 'referid'+container.items.length;

config.items[0].items[5].items[2].items[3].id = 'referid'+container.items.length;

container.add(config);
}

please let me know if i am using some false practice.

please help me how can we integrate 4.2.1 with 4.1
Thank You :)