panel listerner's are not executing/working after panel.update

[ishwar1979]

Hi Guys,

I am trying to populate the panel items using ajax call. It works correctly , populates all the items from ajax result. but not executing any listerner. Here is my code


function getPanel(){
var fav_tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="resortWrap">',
'<div class="detail">',
'<h1>{name}</h1>',
'</div>',
'</tpl>'
);
var pan=new Ext.Panel({
fullscreen: true,
scroll: 'horizontal',
layout: {
type: 'hbox',
align: 'stretch'
},
tpl: fav_tpl,
baseCls: "infoWrap",
listeners: {
afterrender: function(c) {
alert('Panel afterrender');
},
afterlayout: function(c) {
lert('Panel afterlayout');
}
}
});
pan.show();
Ext.Ajax.request({
url: 'js/data.json',
method: "GET",
success: function(data){
data = Ext.util.JSON.decode(data.responseText);
pan.update(data);
}
});

}

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
getPanel();
}
});

Can someone helps me to figure out what exactly I am doing wrong or what I need to do it to make these events working.

Thanks in advance.

[evant]

Neither of those events are going to fire.

1) Because the panel is already rendered, so afterrender will only fire once.
2) The panel doesn't have any layout, so it won't fire an afterlayout.

I assume that you want something to happen when the panel content is updated. Why not just do it in the method? You ~know~ when the panel content updates because you're calling a method to update the content!

[ishwar1979]

Agree, I can do it in the method after calling update but somehow my callback on pan.update is not working .so I don't know when exactly I need to attach events. I have tried. I have tried implementing callback by referring this link
http://dev.sencha.com/deploy/dev/docs/?class=Ext.Element&member=update

tried

pan.update(data, true, function (p) { alert('update');});


pan.update(data, false, function (p) { alert('update');});


pan.update(data, function (p) { alert('update');});

none of these works.

Can you please help me to figure out the problem?

[evant]

Why would you do that?

Just call it ~after~ you call update:



p.update('x');
console.log('update is finished');