Results 1 to 3 of 3

Thread: Dynamic grid column setting save/load

  1. #1

    Default Dynamic grid column setting save/load

    I thought I'd posted this question last week but it hasn't shown up yet so here it is again:

    I'm using Sencha Architect 4.2.8 and ExtJS framework 7.2.0. My task is to be able to allow the user to select a group of columns and save them with an identifier so that that group layout can be reloaded at a future date, from a dropdown list of groups. I have successfully used getState() to retrieve the column configuration and save it to the datebase, and if I hook the staterestore event I can have the "last used" configuration (which is also saved) load on form creation. My issue is when selecting a new configuration (state) from the dropdown and attempting to use applyState() to reset the grid columns. It works to a point; if the current layout shows all columns and the selected layout has fewer visible, it will show only the columns it's supposed to (in the order the user saved) with no problem. But if a subsequent selection contains more columns than currently displayed, applyState() will move columns around as necessary and allow space in the grid for the new columns, but neither the column headers nor the columns themselves show in the grid. Only columns in common between the two configurations are shown. The grid is set as stateful. I have gone through and given each column its own specific stateID but admittedly haven't see what effect that has on things due to other priorities popping up.
    I've tried several of the solutions presented online - using grid.getView().refresh(), grid.updateLayout() (alone and in combination). I've tried the trick where I suspendLayout, traverse the columns and show/hide the hidden columns then resumeLayout. I haven't tried grid.reconfigure() because as far as I can tell the columns parameter is a different object than that returned by getState().
    It's frustrating to be SO close to having it do what I want and get hung up on one last thing
    so any suggestions will be greatly appreciated. Or if there's an alternate to getState()/applyState() that will do what I need I'd appreciate that information as well.

  2. #2
    Sencha Premium User
    Join Date
    Dec 2010
    Posts
    288

    Default

    I did something similar and wrote a plugin to take care of it. Not sure if it works exactly like what you are trying to achieve but maybe it would help some. I wrote this a long time ago but it still works with Ext JS 7.
    For it to work each column must have a reference value set.

    Code:
    Ext.define('Ext.ux.grid.GridPrefs', {
        extend: 'Ext.plugin.Abstract',
        alias: 'plugin.gridprefs',
        init: function (grid) {
            var me = this;
            grid.on('afterrender', me.onAfterRender, me);
            grid.on('beforerender', me.applyPrefs, me);
            me.storeListener = grid.getStore().on({
                destroyable: true,
                beforeload: function (store) {
                    me.applySort(grid, store);
                },
                load: function (store) {
                    if (store.remoteSort) {
                        delete store.getProxy().extraParams.sort;
                        delete store.getProxy().extraParams.dir;
                    }
                    me.storeListener.destroy();
                }
            });
            grid.on('close', function () {
                grid.getStore().removeAll();
            });
        },
        saveState: function (grid) {
            var headerCt = grid.getView().headerCt,
                alias = 'widget.' + grid.getXType(),
                columns = [], sorters, sortField, sortDir;
            Ext.each(headerCt.getGridColumns(), function (column) {
                columns.push({
                    colid: column.getReference(),
                    colindex: column.fullColumnIndex,
                    hidden: column.isHidden(),
                    colwidth: (!column.getWidth()) ? 100 : column.getWidth()
                });
            });
            if (grid.getStore().isSorted()) {
                sorters = grid.getStore().getSorters();
                if (sorters.items[0]) {
                    sortField = sorters.items[0].config.property;
                    sortDir = sorters.items[0].config.direction;
                }
            }
            Ext.Ajax.request({
                url: 'request',
                method: 'POST',
                params: {
                    direc: 'user',
                    model: 'prefs',
                    action: 'grid_column',
                    cmd: 'save',
                    jsid: alias,
                    columns: Ext.encode(columns),
                    sortfield: sortField,
                    sortdir: sortDir
                },
                success: function (result, opt) {
                    Ext.getStore('user.GridPrefs').reload();
                }
            });
        },
        onAfterRender: function (grid) {
            var me = this,
                headerCt = grid.getView().headerCt,
                menu = headerCt.getMenu(),
                alias = 'widget.' + grid.getXType();
            if (!menu.down('#gridprefs')) {
                menu.add({
                        text: 'Save Columns',
                        itemId: 'gridprefs',
                        icon: 'images/icons/save.png',
                        handler: function () {
                            me.saveState(grid);
                        }
                    },
                    {
                        text: 'Reset Columns',
                        icon: 'images/icons/reload.png',
                        handler: function () {
                            Ext.Ajax.request({
                                url: 'request',
                                method: 'POST',
                                params: {
                                    direc: 'user',
                                    model: 'prefs',
                                    action: 'grid_column',
                                    cmd: 'reset',
                                    jsid: alias
                                },
                                success: function (result, opt) {
                                    Ext.getStore('user.GridPrefs').reload();
                                }
                            });
                        }
                    }
                );
            }
        },
        applySort: function (grid, store) {
            var gc = Ext.getStore('user.GridPrefs'),
                alias = 'widget.' + grid.getXType(),
                colRecords = gc.query('jsid', alias),
                record = colRecords.items;
            if (record[0]) {
                var sortField = record[0].get('sortfield'),
                    sortDir = record[0].get('sortdir');
                if (store.remoteSort) {
                    store.getProxy().setExtraParam('sort', sortField);
                    store.getProxy().setExtraParam('dir', sortDir);
                }
                else {
                    store.sort(sortField, sortDir);
                }
            }
        },
        applyPrefs: function (grid) {
            var column, jsId, colId, colIndex, colWidth, hidden, curIndex,
                headerCt = grid.getView().headerCt,
                gc = Ext.getStore('user.GridPrefs'),
                alias = 'widget.' + grid.getXType(),
                colRecords = gc.query('jsid', alias);
            if (colRecords) {
                jsId = false;
                Ext.each(colRecords.items, function (record, index) {
                    jsId = record.get('jsid');
                    if (alias == jsId) {
                        colId = record.get('colid');
                        colIndex = record.get('colindex');
                        hidden = record.get('hidden');
                        colWidth = record.get('colwidth');
                        //position columns
                        if (colIndex || colIndex === 0) {
                            column = grid.lookupReference(colId);
                            curIndex = column.getIndex();
                            if (curIndex != colIndex) {
                                headerCt.move(curIndex, colIndex);
                            }
                            //set hidden
                            if (hidden == 1) {
                                column.hidden = true;
                            }
                            else {
                                column.hidden = false;
                            }
                            //set widths
                            if (colWidth) {
                                //never been able to get this to work
                                //column.setWidth(colWidth);
                                //column.width = colWidth;
                            }
                        }
                    }
                });
            }
        }
    });
    model used for store

    Code:
    Ext.define('MyApp.model.user.GridPrefs', {
        extend: 'Ext.data.Model',
    
    
        requires: [
            'Ext.data.field.Boolean'
        ],
    
    
        fields: [
            {
                name: 'id'
            },
            {
                name: 'jsid'
            },
            {
                name: 'colid'
            },
            {
                name: 'colindex'
            },
            {
                type: 'boolean',
                name: 'hidden'
            },
            {
                name: 'colwidth'
            },
            {
                name: 'sortfield'
            },
            {
                name: 'sortdir'
            }
        ]
    });
    In SA you would add a Process Config to the grid and then in the editor set:

    Code:
        processMyGridPanel: function(config) {
            this.plugins.push({ptype: 'gridprefs'});
        }

  3. #3

    Default

    Thank you for posting that. It'll take me a bit to go through it (only been doing Sencha/JS a year or so) but I'm hopeful something in there will click. I've already given each column stateID, I'll just copy that to reference. I'll post again when I get it working with what the solution ended up being.

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
  •