1. #1
    Ext User
    Join Date
    Apr 2007
    Posts
    73
    Vote Rating
    0
    PFM is on a distinguished road

      0  

    Default ComboBox Paging - Need Help Understanding...

    ComboBox Paging - Need Help Understanding...


    I have a ComboBox that is using an DataStore using an HttpProxy and JsonReader. When I click the down arrow on the ComboBox, an ajax call is made to the server and the server returns 1000 rows. The ComboBox displays fine and the paging toolbar indicates that there are 50 pages. What I am having a problem with is why when I click the Next Page indicator, another ajax call is made to the server for the next set of 20 records. Why isn't the data being retrieved from the DataStore since is is already loaded with all the data to satisfy the paging?

    Does the Next, Prev, First, and Last Page always make an ajax call without looking in the datastore to see if those records are already loaded?

    Server response
    Code:
    {"recordCount":1000,"rows":[{"userId":"User_0"},{"userId":"User_1"},{"userId":"User_10"},{"userId":"User_100"
    
    },{"userId":"User_101"},{"userId":"User_102"},{"userId":"User_103"},{"userId":"User_104"},{"userId":"User_105"
    
    },{"userId":"User_106"},{"userId":"User_107"},{"userId":"User_108"},{"userId":"User_109"},{"userId":"User_11"
    
    },{"userId":"User_110"},{"userId":"User_111"},{"userId":"User_112"},{"userId":"User_113"},{"userId":"User_114"
    ComboBox code
    Code:
      var recordLayout = [
        		{name: 'userId',                  mapping: 'userId',                  type: 'string'}
            ];
    
            feedTreeNodeUserIdRecord = Ext.data.Record.create(recordLayout);
    
         	dataStore = {
         	    baseParams: {action:'selectFeedTreeNodeUserId'}, 
         	    proxy: new Ext.data.HttpProxy({url: urlFeedTreeNodeAdmin}),                                      
                reader: new Ext.data.JsonReader({
                    totalProperty: "recordCount",      // The property which contains the number of returned records (optional)
                    root: "rows",                      // The property which contains an Array of record objects
                    id: "userId"                       // The property within the record object that provides an ID for the record (optional)
                    }, feedTreeNodeUserIdRecord)
            };
    	
          	feedTreeNodeUserIdDataStore = new Ext.data.Store(dataStore);
            feedTreeNodeUserIdCombo = new Ext.form.ComboBox({
                store: feedTreeNodeUserIdDataStore,
                loadingText: 'loading...',
                width: 250,
                pageSize:20,
                mode:'remote',
                displayField: 'userId',
                valueField: 'userId',
                typeAhead:true,
                editable:true,
                triggerAction: 'all',
                emptyText:'Select a User ID...',
                onSelect: function(record){ // override default onSelect to do redirect
                  alert("select");
                    }
                });
    Attached Images

  2. #2
    Ext User
    Join Date
    Apr 2007
    Posts
    73
    Vote Rating
    0
    PFM is on a distinguished road

      0  

    Default


    I think I got this... took a little more coding on the server side. This is what I did.... always return the total records in the recordCount but only return the data records based on the limit, start, and query parameters. Is this the correct way to use paging? I assume the grid paging is the same concept...

    It works fine, but I am still at a lost on if I load the datastore with the number of records in the recordCount, why isn't the paging data retrieved from the datastore and only make an ajax call when the datastore number of records does not match the recordCount return by the server and the paging action tries to access those records..

  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Quote Originally Posted by PFM View Post
    I think I got this... took a little more coding on the server side. This is what I did.... always return the total records in the recordCount but only return the data records based on the limit, start, and query parameters. Is this the correct way to use paging? I assume the grid paging is the same concept...

    It works fine, but I am still at a lost on if I load the datastore with the number of records in the recordCount, why isn't the paging data retrieved from the datastore and only make an ajax call when the datastore number of records does not match the recordCount return by the server and the paging action tries to access those records..
    Yes, you're right the concept is as you describe in first article and works same also for grids.

    Re 2nd article: There were threads here about lazy loading and memory paging somewhere around you can search for them. I personally do find the current way of paging most useful.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  4. #4
    Ext User
    Join Date
    Apr 2007
    Posts
    73
    Vote Rating
    0
    PFM is on a distinguished road

      0  

    Default


    Thanks jsakalos

  5. #5
    Ext User
    Join Date
    May 2007
    Posts
    32
    Vote Rating
    0
    taelons is on a distinguished road

      0  

    Default


    hi pfm,

    could you point out for me how do i attach a pagingtoolbar for a combobox?

    thanks

  6. #6
    Ext User
    Join Date
    Jul 2009
    Posts
    21
    Vote Rating
    0
    lopita is on a distinguished road

      0  

    Default


    Hi,

    Can anyone please elaborate a bit on how does the below code:
    Server response

    {"recordCount":1000,"rows":[{"userId":"User_0"},{"userId":"User_1"},{"userId":"User_10"},{"userId":"User_100"},{"userId":"User_101"},{"userId":"User_102"},{"userId":"User_103"},{"userId":"User_104"},{"userId":"User_105"},{"userId":"User_106"},{"userId":"User_107"},{"userId":"User_108"},{"userId":"User_109"},{"userId":"User_11"},{"userId":"User_110"},{"userId":"User_111"},{"userId":"User_112"},{"userId":"User_113"},{"userId":"User_114"
    ComboBox code

    var recordLayout = [ {name: 'userId', mapping: 'userId', type: 'string'} ]; feedTreeNodeUserIdRecord = Ext.data.Record.create(recordLayout); dataStore = { baseParams: {action:'selectFeedTreeNodeUserId'}, proxy: new Ext.data.HttpProxy({url: urlFeedTreeNodeAdmin}), reader: new Ext.data.JsonReader({ totalProperty: "recordCount", // The property which contains the number of returned records (optional) root: "rows", // The property which contains an Array of record objects id: "userId" // The property within the record object that provides an ID for the record (optional) }, feedTreeNodeUserIdRecord) }; feedTreeNodeUserIdDataStore = new Ext.data.Store(dataStore); feedTreeNodeUserIdCombo = new Ext.form.ComboBox({ store: feedTreeNodeUserIdDataStore, loadingText: 'loading...', width: 250, pageSize:20, mode:'remote', displayField: 'userId', valueField: 'userId', typeAhead:true, editable:true, triggerAction: 'all', emptyText:'Select a User ID...', onSelect: function(record){ // override default onSelect to do redirect alert("select"); } }); How can i use the recordcount for the pagination.ThanksLopita

  7. #7
    Ext User
    Join Date
    Apr 2009
    Posts
    6
    Vote Rating
    0
    chillu007 is on a distinguished road

      0  

    Default


    I am facing similar problem..When i restrict the records from the server to retrieve less records(10 records based on PageSize) keeping the TotalProperty to bring in original count(100).Combobox is showing 1 Page with 10 records and Paging toolbar is disabled.How to enable the paging toolbar to send in a request to retrieve the next set of records.I am new to extjs.Can anyone help me on this.

  8. #8
    Ext User
    Join Date
    Dec 2008
    Posts
    11
    Vote Rating
    0
    kt_saran is on a distinguished road

      0  

    Default


    I am trying to use the pagination in the ComboBox. Paging buttons are displaying in the combobox when i expand. But i am facing following problem. I have attached all the details below.
    1. There are 1000 records are there in the for this particular combobox. But i am getting 20 records when i make request. each and every further request will return next 20 records will get in the response.
    In the attached response(below) i am getting TOTAL_HITS this is the total number of records for this particular combobox. How i can set this TOTAL_HITS in the totalProperty?
    2. How i can get the next page no when i click the next button in the combobox paging. I tried passing hardcoded value in the baseparams. this works.



    var cboUdaValue = new Ext.ux.NLComboBox({
    id: 'cboUdaValue',
    store:cboUdaValueStore,
    width: 170,
    minListWidth :250,
    displayField: 'name',
    valueField:'intId',
    typeAhead: true,
    loadingText:'Loading ...' ,
    forceSelection:true,
    triggerAction: 'all',
    emptyText: 'Please Select',
    selectOnFocus: true,
    autoScroll:true,
    pageSize: 20,
    maxHeight:200
    });

    cboUdaValueStore = new Ext.data.Store({

    baseParams: {action:'fetchUdaValues', jsonParObject:"{\"udaId\":\"2\",\"pageNo\":\"1\"}"},
    proxy: ocfProxy,
    reader:comboBoxReader1
    });

    comboBoxReader1 = new Ext.data.JsonReader({
    totalProperty: TOTAL_HITS,
    root: 'comboBoxRoot',
    id: 'intId'
    },comboBoxRecords1);

    comboBoxRecords1 = Ext.data.Record.create([
    {name:'intId'},
    {name:'name',type:'string', sortDir:"ASC"},
    {name:'id'}
    ]);


    Response details


    <ns0:fetchUdaValuesResponseElement>
    <result>
    <fetchUdaValueResponse>
    <UdaValue>
    <udaId>50</udaId>
    <udaValueId>2</udaValueId>
    <udaValueDescription>test 1</udaValueDescription>
    <TOTAL_HITS>1000</TOTAL_HITS>
    </UdaValue>
    <UdaValue>
    <udaId>50</udaId>
    <udaValueId>3</udaValueId>
    <udaValueDescription>test 1121</udaValueDescription>
    <TOTAL_HITS>1000</TOTAL_HITS>
    </UdaValue>
    <UdaValue>
    <udaId>50</udaId>
    <udaValueId>4</udaValueId>
    <udaValueDescription>test 1232</udaValueDescription>
    <TOTAL_HITS>1000</TOTAL_HITS>
    </UdaValue>
    <UdaValue>
    <udaId>50</udaId>
    <udaValueId>1</udaValueId>
    <udaValueDescription>test 1343434</udaValueDescription>
    <TOTAL_HITS>1000</TOTAL_HITS>
    </UdaValue>
    </fetchUdaValueResponse>
    </result>
    </ns0:fetchUdaValuesResponseElement>