2011-09-06 12 views
5

Sto provando ad usare il plug-in di listpaging di sencha touch. Ma non c'è quasi nessuna documentazione buona (o cattiva) su come usarlo e sono confuso.sencha list plug-in per paging

quando attivo il plugin nella mia lista

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

un un loading image 'Carica di più' testo e viene aggiunta alla fine della lista.

Ma non so come configurare il mio negozio per abilitare questo plugin per poter caricare più dati.

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'); 

Come posso configurare il mio negozio in modo Quando si tocca "Carica ancora", il negozio porta in primo piano la pagina 2 e aggiungerli automaticamente alla lista?

risposta

2

Ho problemi anche a trovare una buona documentazione, ma posso almeno rispondere alla tua domanda. Devi aggiungere pageSize al tuo negozio, clearOnPageLoad, se non vuoi cancellare ciò che è già stato caricato. Lei è il mio codice:

Ext.regStore('publicresources', { 

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

});

mie questioni in sospeso che sto esaminando sono:

  1. Come disattivare l'elemento "More" quando non ci sono più record per caricare
  2. come rilevare che non ci sono più record caricare e dove inserire il codice di rilevamento.
  3. Come mantenere l'elenco nella posizione in cui si trovava l'utente. Ogni carico torna al primo elemento nell'elenco

Buona fortuna!

+0

Grazie per la risposta, anche per favore fatemelo sapere se niente altro viene in su. – keune

+0

l'articolo 3 nei miei articoli in sospeso era un errore del mio codice. Avevo un pezzo di codice che costringeva a riportare l'utente in cima all'elenco per l'aggiornamento dei dati, in modo da evitare un altro errore di rendering con il componente dell'elenco di sencha touch. L'errore si manifesta quando i dati che sostituiscono l'elenco sono inferiori a quelli originariamente presenti, causando la mancata comprensione dell'elenco. –

+2

Sei riuscito a trovare una soluzione al tuo primo problema: "Come disattivare l'elemento" Altro "quando non ci sono più record da caricare"? – CrocHunter

4

Ho avuto un problema simile con il plugin ListPaging in SenchaTouch 2, e sono riusciti a risolvere il 'più carico di' comportamento messaggio quando viene raggiunta la fine del set di dati.

Questo si basa su ciò che John Gordon ha messo a punto (per quanto riguarda specificando le opzioni pageSize e clearOnPageLoad config), dal momento che queste proprietà sembrano essere lo stesso in Senchatouch 2. Non ho guardato SenchaTouch 1.x in dettaglio. In SenchaTouch 2, tutte le opzioni di configurazione devono essere definiti in una proprietà 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' 
      } 
     } 
    } 
}); 

Nella vista, in cui si specificano i plugin, siamo in grado di ignorare il 'carico di piu' e messaggi 'non più record':

Il problema è che mentre il nostro servizio Web restituisce una serie di record per una determinata pagina, non esiste una proprietà di conteggio totale, necessaria per determinare quando sono stati caricati tutti i record. Quindi, così com'è, rimarrà il messaggio 'Carica altro' (numero 1 nella soluzione accettata).Quindi, nella funzione init del nostro controller, dobbiamo collegare un gestore di eventi per l'evento load sul negozio per collegare in quando si riceve una nuova pagina di dati:

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... 

}); 

Nel gestore, ci rendiamo conto che abbiamo Abbiamo raggiunto la fine del set di dati quando il numero di record restituiti è inferiore alla dimensione della pagina. Se il numero totale di record è un multiplo della dimensione della pagina, l'ultima 'pagina' avrà una matrice vuota. Una volta che la fine del set di dati è stato identificato, aggiorniamo la proprietà totalCount config del negozio:

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... 

Perché questa è una 'prima' gestore di eventi, questa proprietà sarà cruciale aggiornato prima il plugin decide se visualizza i messaggi 'carica più' o 'non più record'. Sfortunatamente, il framework non fornisce un mezzo per nascondere il messaggio "nessun altro record", quindi questo dovrebbe essere fatto tramite CSS.

Spero che questo aiuti.

+0

Grazie per la soluzione d_mcg. c'è un altro problema: il collegamento "Nessun altro record" è ancora cliccabile e invia una richiesta al server una volta cliccato. Come lo risolvi? molte grazie :) – Bogie

+0

Prego :-) Non ho trovato un modo semplice per disattivare quel pulsante, principalmente perché SenchaTouch fornisce solo i mezzi per impostare il testo di questo pulsante in uno stato (che viene applicato tramite un XTemplate in la proprietà 'private' 'loadTpl' config). Potresti essere in grado di lavorare un po 'di magia per intercettare l'evento tap di questo pulsante e restituire false (che annulla l'evento), o usare un selettore CSS funky per nascondere il pulsante nel suo stato' nessun altro record '. Puoi vedere gli interni di come Sencha lo fa su [docs.sencha.com] (http://docs.sencha.com/touch/2-0/source/ListPaging.html#Ext-plugin-ListPaging) –

+0

Hai dimenticato di dì: puoi passare il mouse sopra l'intestazione verde (cioè il nome della classe) per rivelare il link "Visualizza sorgente ..." per quella classe.L'ho trovato molto utile per capire alcuni dettagli extra che la documentazione non menziona. –

0

Per quanto riguarda il "carico più vs. senza più record" messaggio -

Se si sta scrivendo un proxy personalizzato (ad esempio qui A Sencha Touch MVC application with PhoneGap), si imposta il record totali nell'operazione restituito.

Se i record totali non sono ancora noti, si può fare qualcosa di simile al di sotto, dove,

1) se si restituisce il limite richiesto di record, impostare il totale a qualcosa di più grande rispetto ai record del negozio sarà ora tenere

2) se restituendo < il limite richiesto di record, impostare il totale a 1 (per forzare il "non più il messaggio record")

//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); 
    } 
-1

Giusto per aggiungere che cosa ha funzionato per me ..

Se il server restituisce un totalCount e si desidera impostarla è possibile utilizzare il totalProperty nel lettore

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