HTML5開發移動web應用——Sencha Touch篇(10)

    咱們把數據可視化出來，爲的就是進行一些針對數據的操做。

這裏介紹一下DataView的排序功能和搜索功能。

掌握這兩個技能，可以讓寫出的數據界面內的數據可以依據要求進行排序，可以進行數據的搜索顯示燈功能。

    1、排序

    當咱們想依據數據的某一個字段排序時，可以調用sort方法：

    store.sort(‘lastName’,’asc’);

    當中。store是咱們定義好的數據倉庫，調用sort方法進行排序。sort方法傳入兩個參數。第一個參數爲依照哪一個字段排序，第二個參數爲升序仍是降序。

假設想對多個字段進行排序，可以運行例如如下代碼：

store.sorters.add(new Ext.util.Sorter({
property:’firstName’,
direction:’asc’
}));
store.sort();

    經過sorters.add方法可以加入多個排序條件，最後調用sort()方法，運行排序的前後順序依照加入順序決定。

咱們可以在界面中定義一個選項框，依據用戶的選項進行排序，經過爲每一個選項設定value值。將value值傳入sort方法中，依照要求進行排序。

 

    2、搜索

    DataView中有對數據倉庫中數據進行過濾的方法。代碼例如如下：

    store.filter(‘lastName’,’Tom’);

    這句話就表示篩選出這種數據。它的lastName屬性值爲Tom。

同理。假設咱們想實現用戶的查找功能。定義一個搜索框，將用戶輸入的要搜索的值傳入filter函數中就能夠。 還可以依照多個過濾條件前後進行過濾（這裏要多個篩選時間都成立的數據纔會被選出來）。注意，在每一次運行搜索操做前，必定要運行搜索清除操做：

    store.clearFilter();

    這就保證每次搜索時都沒有上一次搜索的干擾。

假設不清楚的話。顯示的內容是屢次搜索結果的交集（很是可能就沒有結果）。