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:
Dynamic grid column setting save/load
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.
