Sencha Touch list, store (data source), model (models) detailed

//Job SearchExt.define (' App.model.Staff ', {extend:' Ext.data.Model ', config: {fields: [{name:' ID ', type:' int '        },        {            //User IDName: ' UID ', type:' int '        },        {            //nameName: ' FullName ', type:' String ', convert:function(V, record) {vardisplay =Record.data.display_name; if(Display = = 1) {                    returnv; } Else if(Display = = 2) {                    return' N ' +record.data.id; }                returnV.substring (0, 1) + ' * * '; }        },        {            //AgeName: ' Birthdate ', type:' int ', convert:function(V, record) {varTime =NewDate (). getFullYear (); returnTime-v; }        },        {            //Last name hidden degreeName: ' Display_name ', type:' String '        },        {            //full -time part-timeName: ' NATURE_CN ', type:' String '        },        {            //labelName: ' Tag ', type:' String ', convert:function(V, record) {if(!v) {return‘‘; }                varTagList = V.split (' | ')); varTag = [];  for(varIinchtaglist) {                    varj ={title:taglist[i].split (', ') [1]                    };                Tag.push (j); }                returntag; }        },        {            //EducationName: ' EDUCATION_CN ', type:' String '        },        {            //Work ExperienceName: ' EXPERIENCE_CN ', type:' String ', convert:function(V, record) {returnV! = "inexperienced"? V + ' experience ': v; }        },        {            //SexName: ' SEX_CN ', type:' String '        },        {            //AddressName: ' Householdaddress ', type:' String '        },        {            //Refresh TimeName: ' Refreshtime ', type:' String '        },        {            //expected positionName: ' Intention_jobs ', type:' String '        }]    }});

It is worth noting that the Convert method has two parameters where V is the value of the current field, and the record is the value of the entire model
Can be based on the requirements of processing data two times, for example, the value returned in the background is 0,1 and you want him to show the value is male, female this situation

Here's the store.

The code is as follows:

Ext.define (' App.store.StaffList ', {extend:' Ext.data.Store ', config: {model:' App.model.Staff ',//the corresponding data model, only the fields already defined in the model can be stored in the store, and no defined fields are storedStoreId: ' Stafflist ',//give him an ID so that the store is specified in the list. and by Ext.getstore (ID) to get the storeAutoLoad:false,//do not load data automatically when the index page startsPagesize:7,//want to pass a parameter in the background pagesize value is 7, here means to tell the background to show 7 data per page, for paging.         //There is also a parameter limit, which tells the background how many pages are currently displayed. proxy: {type:' Jsonp ',//The way the data is read back to the background, either JSONP or AjaxURL:MYUTIL.POSTURL + stafflist.ashx ',//The address of the request data reader: {type: "JSON",//Return Data format Rootproperty:' Result ',//The root node of the return data totalproperty:' Totalcounts '//Data total, backstage not give also nothing. But there's no way to determine if it's the last page. }}});

It should be noted that the role of pagesize is not to show how many data in the list each time, but to tell the background how many data you want to display each time, you want 7 back to you 10 is also possible, give you 10 list will show 10 data up

Just like the elementary school students asked her mother to pocket money, the pupils asked her mother to 5 pieces, the mother in a good mood to 10 pieces is also possible, a bad mood does not give. No matter how much, the pupils have to put the money in the lap.

For list can do a small extension

/** Custom List page*/Ext.define (' App.view.util.MyList ', {alternateclassname:' MyList ', Extend:' Ext.list ', Xtype:' MyList ', requires: [' Ext.plugin.ListPaging ', ' Ext.plugin.PullRefresh '], config: {cls:' List ',//Custom CSSplugins: [{xclass:' Ext.plugin.ListPaging ',//Paging PluginAutopaging:true,//whether to automatically load the next page of data when scrolling to the bottomNomorerecordstext: ' No more content ', Loadmoretext:' Load more ... '//load more buttons to display content}, {xclass:' Ext.plugin.PullRefresh ',//Drop -down refresh pluginLastupdatedtext: ' Last Refresh time: ', Loadingtext:' Load in ... ', Pullrefreshtext:' Drop-down can be manually refreshed ', Releaserefreshtext:' Release can be refreshed ', REFRESHFN:function(Loaded, arguments) {//The time the trigger starts to refresh, and the default effect is to refresh only the first page of data. No matter how much data is shown later,Loaded.getlist (). GetStore (). LoadPage (1);//This is handled, the trigger clears all data and reloads the first page of data. }}], Loadingtext:false,//Disable loading masks to prevent pages from stalling when jumping, using a uniform matte effectEmptytext: ' No more content '    }});

A list, that's all you got.

Ext.define (' App.view.job.StaffList ', {alternateclassname:' Stafflist ', Extend:' App.view.util.MyList ', requires: [' App.view.job.StaffInfo '], Xtype:' Stafflist ', config: {itemheight:68, Store:' Stafflist ', Itemtpl:NewExt.xtemplate (' <div class= ' left > ',            ' <div class= ' row ' >{fullname}</div><div class= ' row sm Grayf ' >{education_cn}-{EXPERIENCE_CN}-{ Nature_cn}</div><div class= "row sm Grayf" &GT;{SEX_CN}-{householdaddress}</div> ',        ' </div> ',        ' <div class= ' right ' ><div class= ' row grayf ' >{refreshtime}</div><div class= ' row sm OrangeF ' >{ Intention_jobs}</div></div> ')    }});

That's probably it, a picture of the drawings.

Transferred from: http://www.cnblogs.com/mlzs/p/3169893.html

Sencha Touch list, store (data source), model (models) detailed