煎茶列表分頁插件

Question

我試圖用煎茶觸摸的listpaging插件。但幾乎沒有關於如何使用它的好的（或不好的）文檔，我很困惑。

，當我在我的名單激活插件

this.myList = new Ext.List({ 
    store: this.myStore, 
    plugins: [{ 
    ptype: 'listpaging', 
    autoPaging: false 
    }], 
    itemTpl: '...' 
}); 

一個「加載更多」的文字和加載圖片被添加到列表的末尾。

但我不知道如何配置我的店裏來啓用該插件能夠裝載更多的數據。

App.regStore('MyStore', { 
model: 'myModel', 
proxy: { 
    type: 'ajax', 
    url: 'http://mydomain.com/json?howmany=10&page=1', 
    reader: { 
     type: 'json', 
     root: 'results' 
    } 
    } 
}); 

App.stores.myStore = Ext.StoreMgr.get('MyStore'); 

我如何配置我的店，所以當我點擊「加載更多」，店裏帶來了2頁，並將它們自動添加到列表中？

Answer 1

我有問題，找到好的文檔，太多，但我至少可以回答你的問題。如果您不想清除已經加載的內容，則需要將pageSize添加到您的商店，clearOnPageLoad。她是我的代碼：

Ext.regStore('publicresources', { 

model: 'PublicResource', 
autoLoad:false, 
remoteFilter:true, 
sortOnFilter:true, 
    pageSize: 15, 
    clearOnPageLoad: false, 
sorters: [ 
    { 
     property : 'distance', 
     direction: 'ASC' 
    } 
] 

}）;

我，我期待到突出問題是：

1. 如何時，有沒有更多的記錄加載
2. 如何檢測，有沒有更多的記錄關閉了「更多」元素加載和放置檢測代碼的位置。
3. 如何保持的列表中，用戶是在位置。每個負載跳回到第一個項目在列表中

祝你好運！

Answer 2

也請記住，這目前僅服務器端。

論壇線程http://www.sencha.com/forum/showthread.php?105193-Store-pageSize

Answer 3

我已經受夠了在SenchaTouch 2 ListPaging插件類似的問題，並設法達到了數據集的末尾時，整理出「負載更多」消息的行爲。

此基礎上什麼約翰·戈登已經拿出了（關於指定pageSize和clearOnPageLoad配置選項），因爲這些特性似乎是Senchatouch 2.同一我沒有看詳細SenchaTouch 1.x中。在SenchaTouch 2，所有的配置選項必須在config屬性來定義：

Ext.define('MessagingApp.store.MessageThreads', { 
    extend : 'Ext.data.Store', 
    requires: ['MessagingApp.model.MessageThread'], 

    config: 
    { 
     model: 'MessagingApp.model.MessageThread', 

     autoLoad: false, 
     clearOnPageLoad: false, // This is true by default 
     pageSize: 10,   // This needs to be set for paging 

     proxy: { 
      type: 'jsonp', 
      pageParam: 'currentPage', 
      limitParam: 'pageSize', 
      url: APIURL + '/message-app-service/GetMessageThreads', 
      reader: { 
       type: 'json', 
       rootProperty: 'Data' 
      } 
     } 
    } 
}); 

在視圖中，在這裏我們指定的插件，我們可以覆蓋「負載更多的」和「沒有記錄」的消息：

{ 
    xtype:'dataview', 
    store:'MessageThreads', 
    id:'threadList', 
    itemTpl:Ext.create('Ext.XTemplate', 
     '<!-- template markup goes here -->', 
     { 
      //custom helper functions here 
     } 
    ), 
    plugins:[ 
     { 
      xclass:'Ext.plugin.ListPaging', 
      autoPaging: true, 

      // These override the text; use CSS for styling 
      loadMoreText: 'Loading...', 
      noMoreRecordsText: 'All messages loaded' 
     } 
    ] 
} 

問題是，雖然我們的W​​eb服務返回特定頁面的記錄數組，但沒有總計計數屬性，插件需要確定何時加載所有記錄。因此，「加載更多」信息將保留（接受解決方案中的問題＃1）。因此，在我們的控制器的init功能，我們必須重視的事件處理程序在商店load事件掛鉤時，接收到的數據的一個新的頁面到：

Ext.define('MessagingApp.controller.Messages', 
{ 
    extend: 'Ext.app.Controller', 

    config: 
    { 
     views: [ 
      'MessageThreads', 
      // Other views referenced by this controller 
     ], 

     stores: [ 
      'MessageThreads' 
     ], 

     refs: 
     { 
      // References to UI elements by selector... 
     } 
    }, 

    init: function() { 
     // Other internal initialisation... 

     this.control(
     { 
      // Selector-object pairs... 
     }); 

     // Provide a means to intercept loads of each page of records 
     var threadStore = Ext.getStore('MessageThreads'); 
     threadStore.addBeforeListener('load', this.checkForThreadListEnd, this); 
    }, 

    // Remaining controller functions... 

}); 

在處理程序中，我們認識到，我們當返回的記錄數小於頁面大小時，已達到數據集的末尾。如果總記錄數量是頁面大小的倍數，則最後的'頁面'將具有空數組。一旦數據集的末尾已經確定，我們更新了商店的totalCount配置屬性：

checkForThreadListEnd: function(store, records, isSuccessful) { 
    var pageSize = store.getPageSize(); 
    var pageIndex = store.currentPage - 1; // Page numbers start at 1 

    if(isSuccessful && records.length < pageSize) 
    { 
     //Set count to disable 'loading' message 
     var totalRecords = pageIndex * pageSize + records.length; 
     store.setTotalCount(totalRecords); 
    } 
    else 
     store.setTotalCount(null); 
}, 

// Other controller functions... 

因爲這是一個「前」事件處理程序，此屬性將被決定性地更新插件決定之前是否顯示'加載更多'或'沒有更多記錄'的信息。不幸的是，該框架沒有提供隱藏'沒有​​更多記錄'消息的方法，所以這必須通過CSS完成。

希望這會有所幫助。

Answer 4

在關於「加載更多的與沒有記錄」的消息 -

如果你（這裏A Sencha Touch MVC application with PhoneGap例子）編寫自定義代理，您可以設置在返回操作的總記錄。

如果總記錄還不知道，你可以不喜歡以下，其中，

1）如果你正在返回的記錄要求的限制，總的東西比記錄大商店設置現在將持有

2）如果返回<記錄的要求限制，總設置爲1（以迫使「沒有更多的記錄信息」）

//return model instances in a result set 
    operation.resultSet = new Ext.data.ResultSet({ 
     records: contacts, 
     //total : contacts.length, 
     total : contacts.length === operation._limit ? (operation._limit * operation._page +1) : 1, 
     loaded : true 
    }); 
    //announce success 
    operation.setSuccessful(); 
    operation.setCompleted(); 
    //finish with callback 
    if (typeof callback == "function") { 
     callback.call(scope || thisProxy, operation); 
    } 

Answer 5

只是爲了增加對我工作..

，如果服務器返回一個TOTALCOUNT，你想設置它，你可以使用totalProperty在讀者

reader: { 
      type: 'json', 
      rootProperty: 'results', 
      totalProperty: 'resultCount' 
     }