json data not updated in template - ajax

Question

My main view is
Ext.define("casta.view.Main", {
extend: 'Ext.tab.Panel',
apitoken:'NULL',
callbackdata:'NULL',
requires: [
'Ext.TitleBar',
'Ext.Video',
'casta.view.Intro'
],
config: {
tabBarPosition: 'top',
items: [
//intro.js actually need json rendering
{ title:'Intro',
xclass: 'casta.view.Intro' ,
iconCls:'user',
renderTo: document.body,
}
]
}
});
I have called json from external url like below in intro.js
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'username']
})
Ext.define('casta.view.Intro', {
extend: 'Ext.tab.Panel',
alias: 'widget.Intro',
requires: ['Ext.data.Store'],
itemTpl: '{id} - {username}',
initComponent: function(){
this.store = new Ext.data.Store({
autoLoad: true,
model: 'User',
proxy: {
type: 'ajax',
url: 'http://localhost:8000/api/casta/user/?format=json',
reader: {
type: 'json',
root: 'objects'
}
}
});
this.callParent();
}
});
Ext.onReady(function(){
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'My View',
xtype: 'Intro'
}]
})
});
The json i got from response is as follows
{"meta": {"limit": 20, "next": null, "offset": 0, "previous": null, "total_count": 2}, "objects": [{"date_joined": "2012-05-18T15:44:54", "first_name": "", "id": 1, "last_login": "2012-05-18T15:44:54", "last_name": "", "resource_uri": "/api/casta/user/1/", "username": "admin"}, {"date_joined": "2012-05-21T12:05:00", "first_name": "", "id": 29, "last_login": "2012-05-21T12:05:00", "last_name": "", "resource_uri": "/api/casta/user/29/", "username": "sumit"}]}
Whenever i keep static string , the template is updated , else the template is not updated . can anybody tell me what i have to do .. also is there any function like onload instead of initcomponent as i want to call ajax only when this panel is called

Answer 1

You're going about this totally the wrong way. Instead of trying to fix up your example, look at this:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'username']
})
Ext.define('MyView', {
extend: 'Ext.view.View',
alias: 'widget.myview',
requires: ['Ext.data.Store'],
itemTpl: '{id} - {username}',
initComponent: function(){
this.store = new Ext.data.Store({
autoLoad: true,
model: 'User',
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'objects'
}
}
});
this.callParent();
}
});
Ext.onReady(function(){
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'My View',
xtype: 'myview'
}]
})
});