0

While adding component dynamically, 'this.container is null' is displayed in firebug.

I have a window with some combo boxes say combo1, combo2, combo3 and a label. Based on the selection value of combo3 the 'label' field is removed and replaced with combobox or text field. i do this my using 

form.items.removeAt(4);
form.items.insert(4, newItem); #here newItem can be combox/textfield
form.doLayout();

The form resides inside a panel.

When above lines are execueted. 'this.container is null' is displayed and component fails to insert/add in appropiate position.

Any suggestions?

AJJ
  • 3,570
  • 7
  • 43
  • 76

2 Answers2

0

Try to comment those lines line-by-line to see which one produces error like 

form.items.removeAt(4);
//form.items.insert(4, newItem); #here newItem can be combox/textfield
//form.doLayout();

form.items.removeAt(4);
form.items.insert(4, newItem); #here newItem can be combox/textfield
//form.doLayout();

form.items.removeAt(4);
form.items.insert(4, newItem); #here newItem can be combox/textfield
form.doLayout();

Your problem could take place because of inserted/replaced object is no yet prepared when you try to insert it. Give us your newItem initilization code.

Upd

Or you can wrap your changing components (label, combobox, textfields) in a panel with card layout. And on change of combo3 simply select exact card in that panel.

s.webbandit
  • 16,332
  • 16
  • 58
  • 82
  • Thanks for your response. The error occurrs in form.doLayout(). The component gets inserted successfully. But while doLayout() the error is displayed. – AJJ Aug 22 '12 at 03:01
  • What is your ExtJS version? What about using `ext-all-debug.js` or `ext-all-dev.js`? Give us debug info from firebug. – s.webbandit Aug 22 '12 at 06:07
  • Using Extjs 3.4. Using ext-all-debug.js, the errors occurs in render: function (conatiner, position)() at the line position=this.container.dom.addChild[position] – AJJ Aug 22 '12 at 06:23
  • The error the thrown at 11362: position = this.container.dom.childNodes[position]; in ext-all-debug.js – AJJ Aug 22 '12 at 06:54
  • 1
    And without `doLayout()` invoke you can't solve your task? Try to simply `replace()` your label with another component. – s.webbandit Aug 22 '12 at 08:00
  • Thanks for your answer. i found a temporary solution similar to your updated answer. Intially i will have the combo3/textfield hidden and based on selection from combo2, the combo3/textfield will be set to visible. – AJJ Aug 22 '12 at 09:32
  • i cannot accept a answer here for the question asked. May be your answers will work, but it does not help me in my framework. Any how your comment on replace() has given me the hint for solution of hide and replace. Thanks again. – AJJ Aug 23 '12 at 05:04
0

You should not be modifying the underlying items collection. Use the remove/insert methods on the container.

Evan Trimboli
  • 29,900
  • 6
  • 45
  • 66