1.list组件基本功能显示
2.itemDisclosure事件
3.在List组件中使用索引栏
list组件使用XTemplate模板来显示数据,同时与数据仓库进行绑定,当数据仓库中的数据发生改变时,List组件会即时将这个改变现实在页面上。
1. List组件类继承自DataView组件类的一个子类,因此DataView组建的所有配置选项、事件及方法均可被List组件直接继承使用。使用Ext.dataView.List类来定义List组件,类的别名为Ext.List,xtype值为list。
2. itemDisclosure事件:列表中每一个列表项末尾都会显示一个箭头图标,单击图标触发该事件
3.使用grouper对list事件进行分组,在下一小节当中会详细介绍
4.grouped:true,定义使用分组组件
indexBar:true, 使用索引栏
---------------------------------------------------------------------------------------------------------------------
![]() ![]() ------------------------------------------------------------------------------------------------------------------
定义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); }, ------------------------------------------------------------------- |
|
来自: I_T_馆 > 《Sencha Touch》