1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    1
    Vote Rating
    1
    ronaldsaenz88 is on a distinguished road

      1  

    Default Selection of records over multiple pages in a grid - Select All

    Selection of records over multiple pages in a grid - Select All


    Hi,

    I was looking around the internet and found this link:
    http://www.sencha.com/forum/showthre...ages-in-a-grid

    I need select all the items of the grid and clear all the selections, so based on the link and modified and implemented it like this:

    Code:
    var grid, store;
    
    /**
     * Grid PagingSelectionPersistence plugin
     * 
     * Maintains row selection state when moving between pages of a paginated grid
     *
     * Public Methods:
     * getPersistedSelection() - retrieve the array of selected records across all pages
     * clearPersistedSelection() - deselect records across all pages
     * 
     *
     * @class   Ext.ux.grid.plugin.PagingSelectionPersistence
     * @extends Ext.AbstractPlugin
     * @author  Bill Dami
     * @date    December 20th, 2011
     */
    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) {
                    //For CheckboxModel, we need to detect when the header deselect/select page checkbox
                    //is clicked, to make sure the plugin's selection array is updated. This is because Ext.selection.CheckboxModel
                    //interally supresses event firings for selectAll/deselectAll when its clicked
                    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) {
                //For CheckboxModel, make sure the header checkbox is correctly
                //checked/unchecked when the view is refreshed depending on the 
                //selection state of the rows on that page (workaround for possible bug in Ext 4.0.7?)
                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;
            }
        },
        
        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(),
                len = this.getPersistedSelection().length,
                i;
            
            for(i = 0; i < sel.length; i++) {
                alert(i + sel[i]);
                this.onRowSelect(this.selModel, sel[i]);
            }
            
            if(len !== this.getPersistedSelection().length) {
                this.selModel.fireEvent('selectionchange', this.selModel, [], {});
            }
        },
        
        onDeselectPage: function() {
            var store = this.grid.getStore(),
                len = this.getPersistedSelection().length,
                i;
            
            for(i = store.getCount() - 1; i >= 0; i--) {
                this.onRowDeselect(this.selModel, store.getAt(i));
            }
            
            if(len !== this.getPersistedSelection().length) {
                this.selModel.fireEvent('selectionchange', this.selModel, [], {});
            }
        },
        
        getPersistedSelection: function() {
            return [].concat(this.selection);
        },
        
        // private
        onSelectionClear: function() {
            if (! this.ignoreSelectionChanges) {
                // selection cleared by user
                // also called internally when the selection replaces the old selection
                this.selection = [];
                this.selected = {};
            }
        }, // end onSelectionClear 
        
        clearPersistedSelection: function() {
            var changed = (this.selection.length > 0);
            
            this.selection = [];
            this.selected = {};
            this.onViewRefresh();
            
            if(changed) {
                this.selModel.fireEvent('selectionchange', this.selModel, [], {});
            }
        },
        
        
        /**
          * Selects all the rows in the grid, including those on other page
          * Be very careful using this on very large datasets
        */
        selectAll: function() {        
            var storeB = this.grid.getStore();
            storeB.suspendEvents();
            //alert(storeB.getTotalCount());
            
            storeB.load({
                params: {start: 0, limit: storeB.getTotalCount() },
                callback: function(records, operation, success) {
                    if (records.length > 0){ // Issue is here: Records returns as NULL 
                        //alert('Num Records: ' + records.length);
                        
                        for (var i = records.length - 1; i >= 0; i--) {                 
                            if(!this.selected[records[i].getId()]) 
                            {
                                this.selection.push(records[i]);
                                this.selected[records[i].getId()] = true;
                            }
                        };
                            
                        storeB.resumeEvents();
                        this.onViewRefresh();
                        
                        /*
                        this.selection = storeB.data.items.slice(0);
                        this.selected = {};
                        for (var i = this.selection.length - 1; i >= 0; i--) {
                            this.selected[this.selection[i].id] = true;
                        };*/
                    }
                    else
                    {
                        alert('Error no tiene records');
                    }
                },
                scope: this
            });
            
            
            if(!this.selected[rec.getId()]) 
            {
                this.selection.push(rec);
                this.selected[rec.getId()] = true;
            }
            
        },
    
        countAll: function() { 
            var storeA = this.grid.getStore();
            alert('store count '+ storeA.getCount());
            alert('store count '+ storeA.getTotalCount());
        }
        
    });
    
    Ext.onReady(function(){
        Ext.tip.QuickTipManager.init();
    
        Ext.define('ForumThread', {
            extend: 'Ext.data.Model',
            fields: [
                'title', 'forumtitle', 'forumid', 'username',
                {name: 'replycount', type: 'int'},
                {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
                'lastposter', 'excerpt', 'threadid'
            ],
            idProperty: 'threadid'
        });
    
        store = Ext.create('Ext.data.Store', {
            pageSize: 50,
            model: 'ForumThread',
            remoteSort: true,
            proxy: {
                type: 'jsonp',
                url: 'http://www.sencha.com/forum/topics-browse-remote.php',
                reader: {
                    root: 'topics',
                    totalProperty: 'totalCount'
                },
                simpleSortMode: true
            },
            sorters: [{
                property: 'lastpost',
                direction: 'DESC'
            }]
        });
    
        grid = Ext.create('Ext.grid.Panel', {
            id : 'test_grid',
            width: 600,
            height: 400,
            title: 'ExtJS.com - Browse Forums',
            store: store,
            selModel: Ext.create('Ext.selection.CheckboxModel'),
            plugins: [{ptype : 'pagingselectpersist'}],
            viewConfig: {
                id: 'gv',
                trackOver: true,
                stripeRows: true,
                loadMask: false
            },
            // grid columns
            columns:[{
                id: 'topic',
                text: "Topic",
                dataIndex: 'title',
                flex: 1,
                sortable: false
            },{
                text: "Author",
                dataIndex: 'username',
                width: 100,
                hidden: true,
                sortable: true
            },{
                text: "Replies",
                dataIndex: 'replycount',
                width: 70,
                align: 'right',
                sortable: true
            },{
                id: 'last',
                text: "Last Post",
                dataIndex: 'lastpost',
                width: 150,
                sortable: true
            }],
            bbar: Ext.create('Ext.PagingToolbar', {
                store: store,
                displayInfo: true,
                emptyMsg: "No topics to display"
            }),
            renderTo: 'topic-grid'
        });
    
        // trigger the data store load
        store.loadPage(1);
    });
    Link: http://jsfiddle.net/ronaldsaenz88/Whkbu/48/

    Any advice or suggestion and welcome.

    Regards,
    Ronald

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,639
    Vote Rating
    400
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    This will be useful. Thank you for the contribution.

    Scott.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar