78223

Set page size Sencha touch

Question:

I've been trying to set a page size so that my app runs faster. I'm reading from a huge xml file (thousands of rows) and I want to use the ListPaging plugin to load only one 'page' at a time.

Here is my list:

xtype : 'list', plugins: { xclass: 'Ext.plugin.ListPaging', autoPaging: true, loadMoreText : 'Loading more...', noMoreRecordsText : 'loaded' }, store : 'mainStore', height : '100%', layout : 'fit', id: 'myList', flex : 5, itemTpl : "foo"

Here is my store:

config: { model : 'myApp.model.foo', storeId: 'mainStore', autoLoad: true, //currentPage: 1, //buffered: true, pageSize: 15, proxy : { type : "ajax", url : 'resources/images/data/fooBar.xml', startParam: 'offset', reader : { type : "xml", rootProperty : 'foo', record : 'bar' } } }

However when I run this, all I get is 'loading more...' text at the bottom of the entire list (not 15 items down), and then it only loads the same xml data again, but this time just concatenates it to the end of the entire 'list'.

How do I set the page size so that I only get 15 or so items to display per 'page', then when I scroll to the bottom of the list (that's 15 items long) I get the next 15 items concatenated to the last 15 items to make a total of 30 items display.. and so forth.

Using Sencha Touch 2.4.1

<strong>UPDATE:</strong> Here is the config:

config: { model : 'c17App.model.approaches', storeId: 'mainStore', autoLoad: true, pageSize: 15, proxy : { type : "ajax", url : 'resources/images/data/approach_all.xml', total: 17, start: 1, limit: 15, reader : { type : "xml", rootProperty : 'approaches', record : 'approach', totalProperty: 'total'//maybe needs to be a number? } } }

Answer1:

From the scenario which you have provided, it seems your web-services are not according to Sencha's ListPaging plugin. pageSize is being correctly used by you in store config .

config: { pageSize: 15, ...... }

Your API response should have following properties to support ListPaging:

<ol><li>

total : This field/property will be coming with your API. With the value of this, the plugin decides whether the application has reached end of the list or not.

</li> <li>

start: This is send by the plugin in the Headers and remote proxy will get to know that from which index position the data fetching will be initiated.

</li> <li>

limit: This is nothing but your pageSize. It is also send by the plugin in the Headers and remote proxy will get to know that how many numbers of data data it should fetch fro the start index.

</li> </ol>

So check with your api response if it is having total, start and limit params or not. If it is there, just add this reader in your proxy:

reader: { type: 'xml', // 'json' if the api is giving response in json format rootProperty: 'xyz', // Depends on your api response. totalProperty: 'total' }

And you problem will be resolved. Feel free to ask for any other clarification.

--------------------------------------<strong>EDIT</strong>-----------------------------------------------

'total', 'start' and 'limit' should come in the api response to support listpaging. You don't have to send it explicitly in your proxy(As you are sending in edited section)

Recommend

  • c# How can I create a collection of custom objects without going through each field
  • VBA dialog boxes automatically answer solution
  • How Do I Prevent Users From Modifying Resources They Do Not Own?
  • silverlight 4 RIA update item in domaindatasource only updates after refresh
  • stackexchange redis hashscan return all fields in one time
  • SQL pagination returning total number of records before pagination
  • Using STAT relation in CActiveDataProvider criteria
  • laravel 4 install issue when using composer install
  • Flex header, content, footer layout
  • Unclear perl script execution
  • How to add paragraph wise texts separated by vertical line into itextsharp created PDF
  • Why is this piece of Javascript code so slow?
  • How to graph streaming data in C#
  • Drop-down menu is pushing the navbar down. How to avoid it?
  • Limit the number of visible pages in pagination
  • Flex: DataGrid column formatting of numbers
  • Symfony2 - Composer class loader instance in controller
  • layout-lt-mdhas been deprecated. Please use a `layout-gt-` variant
  • How to assign value to angular pagination custom template?
  • How to show complete column as editable in extjs grid(cell editing)?
  • Why fgetc too slow?
  • NullPointerException for lwuit.html.CSSEngine.applyStyleToUIElement(Unknown Source)
  • Simple Injector fails if using verify before setting dependency resolver for MVC 4
  • MVC extension method error
  • Deployments not visible in Kubernetes Dashboard
  • What is RSL (Runtime shared library ) used for in flash?
  • Multiple flexboxes with margin-right, except the last one in the row? Without JS?
  • Want to save selected (i.e., more than 1) enums as string with NHibernate
  • Install phpMongo Drivers on windows
  • Send emails through VB6 if no email client
  • Google OAuth: can't get refresh token with authorization code
  • Image map in Flex
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • Select options in sencha touch is not working for android
  • Adjust width of select element according to selected option's width
  • Django rest serializer Breaks when data exists
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Binding checkboxes to object values in AngularJs