Results 1 to 3 of 3

Thread: Reset list's paging when select value from dropdown menu sencha touch 2.1

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
      0  

    Default Reset list's paging when select value from dropdown menu sencha touch 2.1

    I need to dynamic populate list by select value from dropdownlist.


    For example when I select Active record then my list will populate record which are active.And if I select Delete record then list will populate record which are delete.


    Please see my code below

    Model.js

    Code:
    
          Ext.define('bluebutton.model.BlueButton.TransactionList', {
            extend: 'Ext.data.Model',
            config: {
                idProperty:'transactionId',
        //         id:'transactionlistmodel',
            
                fields: [
                    {  name: "transactionId" ,type:"string" },
                    {  name: "merchant_bbID" ,type:"string" },
                    {  name: "sessionId"  ,type:"string"},
                    {  name: "deviceId"  ,type:"string"},
                    {  name: "createDateTime" ,type:"string"},
                    {  name: "fullName" ,type:"string"},
                    {  name: "action" ,type:"string"},
                    {  name: "updatedPoint" ,type:"string"},
                    {  name: "createDate" ,type:"string"},
                    {  name: "status",type:"string" },
                    
        
                ],
                  
        
        
                proxy: {
                    type: 'rest',
                   
                   url: 'http://localhost:8080/WebCommon/rest/BBWebService/getPointTransactionList',
        //            url: 'http://mixsoloffice.no-ip.biz:82/WebCommon/rest/BBWebService/getPointTransactionList',
                    actionMethods: {
                        create: 'POST',
                        read: 'GET',
                        update: 'PUT',
                        destroy: 'DELETE'
                    },
                            
                            
        //                      noCache: false, // get rid of the '_dc' url parameter
                            
                            extraParams: {
                                sessionId: "1",
                                deviceId: "1",
                                merchant_bbID: "merchant1",
                                filterType :"0"
        
                            // add as many as you need
                        },
        
        
        
                    reader: {
                        type: 'json',
                        rootProperty: 'pointTransHistoryList',
                         totalProperty: 'totalRecord',
                         successProperty: 'success',
                        
                         
                    },
        
                    writer: {
                        type: 'json',
                       
                    },
                }
        
        
        
            }
        
        });

    Store.js
    Code:
    Ext.define('bluebutton.store.BlueButton.TransactionList', {
            extend: 'Ext.data.Store',
               requires: [
                      'bluebutton.model.BlueButton.TransactionList'
            ],
        
            config: {
                grouper: {
                    groupFn: function (record) {
                        return record.get('createDateTime');
                    }
        
                  
                },
        
                  
                    
                    model: 'bluebutton.model.BlueButton.TransactionList',
                    pageSize: 5,
                     autoLoad: true,
                    storeId: 'transactionliststore',
                    sorters: 'createDateTime',
                    groupDir: 'DESC',
                     autoSync: true,
                    clearOnPageLoad: false, 
                   
        
        
            }
        });
    view.js
    Code:
      Ext.define('bluebutton.view.BlueButton.TransactionList', {
            extend: 'Ext.List',
            xtype: 'transactionlistcard',
            
            requires: [
                'Ext.field.Select',
                'Ext.field.Search',
              
                'Ext.plugin.ListPaging',
                'Ext.plugin.PullRefresh',
        
                'bluebutton.store.BlueButton.TransactionList',
        
            ],
            config: {
                 
                  
        
                styleHtmlContent: true,
                       scrollable: {
                    direction: 'vertical',
                    directionLock: true
                },
            
                singleSelect: true,
                
                grouped: true,
                variableHeights : false,
                   store : { xclass : 'bluebutton.store.BlueButton.TransactionList'},
                    itemHeight :100,
                loadingText : 'loading',
                id :'transactionlist',
        
                
                    masked: {
                        xtype: 'loadmask',
                        message: 'loading...'
                    }, // masked
               plugins: [
                              
                                {
                                   
                                    xclass: 'Ext.plugin.PullRefresh',
                                     pullRefreshText: 'Pull down for more new Tweets!',         
        
        //                                      refreshFn: function(callback, plugin) {
        //                                                 var store = plugin.list.getStore();
        //                                            store.load(function(records, operation, success) {
        //                                                callback.call(plugin);
        //                                                console.log( records );
        //                                     });
        
        //                                 }
        
        
                                },
        
        
                                { 
                                    xclass: 'Ext.plugin.ListPaging',
        //                               
        
                                
                                }
                        ],
        
                
                
                emptyText: '<p class="no-search-results">No Transaction record found matching that search</p>',
                itemTpl: Ext.create(
                   'Ext.XTemplate',
                    '<div class="tweet-wrapper">',
                        '<table>',
                            '<tr>',
                                '<td rowspan="2" width="28%" >',
        //                        '<div style="padding-left: 30px;">',
        //                        '   <img src="{imgUrl}" width="140" height="130" /></div>',
                                '</td>',
                                '<td>',
                                '   <div class="tweet">',
                                
                                '       <h3>Transaction ID: {transactionId} , Point: {updatedPoint} pts , Action: {action}</h3>',
                                '       <h3>Status: {status}, Transaction By: {fullName} , Transaction Date: {createDateTime}</h3>',
                               
                                '   </div>',
                                '</td>',
                            '</tr>',
                        '</table>',
                    '</div>'
        
        
        
                ),
        
        
                 listeners: {
                    updatedata: function (me, newData, eOpts ) {
                        alert(newData)
                    }
                },
        
            },
            
               
        
        });

    Controller.js

    Code:
    onTransactionStatusChange:  function (selectField, value) {
        
        
                        var sto = Ext.getCmp('transactionlist').getStore();
        
                        sto.removeAll();
                        sto.sync()
        
        
                        
        
           
                     var thelist = this.getTransactionlist();
                      thelist.setStore(sto);
                    
        
                        sto.load({
                            params:{
                                filterType : value,
                                sessionId :'1',
                                merchant_bbID:'merchant1',
                                page:'1',
                                start:'0',
                                limit:'5'
        
                            }
            
        
                    });
        
        
                
                  
            
            },

    Now I facing a problem.

    Let say In active list , current page is page 2 and it displaying no more record loaded . But when I change to delete list, the list also displaying no more record loaded . How can I reset the paging when I select value from my dropdown list

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2010
    Location
    Chicago
    Posts
    36
    Answers
    10
    Vote Rating
    8
      0  

    Default

    Perform a loadPage on your store instead of a load;

    Code:
    sto.loadPage(1,{
         params : {
             xxxxx : 'abcd'
         }
    });

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    84
    Vote Rating
    0
      0  

    Default

    Sorry, I try adi, The list willl mix with both diffrenece status record which are active and delete. gt any way to clear store and rebind again?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •