PDA

View Full Version : Ext.Panel add new templated item after initial update



francescosyd
26 Dec 2010, 10:03 PM
Hi all,

I have a templated Ext.Panel that gets updated from an array of JSON items using the .update(items) method of the Ext.Panel. This is all working fine.

I would like to append/add new items the panel. Here's the code I'm using to add a new item to the panel:

var convoPanel = Ext.getCmp("convo"); //this is the Ext.Panel
convoPanel.add(item);
convoPanel.doLayout();

For some reason the item doesn't get added/templated to the Ext.Panel. If I call convoPanel.update(item); then the Ext.Panel will redraw but with only the new single item. All previous items are overridden.

Has anyone got any suggestions on how I could make this work?

thanks

Francesco

francescosyd
27 Dec 2010, 6:27 PM
Hi all,

I found a solution to this issue. An Ext.XTemplate has an append method which will append parsed output to a target html element.

Here's the working code to append items to a templated panel:


myTemplate.append(Ext.getCmp("myPanelId").getTargetEl(), myJSONItem);


In my case I wanted to get a component Ext.Panel so I used the code Ext.getCmp("myPanelId").getTargetEl(). The method getTargetEl() gets the correct nested div of the Ext.Panel where the actual items are rendered to. Then I passed in myJSONItem object as the second parameter to the append method and presto! The new item was appended to the Ext.Panel.