PDA

View Full Version : Save more than one state for GridPanel



nicholasnet
7 Mar 2011, 8:33 AM
I ran into a situation where I have to save different state of a gridpanel (default view, custom view etc). I figured out how to save state and retrieve state of gird and save in a database. But some how gridpanel is not applying state properly. Here is my gridpanel code.


PRS.Grid = Ext.extend(Ext.grid.GridPanel,
{
/* @private */
constructor: function(config)
{
PRS.Grid.superclass.constructor.call(this, config);
},
initComponent: function()
{
var cfg =
{
store: new Ext.data.ArrayStore
({
autoLoad: true,
autoDestroy: true,
fields:
[
{name:'company'},
{name:'price', type:'float'},
{name:'change', type:'float'},
{name:'pctChange', type:'float'},
{name:'lastChange',type:'date', dateFormat: 'n/j h:ia'}
],
data:
[
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am']
]
}),
columns:
[{
id: 'company',
header: 'Company',
sortable : true,
dataIndex: 'company'
},{
header: 'Price',
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
},{
header : 'Change',
width : 75,
sortable : true,
dataIndex: 'change'
},{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}],
saveStateWindow: null,
tbar:
[{
text: 'You are viewing:'
},{
xtype: 'combo',
width: 80,
typeAhead: true,
triggerAction: 'all',
disabled: true,
mode: 'local',
forceSelection: true,
hiddenName: 'stateId',
selectOnFocus:true,
displayField:'name',
ref: '../stateCombo',
valueField: 'id',
listeners:
{
scope: this,
render: function(combo)
{
var grd = this;
combo.store.on('load', function(store, data, options)
{
grd.saveAsStateBtn.enable();

var applied = false;
var setStateValue = Ext.util.Cookies.get('reportStateName');

Ext.each(data, function(d)
{
//meaning no cookie was set so first time.
if(setStateValue === null)
{
if(d.data.machineName === 'default')
{
if(d.data.value !== '')
{

grd.applyState(PRS.StateProvider.decodeState(d.data.value));
//grd.getView().refresh();
applied = true;
combo.setValue(d.data.id);//Here value should be fetched from cookie
return;
}
applied = true;
combo.setValue(d.data.id);//Here value should be fetched from cookie
return;
}
}
});

grd.doLayout();
if(data.length !== 0)
{
combo.enable();
grd.saveStateBtn.enable();
}

grd.el.unmask();
grd = null;
});
},
change: function(combo, newValue, oldValue)
{
grd = this;
grd.el.mask('Applying the state please wait');
var grd = this;
var data = combo.store.data.items;
Ext.each(data, function(d)
{
d.data.id = parseInt(d.data.id, 10);

if(d.data.id === newValue)
{
Ext.util.Cookies.set('reportStateName', d.data.machineName);
grd.applyState(PRS.StateProvider.decodeState(d.data.value));
grd.doLayout();
}
});
grd.el.unmask();
grd = null;
}
},
store: new Ext.data.JsonStore
({
fields:
[{
name: 'id',
type: 'int'
},{
name: 'name',
type: 'string'
},{
name: 'machineName',
type: 'string'
},{
name: 'value',
type: 'string'
}],
proxy : new Ext.data.HttpProxy
({
method: 'GET',
disableCaching: false,
disableCacheParam: false,
url: BASEURL + 'persists/getSavedState'
}),
autoLoad: true,
idProperty: 'id'
})
},{
text: 'state.'
},'->',
{
text: 'Save this sate',
iconCls: 'save16',
scope: this,
ref: '../saveStateBtn',
disabled: true,
handler: function(btn ,e)
{
var grid = this, gridEl = this.el;
if((grid.stateCombo.getValue() === '') || (grid.stateCombo.getValue() === null))
{
Ext.MessageBox.show
({
title: 'ERROR',
msg: 'Please select state or save as new',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}

else
{
gridEl.mask('Saving your state please wait...');

var st = this.getState();
var enc = PRS.StateProvider.encodeState(st);

Ext.Ajax.request
({
url: BASEURL+'persists/saveState',
success: function(action)
{
var msg = Ext.decode(action.responseText);
if(msg.success)
{
Ext.MessageBox.show
({
title: 'SUCCESS',
msg: 'Sate was saved successfully',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});


//Here update the store as well
var store = grid.stateCombo.getStore();
var comboValue = grid.stateCombo.getValue();
var idx = store.findExact('id', comboValue);
var recordToBeModified = store.getAt(idx);
//console.log(recordToBeModified);
recordToBeModified.set('value', enc);
recordToBeModified.commit();
//store.save();
}
else
{
Ext.MessageBox.show
({
title: 'ERROR',
msg: 'Unable to save state',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
}
gridEl.unmask();
st = null;
enc = null;
grid = null;
gridEl = null;
},
failure: function()
{
Ext.MessageBox.show
({
title: 'ERROR',
msg: 'Could not reach server',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
gridEl.unmask();
st = null;
enc = null;
grid = null;
gridEl = null;
},
params:
{
stateId: grid.stateCombo.getValue(),
state: enc
}
});
}
}
},{
text: 'Save as another state',
iconCls: 'saveAs16',
ref: '../saveAsStateBtn',
disabled: true,
scope: this,
handler: function(btn, e)
{
this.saveStateWindow.show();
}
}]
};
Ext.applyIf(this, cfg);

Ext.applyIf(this.initialConfig, cfg);

cfg =
{
border: false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
bodyBorder: false,
stripeRows: true,
stateful: true,
stateId: 'grid'
};

Ext.apply(this, cfg);
Ext.apply(this.initialConfig, cfg);
PRS.Grid.superclass.initComponent.apply(this, arguments);
this.on
({
afterrender: function(grid)
{
this.el.mask('Applying the saved state please wait');
},
scope: this
});
},
onRender: function (container, position)
{
PRS.Grid.superclass.onRender.apply(this, arguments);
var el = this.el;
var grd = this;
this.saveStateWindow = new PRS.SaveStateWindow
({
grid: grd,
renderTo: el
});
},
initEvents: function()
{
//call parent - be very careful to always call the parent, otherwise you may break the component
PRS.Grid.superclass.initEvents.apply(this, arguments);
},
afterRender: function()
{
PRS.Grid.superclass.afterRender.apply(this, arguments);
},
beforeDestroy: function()
{
PRS.Grid.superclass.beforeDestroy.apply(this, arguments);
},
onDestroy: function()
{
this.saveStateWindow.destroy();
PRS.Grid.superclass.onDestroy.apply(this, arguments);
}
});
Ext.reg('PRSGrid', PRS.Grid);

and here is my custom state provider pulled from stateProvider.js from extjs source itself


PRS.StateProvider = function()
{
return {
encodeState: function(v)
{
var enc, flat = '', i = 0, len, key;
if(v == null)
{
return 'e:1';
}
else if(typeof v == 'number')
{
enc = 'n:' + v;
}
else if(typeof v == 'boolean')
{
enc = 'b:' + (v ? '1' : '0');
}
else if(Ext.isDate(v))
{
enc = 'd:' + v.toGMTString();
}
else if(Ext.isArray(v))
{
for(len = v.length; i < len; i++)
{
flat += PRS.StateProvider.encodeState(v[i]);
if(i != len - 1)
{
flat += '^';
}
}
enc = 'a:' + flat;
}
else if(typeof v == 'object')
{
for(key in v)
{
if(typeof v[key] != 'function' && v[key] !== undefined)
{
flat += key + '=' + PRS.StateProvider.encodeState(v[key]) + '^';
}
}
enc = 'o:' + flat.substring(0, flat.length-1);
}
else
{
enc = 's:' + v;
}
return escape(enc);

},
decodeState: function(cookie)
{
var re = /^(a|n|d|b|s|o|e)\:(.*)$/,matches = re.exec(unescape(cookie)), all, type, v, kv;
if(!matches || !matches[1])
{
return; // non state cookie
}
type = matches[1];
v = matches[2];
switch(type)
{
case 'e':
return null;
case 'n':
return parseFloat(v);
case 'd':
return new Date(Date.parse(v));
case 'b':
return (v == '1');
case 'a':
all = [];
if(v != '')
{
Ext.each(v.split('^'), function(val)
{
all.push(PRS.StateProvider.decodeState(val));
});
}
return all;
case 'o':
all = {};
if(v != '')
{
Ext.each(v.split('^'), function(val)
{
kv = val.split('=');
all[kv[0]] = PRS.StateProvider.decodeState(kv[1]);
});
}
return all;
default:
return v;
}
}
}
}();

I would really appreciate if anyone can give any insight on this. Why grid.applyState is not working as expected. Attached is the screenshot of grid after applying the state.
25017