您的位置:首页 > Web前端 > JavaScript

Extjs4.1:由json数据生成icon列表并对单击事件弹出提示

2013-02-01 16:30 609 查看


var data = [
["柱状图", "column_chart.jpg"],
["饼图", "custom_bar_chart.jpg"],
["连线图", "filled_radar_chart.jpg"],
];

Ext.define('model_icon', {
extend: 'Ext.data.Model',
fields: [
'name',
'pic'
]
});

var store_icon = Ext.create('Ext.data.Store', {
model: 'model_icon',
sortInfo: {
field    : 'name',
direction: 'ASC'
},
data: data
});

var dataview = Ext.create('Ext.view.View', {
deferInitialRefresh: false,
store: store_icon,
tpl  : Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="phone">',
'<img width="64" height="64" src="images/{pic}" />',
'<strong>{name}</strong>',
'</div>',
'</tpl>'
),

id: 'phones',
listeners: {
selectionchange: function(dataview, selections) {
//Ext.Msg.alert('提示','你点击了记录:');
var selected = selections[0];
if (selected) {
Ext.Msg.alert('提示','你选中了图标。' + selected.get('name') );
}
}
},

itemSelector: 'div.phone',
overItemCls : 'phone-hover',
multiSelect : true,
autoScroll  : true
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: