ListPaging プラグインを使って、Ext.List に 'もっと見る' ボタンでのページングを実装する

サーバ側のAPIは、取得開始レコード及び取得件数を指定するパラメータを定義しておく。また、返却するJSONに、全部でレコードが何件あるかのパラメータを定義しておく。
例：Books の一覧を返すAPI。start,end で取得レコードの開始地点と件数を指定している。帰ってくるJSONの、total に、対象レコードの全件の件数が記載されている。

{
    "total": 345, // 全部で345件のレコードがある
    "books": [
        {
            "id": 1, 
            "name": "サルでもわかるSenchaTouch", 
            "isbn": "978-4-309-999999-8", 
            "picture": "https://example.com/images/p1336894847146_82", 
            "time": "2012-05-13 16:42:28.354824"
},…20件分つづく
]

Model は通常のケースと同じ

model/Books.coffee

Ext.define "MyApp.model.Book",
  extend: "Ext.data.Model"
  config:
    fields: [
       name: "id"
       type: "int"
     ,
       name: "name"
       type: "string"
     ,
       name: "isbn"
       type: "string"
     ,
       name: "picture"
       type: "string"
     ,
       name: "time"
       type: "auto"
    ]

Store には、pageSize を追加する

coffeescript

Ext.define 'MyApp.store.Book'
  extend: 'Ext.data.Store'
  config:
    model: 'Ezuko.model.UserPicture',
    pageSize: 20
    autoLoad: true
    proxy:
      type: "ajax"
      url: "http://example.com/api/books.json"
      reader:
        type: "json"
        rootProperty: "books"

View

view/BookList.coffee

Ext.define "MyApp.view.BookList",
  extend: "Ext.List"
  xtype: "booklist"
  id: 'booklist'
  config:
    itemTpl:'<div class="item"><a href="{url}">{name}</a></div>'

コントローラーから Store をセットする際に、ListPaging plugin を追加する

controller/Main.coffee

  bookstore =  new MyApp.store.Book();
  view = new Ext.Container
    layout: 'card'
    items: [
      xtype:'booklist'
      store: bookstore
      limit: 20
      plugins: [
        xclass: 'Ext.plugin.ListPaging'
        loadMoreText: 'もっと見る'
      ]
     ]
  MyApp.Viewport.push view

これだけでOK！