sencha touch list(列表)、 store(數據源)、model(模型)詳解

先從model講起

代碼如下：

//求職
Ext.define('app.model.Staff', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
            name: 'id',
            type: 'int'
        },
        {
            //用戶id
            name: 'uid',
            type: 'int'
        },
        {
            //姓名
            name: 'fullname',
            type: 'string',
            convert: function (v, record) {
                var display = record.data.display_name;
                if (display == 1) {
                    return v;
                } else if (display == 2) {
                    return 'N' + record.data.id;
                }
                return v.substring(0, 1) + '**';
            }
        },
        {
            //年齡
            name: 'birthdate',
            type: 'int',
            convert: function (v, record) {
                var time = new Date().getFullYear();
                return time - v;
            }
        },
        {
            //姓隱藏程度
            name: 'display_name',
            type: 'string'
        },
        {
            //全職兼職
            name: 'nature_cn',
            type: 'string'
        },
        {
            //標簽
            name: 'tag',
            type: 'string',
            convert: function (v, record) {
                if (!v) {
                    return '';
                }
                var taglist = v.split('|');
                var tag = [];
                for (var i in taglist) {
                    var j = {
                        title: taglist[i].split(',')[1]
                    };
                    tag.push(j);
                }
                return tag;
            }
        },
        {
            //學歷
            name: 'education_cn',
            type: 'string'
        },
        {
            //工作經驗
            name: 'experience_cn',
            type: 'string',
            convert: function (v, record) {
                return v != "無經驗" ? v + '經驗' : v;
            }
        },
        {
            //性別
            name: 'sex_cn',
            type: 'string'
        },
        {
            //地址
            name: 'householdaddress',
            type: 'string'
        },
        {
            //刷新時間
            name: 'refreshtime',
            type: 'string'
        },
        {
            //期望崗位
            name: 'intention_jobs',
            type: 'string'
        }]
    }
});

值得注意的是convert方法，有兩個參數其中v是當前字段的值，record則是整個model的值
可以根據需求來二次加工數據，比如說后台返回的值是0,1而你希望他顯示的值是男,女這種情況

下面再說說store

代碼如下：

Ext.define('app.store.StaffList', {
    extend: 'Ext.data.Store',
    config: {
        model: 'app.model.Staff',//對應的數據模型，只有模型中已經定義的字段才能存儲到store中，沒有定義的字段是不是存儲的
        storeId: 'staffList', //給他一個id，以便於list中指定store。以及通過Ext.getStore(id)來得到store
        autoLoad: false,//在index頁面啟動時不自動加載數據
        pageSize: 7, //想后台傳遞一個參數pageSize值為7，這里的意思是告訴后台每頁顯示7條數據，用於分頁。
        //還有一個參數limit,用來告訴后台當前顯示第幾頁。
        proxy: {
            type: 'jsonp',//向后台讀取數據的方式，可以是jsonp或者ajax
            url: MyUtil.postUrl + StaffList.ashx',//請求數據的地址
            reader: {
                type: "json",//返回數據的格式
                rootProperty: 'result',//返回數據的根節點
                totalProperty: 'totalCounts'//數據總數，后台不給也沒事。不過這樣就沒辦法確定是不是最后一頁了
            }
        }
    }
});

需要注意的是，pageSize的作用並不是指在list中每次顯示多少條數據，而是告訴后台你每次要顯示多少條數據，你要7條后台給你10條也是可以的，給你10條list就會顯示10條數據上去

就像小學生問媽媽要零用錢，小學生問媽媽要5塊，媽媽心情好了給10塊也是可以的，心情不好一塊也不給。不管給多少，小學生都得乖乖的把錢放到兜兜里面。

對於list可以做一個小小的擴展

/*
*自定義列表頁面
*/
Ext.define('app.view.util.MyList', {
    alternateClassName: 'myList',
    extend: 'Ext.List',
    xtype: 'myList',
    requires: ['Ext.plugin.ListPaging', 'Ext.plugin.PullRefresh'],
    config: {
        cls: 'list',//自定義css
        plugins: [{
            xclass: 'Ext.plugin.ListPaging',//分頁插件
            autoPaging: true,//滾動到最底部時是否自動加載下一頁數據
            noMoreRecordsText: '沒有更多內容了',
            loadMoreText: '加載更多...'//加載更多按鈕顯示內容
        },
        {
            xclass: 'Ext.plugin.PullRefresh',//下拉刷新插件
            lastUpdatedText: '上次刷新時間：',
            loadingText: '加載中...',
            pullRefreshText: '下拉可以手動刷新',
            releaseRefreshText: '松開可以刷新',
            refreshFn: function (loaded, arguments) {//開始刷新觸發的時間，默認效果是只刷新第一頁數據。不管后面顯示了多少數據
                loaded.getList().getStore().loadPage(1);//這里進行了處理，觸發時清空所有數據，重新加載第一頁數據。
            }
        }],
        loadingText: false,  //禁用加載遮罩，防止跳轉時頁面卡頓，使用統一的遮罩效果
        emptyText: '沒有更多內容了'
    }
});

一個list這樣就可以了

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: new Ext.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">{sex_cn} - {householdaddress}</div>',
        '</div>',
        '<div class="right"><div class="row grayF">{refreshtime}</div><div class="row sm orangeF">{intention_jobs}</div></div>')
    }
});

大概就是這樣吧，附圖一張