List组件一：基本功能

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);
 
 
    },

    

-------------------------------------------------------------------