tutorial on the use of Egret egret.gui.List

Tool: Egretwing

Description

List component

Itemrender List Item Component

Here's how to bind the data to the list and correspond to the Itemrender display.

/** * created by haocao on 15/6/25. */class  friendslistcase  extends egret.gui.skinnablecomponent{    public constructor () {         super ();         this.skinname  = skins.scene.FriendsListSkin;        //  Initialize data          this.initlistdata ();    }    list    public listview:egret.gui.list;    //of the  //  binding interface   Data array    private datasource:array<any> = [];     private initlistdata ():void {        for  ( var i:number = 1; i < 50; i++)  {            thiS.datasource.push ({name:  "name" +i,phone: "A" +I,QQ: "B" +i});         }    }    public partadded (Partname:string, instance:any): Void {        super.partadded (partname, instance);         if  (Instance == this.listview)  {             //  Binding Data Sources              this.listview.dataprovider = new egret.gui.arraycollection ( This.datasource);                        //  binding itemview             this.listview.itemrenderer= new egret.gui.classfactory ( Frienditemrender);          }    }} 

/** * *  @caohao   * */class FriendItemRender extends  egret.gui.itemrenderer{        public lname:egret.gui.label;     PUBLIC LPHONE:EGRET.GUI.LABEL;    PUBLIC LQQ: Egret.gui.label;        public constructor ()  {         super ();        //  Skin name          this.skinName = skins.scene.FriendsListItemSkin;         this.touchChildren = true;    }         public datachanged ():void{         //  map data to Components         this.lname.text =  this.data.name;        this.lphone.text = this.data.phone;         this.lqq.text = this.data.qq;    }    }

Eventually:

Reference article:

Http://bbs.egret-labs.org/thread-1055-1-1.html

tutorial on the use of Egret egret.gui.List