首先是view层面的js上的内容
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
Ext.define(
'项目名.view.项目文件夹名.js名'
, {
extend:
'Ext.panel.Panel'
,
xtype:
'task_rightpanel'
,
//当前 view js的别名,方便定位
items:[
{
xtype:
'list'
,
//一个列表控件
itemId:
'topChart'
,
//声明一个子id 方便后面查找 ！重要
cls:
'x-listitem'
,
itemTpl: [
//不是所有的xtype控件都有itemTpl 可以去查API
'<span style="border-radius: 50%;height: 20px;width: 20px;display: inline-block;background:{color};">'
,
'<span style="display: block; color: #FFFFFF; width:19px;line-height: 21px; text-align: center">{number}</span>'
,
'</span>'
,
'<b>{UserName}</b> {Cnt}'
,
],
data: []
//设置好一个空的data
}
]
});
|
=======================
定位到我们的itemTpl
|
1
|
Ext.ComponentQuery.query(
'task_rightPanel'
)[0].down(
'#topChart'
)
//itemId的查找方法，也可以通过lookup定位 具体操作->百度
|
ajax获取的数据：
|
1
2
3
4
5
|
Utils.ajax(
'api地址'
，
function
(res){
//Utils.ajax是封装过的ajax，如果其他的 可以用jQuery的 $.ajax(api接口，function(){})
//若返回的res就是我们需要的样子 那就直接 itemTpl对象.setData,若不是想要的，那就处理下res
Ext.ComponentQuery.query(
'task_rightPanel'
)[0].down(
'#topChart'
).setData(res);
})
|