1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    mmajid is on a distinguished road

      0  

    Question Grid multiSelect and paging

    Grid multiSelect and paging


    Hello everybody I'm trying to implement a multiselection on pagging grid panel however when i switch from page to another the grid loose the selection. is there a special way to do this?
    if is not I'm trying to manage the selection so i've added a handler on the 'change' paging docked item but the selection is empty when I pass from page to page.
    can somebody help
    Code:
     this.selectedElements = [];
            var sm = null;
            if (!this.singleSelect) {
                var sm = Ext.create('Ext.selection.CheckboxModel');
            }
     if (!this.store) {
                this.store = Ext.create('mega.model.util.list.Store', {
                    //buffered: true, //for infinite scroller
                    pageSize: this.pageSize,
                    remoteSort: true,
                    remoteFilter: true,
                    url: this.url,
                    autoDestroy: true,
                    isAPropertyPage: false,
                    cookieId: this.cookieId,
                    fields: this._getFields(this.cols)
                });
            }
     var dockedPagingItems = Ext.create('Ext.toolbar.Paging', {
                store: this.store,
                dock: 'bottom',
                displayInfo: true
            });
    
            dockedPagingItems.on('change', function (tool, page, eOps) {
                var selectdOnPage = this.grid.getSelectionModel().getSelection();
                for (var i = 0; i < selectdOnPage.length; i++) {
                    this.selectedElements.push(selectdOnPage[i]);
                }
                console.log("Page Changed -> Selected :" + this.selectedElements.length);
    
            }, this);
    
    this.grid = Ext.create('Ext.grid.Panel', {
                autoScroll: true,
                store: this.store,
                columns: this._getListColumns(this.cols),
                //features:[filtersCfg],
                hideHeaders: this.hideHeaders,
                enableColumnResize: true,
                enableColumnHide: false,
                enableColumnMove: false,
                _isGrid: true,
                selType: 'rowmodel',
                selModel: sm,
                viewConfig: {
                    singleSelect: true
                },
                dockedItems: [dockedPagingItems]
            });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You will need to manage the selection yourself, there is no built-in way to do this.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    4
    Vote Rating
    0
    mmajid is on a distinguished road

      0  

    Default


    I'm trying to manage the multiselection with paging and now i'm able to store selection for each page however when i'm passing from page to page i must reselect previous elements.

    I've noticed something wierd in my example the limit of each page is 50 records. when i select the first element in the second page and I get my selection
    Code:
    var records = grid.getSelectionModel().getSelection()
    the index of the selected record is 51 But if i want to select this element with the same index.
    Code:
    grid.getSelectionModel().select(records[0].index,true,true)
    it bugs. i think because the first index of the each page begins with 0 and not the limit + 1.
    Is it normal is there another way to make the previous selectes elements in a grid Selected

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The record's index is going to be the current index of the store. You shouldn't use the index, you should just keep track of the records and select the records.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.