Dynamically adding extjs items to field container

Question

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?

Krzysztof · Accepted Answer · 2012-02-22 16:30:57Z

10

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

answered Feb 22, 2012 at 16:30

Krzysztof

16.2k2 gold badges52 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ravi Over a year ago

Thanks, exactly of what i am looking for.

Ravi Over a year ago

Hi, i have implemented the same in the application but struggling with one issue. can we by default assign ID's to the fields of dependant & funds and on hitting 'add another' button (dependant & fund)item a new id should be dynamically generated for all the dependant & fund fields. e.g. we have title1, fname1, lname1 for the initial set of fields and we want to have title2, fname2, lname2, title3, fname3, lname3 etc etc as the IDs of the additional fields

Krzysztof Over a year ago

You can change names directly in handler or you can create some function which will create config for new row. Eg here I've created getDepConfig function.

Druid · Accepted Answer · 2012-07-10 07:53:21Z

1

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;

edited Jul 10, 2012 at 7:53

Druid

6,4634 gold badges44 silver badges57 bronze badges

answered Jul 6, 2012 at 6:44

rgarg

811 silver badge1 bronze badge

Collectives™ on Stack Overflow

Dynamically adding extjs items to field container

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related