Adding component to container doesn't work

Question

I could hardly found an easier example but for some unknown reason i have problems with this few lines of code. I dynamically create buttons and add them to my container to the end.

I don't know why but only the first button is added. Please help

Code:

var buttonCount = this.getFoldersContainer().query('button').length;
var button = Ext.create('Ext.button.Button');

button.id = 'folderButton' + record.get('id');
button.setText(record.get('name') + " >>");

console.debug('count');
console.debug(buttonCount);

this.getFoldersContainer().insert(buttonCount,button);

I created a new blank project with only this functionality and it works fine. I don't have a clue what could be causing this in my existing project.

insert method inserts component at specified index, to add multiple components use add method — MMT
– MMT, Commented Jun 20, 2014 at 11:08
Sorry but your comment isn't very helpful. I need the insert method — Jacob
– Jacob, Commented Jun 20, 2014 at 11:54
You are giving insert index as button length, which will insert at the end of container & add method will also add the component the end — MMT
– MMT, Commented Jun 20, 2014 at 12:09
The add component is adding elements to the start. At least in my case and only one containers with 'auto' layout. — Jacob
– Jacob, Commented Jun 20, 2014 at 12:28
There's not enough information here. You need to post a test case. — Evan Trimboli
– Evan Trimboli, Commented Jun 23, 2014 at 6:27

sra · Accepted Answer · 2014-06-25 07:03:07Z

1

+50

First you should be sure that all buttons get a application wide unique id! Next is that the id should be present at construction time of the button (in your case it will not be critical but I recommend it). It makes no sense when you are saying that add() would insert at the beginning, because it always insert at the end!

// ....getFoldersContainer().query('button').length; // count all the items!!
// you may do a check if the id is unique while debugging
if(Ext.getCmp('folderButton' + record.get('id')) != null)
    console.error('Id duplicated! >> ','folderButton' + record.get('id'))
var ct = this.getFoldersContainer(),
    itemCount = ct.items.getCount(), 
    button = Ext.create('Ext.button.Button', {text:record.get('name') + " >>",id:'folderButton' + record.get('id')});

ct.insert(itemCount > 0 ? --itemCount : itemCount ,button);
// if you just want to insert at the end you will be fine with 
// ct.add(button);

answered Jun 25, 2014 at 7:03

sra

24k8 gold badges59 silver badges89 bronze badges

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

1 Comment

Jacob Over a year ago

The id's were causing the problems

Collectives™ on Stack Overflow

Adding component to container doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related