Extjs 5.1 Dynamic addition of container to panel

Question

What i am trying to do is dynamically add container to panel on click of button.

1st instance of container gets added and can be seen in the panel.items.length

2nd instance onwards the panel.items.length doesn't change. but the panel can be seen in dom and on screen.

Just wanted to know why the panel.items.length is not increasing. Is it a bug?

Fiddler link https://fiddle.sencha.com/#fiddle/p3u

Check for the line :

console.log(qitems);

below debugger; it is set to questionsblock.items.length that i am talking about.

Answer 1

Remove the itemId from QuestionTemplate and remove renderTo from the new instance.

Your click handler should look like this:

listeners: {
    'click': function(button) {
        var questionPanel = button.up('form').down('#questionsblock'),
            qitems = questionPanel.items.length,
            questiontemplate = Ext.create('QuestionTemplate', {
            qid: qitems,
            questiontype: 'text'
        });
        console.log(qitems);
        questionPanel.add(questiontemplate);
        questionPanel.doLayout();
    }
}

Check this fiddle: https://fiddle.sencha.com/#fiddle/p47