1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    Hyderabad,India
    Posts
    20
    Answers
    4
    Vote Rating
    0
    Mahesh Sakunala is on a distinguished road

      0  

    Default Answered: Selection of records over multiple pages in a grid

    Answered: Selection of records over multiple pages in a grid


    Hi all ,
    We have a cell editor grid with pagination,in which the checkbox selection must persist across multiple pages.I came to know that we do not have standard built-in in extjs framework. But I've found a plugin for paging select persistence at http://www.sencha.com/forum/showthread.php?163418 .
    I need to get the record id's of the rows selected in the multiple pages when check boxes are selected..Can any one suggest me how can i achieve it?


    We use extjs framework on Force.com(Salesforce ) Platform.

    Code:
    Code for Store :
    
    
     var myData1=new Array();
    
    
    <apex:repeat value="{!Total}" var="att">
     <apex:repeat value="{!att}" var="row">
     
      var rowArray=new Array();
      rowArray[0]='{!row.atnd.id}';
      
      var fName="{!row.atnd.AS_id__r.AS_FirstName__c}"; 
      rowArray[1]=fName.replace(/\'/g,'\'');
    
    
      var lName="{!row.atnd.AS_id__r.AS_LastName__c}";
      rowArray[2]=lName.replace(/\'/g,'\'');
      
      rowArray[3]='{!row.status}';
      
      myData1.push(rowArray);  
      </apex:repeat>
     </apex:repeat>
     
     var myDirectfn = function(opts, fn, proxy) {
        var start = opts.start,
            end = opts.limit+opts.start,
            data = [];
        if (end > myData1.length) end = myData1.length;
        for (var i = start; i < end; i++)
            data.push(myData1[i]);
        data.total = myData1.length;
        fn(data, {
            status: true,
            result: data
        });
    };
    
    
    myDirectfn.directCfg = {
        method: {len:1}
    };
    
    
        
    var store = new Ext.data.SimpleStore({
    fields:[{name:'id'},{name:'FirstName'},{name:'LastName'},{name:'s'}],
    pageSize: 50,
    proxy: {
    type: 'direct',
    directFn: myDirectfn,
    reader: {
    type: 'array'
    }
    },
    });
    store.loadData(myData1);
    
    
    Code for Grid:
    
    var grid = Ext.create('Ext.grid.Panel',{
    store: store, 
    selModel: Ext.create('Ext.selection.CheckboxModel'),
    viewConfig: {
    loadMask: false
    },        
    columns: [
    {header:'id', dataIndex: 'id',hidden:true }, 
    {header: "<b>Name</b>",flex:2, dataIndex: 'name',
     renderer: function(value,p,r)           
     {
      return r.data['FirstName']+ ' ' + r.data['LastName'];
     }
    }, 
    {
     id:'s',header:"<b>Status</b>",flex:1.2, dataIndex:'s', 
     editor:
     {
     xtype:'combo',
     id:'myCombo',
     editable: false,
     store: store,
     valueField: 's,
     displayField: 's',
     listeners:
     { 
      select:{
       fn:function(combo, value,rowIndex) {
        var modelCmp = Ext.getCmp('myCombo');    
        modelCmp.getRawValue();
        alert('Selected value is '+ modelCmp.getRawValue());
       }                               
      }
     },
     },
    }],
    height: 300, 
    width: 800,
    title: GridTitle,
    stripeRows:true,
    bbar: new Ext.PagingToolbar({
            store: store,
            pageSize: 50,
            displayInfo: true
    }),
    plugins : [{ptype:'cellediting',clicksToEdit:1
    },
    { ptype:'pagingselectpersist'
    }],   
    renderTo: Ext.getBody(),                        
    });
    
    
    store.loadPage(1);
    
    Code for plugin :
    
    Source for the plugin code is http://jsfiddle.net/Whkbu/2/

    It would be great if some one can guide me on this.

    Thank you,
    Mahesh

  2. I've placed the few lines of javascript code(Green font) in select and selectPage functions to grab the id's over multiple pages.

    Code:
    Ext.define('Ext.ux.grid.plugin.PagingSelectionPersistence', {
    alias: 'plugin.pagingselectpersist',
    extend: 'Ext.AbstractPlugin',
    pluginId: 'pagingSelectionPersistence',
    
    
    //array of selected records
    selection: [],
    //hash map of record id to selected state
    selected: {},
        
    init: function(grid) {
     
     this.grid = grid;
     this.selModel = this.grid.getSelectionModel();
     this.isCheckboxModel = (this.selModel.$className == 'Ext.selection.CheckboxModel');
     this.origOnHeaderClick = this.selModel.onHeaderClick;
     this.bindListeners();
    },
    
    
    
    
    destroy: function() {
     this.selection = [];
     this.selected = {};
     this.disable();
    },
    
    
    enable: function() {
     var me = this;
     if(this.disabled && this.grid) {
      this.grid.getView().on('refresh', this.onViewRefresh, this);
      this.selModel.on('select', this.onRowSelect, this);
      this.selModel.on('deselect', this.onRowDeselect, this);
      if(this.isCheckboxModel) {
       this.selModel.onHeaderClick = function(headerCt, header, e) {
       var isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
       me.origOnHeaderClick.apply(this, arguments);        
       if(isChecked) {
        me.onDeselectPage();
       }
       else {
        me.onSelectPage();
        }
       };
      }
     }
     this.callParent();
    },
        
    disable: function() {
     if(this.grid) {
      this.grid.getView().un('refresh', this.onViewRefresh, this);
      this.selModel.un('select', this.onRowSelect, this);
      this.selModel.un('deselect', this.onRowDeselect, this);
      this.selModel.onHeaderClick = this.origOnHeaderClick;
     }
     this.callParent();
    },
    
    
    
    
    bindListeners: function() {
     var disabled = this.disabled;
     this.disable();
     if(!disabled) {
      this.enable();
     }
    },
    
    
       
    onViewRefresh : function(view, eOpts) {
     var store = this.grid.getStore(),
     sel = [],
     hdSelectState,
     rec,
     i;
     this.ignoreChanges = true;
     for(i = store.getCount() - 1; i >= 0; i--) {
      rec = store.getAt(i);
      if(this.selected[rec.getId()]) {
       sel.push(rec);
      }
     }
     this.selModel.select(sel, false);
    
    
     if(this.isCheckboxModel) {
      hdSelectState = (this.selModel.selected.getCount() === this.grid.getStore().getCount());
      this.selModel.toggleUiHeader(hdSelectState);
     }
     this.ignoreChanges = false;
    },
        
    onRowSelect: function(sm, rec, idx, eOpts) {
     if(this.ignoreChanges === true) {
      return;
     }
     if(!this.selected[rec.getId()]) 
     {  
      this.selection.push(rec);
      this.selected[rec.getId()] = true;
     }
      var r = grid.getSelectionModel().getSelection();  
      var results=new Array();
       for(i=0; i<=r.length-1; i++){
        var checkarray=r[i].get('id');   
       }
    results.push(checkarray);
     alert('Selected Record is'+results);
    },
          
    onRowDeselect: function(sm, rec, idx, eOpts) {
     var i; 
     if(this.ignoreChanges === true) {
      return;
     }    
     if(this.selected[rec.getId()])
     {  
      for(i = this.selection.length - 1; i >= 0; i--) {
       if(this.selection[i].getId() == rec.getId()) {
        this.selection.splice(i, 1);
        this.selected[rec.getId()] = false;
        break;
       }
      }
     }
    },
        
    onSelectPage: function(){ 
     var sel = this.selModel.getSelection(),
     selectedCheckboxLength= this.getPersistedSelection().length, 
     i;
     for(i = 0; i < sel.length; i++) {
      selection1=this.onRowSelect(this.selModel, sel[i]); 
     }
     if(selectedCheckboxLength!== this.getPersistedSelection().length) {
      this.selModel.fireEvent('selectionchange', this.selModel, [], {});
     }
     var results=new Array();
     var r = grid.getSelectionModel().getSelection();  
      for(i=0; i<=r.length-1; i++){  
       var checkarray=r[i].get('id');  
       results.push(checkarray); 
       results.sort();
       for ( var i = 1; i < results.length; i++ ){
        if ( results[i] === results[ i - 1 ] ) {
         results.splice( i--, 1 );
        }  
       }   
      }  
    alert('Selected Records are'+results);
    },
       
    onDeselectPage: function() {
     var store = this.grid.getStore(),
     selectedCheckboxLength= this.getPersistedSelection().length,
     i;
        
     for(i = store.getCount() - 1; i >= 0; i--) {
      this.onRowDeselect(this.selModel, store.getAt(i));
     }        
     if(selectedCheckboxLength!== this.getPersistedSelection().length) {
      this.selModel.fireEvent('selectionchange', this.selModel, [], {});
     }
    },  
        
    getPersistedSelection: function() {
      return [].concat(this.selection);
    }, 
       
    clearPersistedSelection: function(){ 
        var changed = (this.selection.length > 0);   
        this.selection = [];
        this.selected = {};
        this.onViewRefresh();    
        if(changed) {
         this.selModel.fireEvent('selectionchange', this.selModel, [], {});
       }
    }
    
    
    });

  3. #2
    Sencha User
    Join Date
    Jun 2012
    Location
    Hyderabad,India
    Posts
    20
    Answers
    4
    Vote Rating
    0
    Mahesh Sakunala is on a distinguished road

      0  

    Default


    Hello folks,
    I am still waiting on this problem,any possible solution for this?

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Location
    Hyderabad,India
    Posts
    20
    Answers
    4
    Vote Rating
    0
    Mahesh Sakunala is on a distinguished road

      0  

    Default Solved the issue

    Solved the issue


    I've placed the few lines of javascript code(Green font) in select and selectPage functions to grab the id's over multiple pages.

    Code:
    Ext.define('Ext.ux.grid.plugin.PagingSelectionPersistence', {
    alias: 'plugin.pagingselectpersist',
    extend: 'Ext.AbstractPlugin',
    pluginId: 'pagingSelectionPersistence',
    
    
    //array of selected records
    selection: [],
    //hash map of record id to selected state
    selected: {},
        
    init: function(grid) {
     
     this.grid = grid;
     this.selModel = this.grid.getSelectionModel();
     this.isCheckboxModel = (this.selModel.$className == 'Ext.selection.CheckboxModel');
     this.origOnHeaderClick = this.selModel.onHeaderClick;
     this.bindListeners();
    },
    
    
    
    
    destroy: function() {
     this.selection = [];
     this.selected = {};
     this.disable();
    },
    
    
    enable: function() {
     var me = this;
     if(this.disabled && this.grid) {
      this.grid.getView().on('refresh', this.onViewRefresh, this);
      this.selModel.on('select', this.onRowSelect, this);
      this.selModel.on('deselect', this.onRowDeselect, this);
      if(this.isCheckboxModel) {
       this.selModel.onHeaderClick = function(headerCt, header, e) {
       var isChecked = header.el.hasCls(Ext.baseCSSPrefix + 'grid-hd-checker-on');
       me.origOnHeaderClick.apply(this, arguments);        
       if(isChecked) {
        me.onDeselectPage();
       }
       else {
        me.onSelectPage();
        }
       };
      }
     }
     this.callParent();
    },
        
    disable: function() {
     if(this.grid) {
      this.grid.getView().un('refresh', this.onViewRefresh, this);
      this.selModel.un('select', this.onRowSelect, this);
      this.selModel.un('deselect', this.onRowDeselect, this);
      this.selModel.onHeaderClick = this.origOnHeaderClick;
     }
     this.callParent();
    },
    
    
    
    
    bindListeners: function() {
     var disabled = this.disabled;
     this.disable();
     if(!disabled) {
      this.enable();
     }
    },
    
    
       
    onViewRefresh : function(view, eOpts) {
     var store = this.grid.getStore(),
     sel = [],
     hdSelectState,
     rec,
     i;
     this.ignoreChanges = true;
     for(i = store.getCount() - 1; i >= 0; i--) {
      rec = store.getAt(i);
      if(this.selected[rec.getId()]) {
       sel.push(rec);
      }
     }
     this.selModel.select(sel, false);
    
    
     if(this.isCheckboxModel) {
      hdSelectState = (this.selModel.selected.getCount() === this.grid.getStore().getCount());
      this.selModel.toggleUiHeader(hdSelectState);
     }
     this.ignoreChanges = false;
    },
        
    onRowSelect: function(sm, rec, idx, eOpts) {
     if(this.ignoreChanges === true) {
      return;
     }
     if(!this.selected[rec.getId()]) 
     {  
      this.selection.push(rec);
      this.selected[rec.getId()] = true;
     }
      var r = grid.getSelectionModel().getSelection();  
      var results=new Array();
       for(i=0; i<=r.length-1; i++){
        var checkarray=r[i].get('id');   
       }
    results.push(checkarray);
     alert('Selected Record is'+results);
    },
          
    onRowDeselect: function(sm, rec, idx, eOpts) {
     var i; 
     if(this.ignoreChanges === true) {
      return;
     }    
     if(this.selected[rec.getId()])
     {  
      for(i = this.selection.length - 1; i >= 0; i--) {
       if(this.selection[i].getId() == rec.getId()) {
        this.selection.splice(i, 1);
        this.selected[rec.getId()] = false;
        break;
       }
      }
     }
    },
        
    onSelectPage: function(){ 
     var sel = this.selModel.getSelection(),
     selectedCheckboxLength= this.getPersistedSelection().length, 
     i;
     for(i = 0; i < sel.length; i++) {
      selection1=this.onRowSelect(this.selModel, sel[i]); 
     }
     if(selectedCheckboxLength!== this.getPersistedSelection().length) {
      this.selModel.fireEvent('selectionchange', this.selModel, [], {});
     }
     var results=new Array();
     var r = grid.getSelectionModel().getSelection();  
      for(i=0; i<=r.length-1; i++){  
       var checkarray=r[i].get('id');  
       results.push(checkarray); 
       results.sort();
       for ( var i = 1; i < results.length; i++ ){
        if ( results[i] === results[ i - 1 ] ) {
         results.splice( i--, 1 );
        }  
       }   
      }  
    alert('Selected Records are'+results);
    },
       
    onDeselectPage: function() {
     var store = this.grid.getStore(),
     selectedCheckboxLength= this.getPersistedSelection().length,
     i;
        
     for(i = store.getCount() - 1; i >= 0; i--) {
      this.onRowDeselect(this.selModel, store.getAt(i));
     }        
     if(selectedCheckboxLength!== this.getPersistedSelection().length) {
      this.selModel.fireEvent('selectionchange', this.selModel, [], {});
     }
    },  
        
    getPersistedSelection: function() {
      return [].concat(this.selection);
    }, 
       
    clearPersistedSelection: function(){ 
        var changed = (this.selection.length > 0);   
        this.selection = [];
        this.selected = {};
        this.onViewRefresh();    
        if(changed) {
         this.selModel.fireEvent('selectionchange', this.selModel, [], {});
       }
    }
    
    
    });