私はシンプルなSenchaTouchの連絡先/ユーザーアプリを持っています。このアプリはリストを表示してから詳細を開示します。
APIを使用してExt.Ajax.requestでサーバーにアクセスし、ユーザーを取得してリストに入力します。ただし、合計数は通常500を超えるため、ListPagingプラグインを実装する必要があります。セキュリティ上の理由から、「プロキシ」方式は実行できないと確信しています（要求の認証には「トークン」を使用する必要があるため）。多分私は間違っています。ドキュメントがまばらなので、後押しが必要です。
私のサーバーは以下を返します：
data: [,…]
hasnextpage: true
haspreviouspage: false
pageindex: 0
pagesize: 9999
success: true
totalcount: 587
totalpages: 14
私の店：
Ext.define('MyApp.store.StudentStore',{
extend: 'Ext.data.Store',
config:{
storeId: 'Students',
model:'MyApp.model.people',
autoLoad:false,
remoteFilter:true, //just trying stuff I've read about
sortOnFilter:true,
clearOnPageLoad: false,
grouper: {
groupFn: function(record) {
return record.get('lastname')[0];
}
},
sorters: 'lastname'
}
});
そして私のリストビュー：
Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.dataview.List',
alias : 'widget.mainPanel',
requires: [
'MyApp.store.StudentStore',
'Ext.plugin.ListPaging'
],
config: {
store : 'Students',
model: 'people',
grouped:true,
sorters: 'lastname',
itemTpl: new Ext.XTemplate(
'<tpl for=".">'+
'<h1>{firstname:ellipsis(45)} {lastname:ellipsis(45)}</h1>' +
'<h4>{grade} grade</h4>' +
'</tpl>'
),
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
bottom: 0,
loadMoreText: ''
}]
}
});
ListPagingプラグインを利用して、画面が一番下までスクロールされたときに次の45人のユーザーを自動ロードしたいと思います。どんなアドバイスも大歓迎です！
編集：解決しました!!
@arthurakay-その通り、私の「トークン」はある時点で間違いなく破壊されていました。私のAPIはすべてのリクエストにトークンを必要とするため、プロキシを設定する「beforeload」関数を作成できました。ログイン時に受け取ったトークン-ListPagingを呼び出す必要がある前。したがって、ユーザーがスクロールしてListPagingをアクティブ化する準備ができるまでに、私のトークンはサーバーから受け取った最初のレコードとともに保存され、ユーザーが一番下までスクロールするたびに魔法のようにさらに50レコードが追加されます。
これが誰かに役立つことを本当に願っています!!
Ext.define('MyApp.store.PersonStore',{
extend: 'Ext.data.Store',
config:{
storeId: 'Persons',
model:'MyApp.model.PersonModel',
autoLoad:false,
clearOnPageLoad: true,
listeners: {
beforeload: function(store){
store.setProxy({
headers: {
Accept : 'application/json',
Authorization : 'Bearer:' + this.token
},
type: 'ajax',
pageParam: 'pageindex',
url: this.url,
extraParams: {
count: this.count
},
reader: {
type: 'json',
rootProperty:'data',
pageParam: 'pageindex',
totalProperty: 'totalcount'
}
});
}
},
grouper: {
groupFn: function(record) {
return record.data.lastname[0]
}
},
sorters: 'lastname'
},
setParams: function(params){
for (var prop in params){
if (params.hasOwnProperty(prop)){
this[prop] = params[prop];
}
}
}
});
そして、ここのストアにアイテムを追加しながら、「setParams」を追加します。
var feedStore = Ext.getStore('FeedStore');
//call the setParams method that we defined in the store
feedStore.setParams({
token: TOKEN,
count: 50,
url: URL
});