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, [], {});
       }
    }
    
    
    });

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."