1. List组件类继承自DataView组件类的一个子类,因此DataView组建的所有配置选项、事件及方法均可被List组件直接继承使用。使用Ext.dataView.List类来定义List组件,类的别名为Ext.List,xtype值为list。
---------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------
定义Model
-----------------------
list1.js
// JavaScript Document
Ext.define('Oreilly.model.list1',{
extend:'Ext.data.Model' ,
config:{
fields:['firstname','lastname','englishlastname']
}
});
------------------------------------------------------------------------------------------------------------------
定义Store
-----------------------
list1.js
// JavaScript Document
Ext.define('Oreilly.store.list1',{
extend:'Ext.data.Store',
//alias:'store.list1',
config:{
model:'Oreilly.model.list1',
grouper:function(record){//对数据进行分组
return record.get('englishlastname')[0]//按照englishlastname英文字母第一个的顺序进行分组
},
data:[
{firstname:'罗',lastname:'晓丽',englishlastname:'luo'},
{firstname:'王',lastname:'晶晶',englishlastname:'wang'},
{firstname:'罗',lastname:'小荣',englishlastname:'luo'},
{firstname:'沈',lastname:'婷',englishlastname:'shen'},
{firstname:'王',lastname:'丽娟',englishlastname:'wang'},
{firstname:'米',lastname:'老头',englishlastname:'mi'},
{firstname:'小',lastname:'还丹',englishlastname:'xiao'},
{firstname:'张',lastname:'清忘',englishlastname:'zhang'},
{firstname:'罗',lastname:'晓丽',englishlastname:'luo'}
]
}
});
----------------------------------------------
app.js
launch: function() {
var list1=Ext.create('Ext.List',{
store:'list1',
itemTpl:'<div>{firstname}{lastname}</div>',
grouped:true,////对数据进行分组,具体如何分组定义在store里面
indexBar:true,//分组后显示分组工具条
onItemDisclosure:function(record,element,index,e){//这个方法,让列表项中的每一项后面都有一个箭头,单击这个箭头,执行对应的方法
Ext.Msg.alert("提示","您点击了"+record.get('firstname'));
}
});
Ext.Viewport.add(list1);
},
-------------------------------------------------------------------