我的主要观点是
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,
}
]
}
});
我在intro.js
中调用了来自外部网址的json 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'
}]
})
});
我从回应得到的json如下
{"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"}]}
每当我保留静态字符串时,模板都会更新,否则模板不会更新。任何人都可以告诉我我要做什么..也有任何函数,如onload
而不是initcomponent
,因为我只想在调用此面板时调用ajax
答案 0 :(得分:1)
你这完全是错误的方式。而不是试图修复你的例子,看看这个:
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'
}]
})
});