CODEWITHSUNDEEP
javascriptextjsextjs4dom-eventsjavascript-framework
Ravi
Ravi

Reputation: 4075

Dynamically adding extjs items to field container

I am using a extjs field container for my application where I have details, funds, dependants sections in the form. In the funds and dependants section I have a button 'add another' which is intended to add a new line item every time when button is clicked.

This is the form i have created http://jsbin.com/evevod/4/edit

I am new to extjs4. Can anyone please help me how to create a item dynamically onclick?

Upvotes: 3

Views: 11217

Answers (2)

rgarg
rgarg

Reputation: 81

We can change the name of fields like this:

var container = this.up('fieldset'); 
var config = Ext.apply({}, container.initialConfig.items[0]);
config.fieldLabel = container.items.length+1;
config.items[0].name = 'fname' + config.fieldLabel;
config.items[1].name = 'lname' + config.fieldLabel;
config.items[2].name = 'title' + config.fieldLabel;

Upvotes: 1

Krzysztof
Krzysztof

Reputation: 16140

Below is example handler.

handler: function() {
    var container = this.up('fieldset');
    var config = Ext.apply({}, container.initialConfig.items[0]);
    config.fieldLabel = container.items.length + 1;
    container.add(config);
}

Basically it finds parent component which holds rows (which is fieldset), access initialConfig property, finds first line config in it (items[0]), makes shallow copy of config (Ext.apply) and adds it to container (container.add).

Working sample: http://jsbin.com/evevod/6/edit#preview

Upvotes: 10

Related Questions