PDA

View Full Version : not able add renderer ti save the grid state



kamalakarreddy vancha
10 Nov 2014, 2:42 AM
Hi..
i am saving grid state with a description.
Here is grid state before change the column positions(originalState.PNG).
Next i am changing the grid column positions like in ChangedState.PNG.
After changed the grid column positions i am saving the grid state(after changed)with description i.e
i entered in Grid state combo box.
it will allow the new values and if the entered value already exists in combo it will display.
With that description i am able to save the grid state.
Up to now everything is fine.
From here only am facing the problem.
Here i am using the renderer to display the color in the grid column and to display the date also.
When i retrieve the grid state means...
I entered the value in grid state combo box and tabbed out then the saved grid state with that combo value should be
reload the grid with saved state.
Grid is reloading here with saved state
But
Extra empty column is adding and renderer is not working means color is not displaying (savedState2.PNG)and
date is also coming like mon nov 2014 03:55
Here is my code to save the grid state...


/*****************Used to save the grid state***********************/
onReconfigure: function (grid, store, columnConfigs) {
if(grid.getPlugin && grid.getPlugin('editorPlugin')){

var columns = grid.headerCt.getGridColumns(),
editorPlugin = grid.getPlugin('editorPlugin');
editorPlugin.initFieldAccessors(columns);
Ext.destroy(editorPlugin.editor);
editorPlugin.editor = null;
}
},
getColumnConfigFromDataIndex : function(columns, dataIndex){

var me = this;
for (var j = 0; j < columns.length; j++) {
if (columns[j].dataIndex == dataIndex) {
return {
dataIndex:columns[j].dataIndex,
header:columns[j].header,
width:columns[j].width
};
}else if(columns[j].columns && Ext.isArray(columns[j].columns)){
var a = me.getColumnConfigFromDataIndex(columns[j].columns,dataIndex);
if(!Ext.isEmpty(a)){
return a;
}
}

}
},
getColumnConfigFromText : function(columns,text){
var me = this;
for (var j = 0; j < columns.length; j++) {
if (columns[j].text == text || columns[j].header == text) {
return Ext.clone(columns[j]);
}else if(columns[j].columns && Ext.isArray(columns[j].columns)){
var a = me.getColumnConfigFromText(columns[j].columns,text);
if(!Ext.isEmpty(a)){
return a;
}
}

}
},
buildColumnsFromState : function(savedColumns,newColumns){
var me = this;

for ( var i = 0; i < savedColumns.length; i++) {
if (savedColumns[i].header) {
var columnConfig = me.getColumnConfigFromText(me.columns,savedColumns[i].header);
if(columnConfig){
var colFragment = {
header : savedColumns[i].header,
columns : [],
hidden : savedColumns[i].hidden,
locked : savedColumns[i].locked,
width : savedColumns[i].width,
renderer : me.originalColumns[i].renderer
};
newColumns.push(colFragment);
me.buildColumnsFromState(savedColumns[i].columns,colFragment.columns);
}
}else if(savedColumns[i].dataIndex){
var columnConfig = me.getColumnConfigFromDataIndex(me.columns,savedColumns[i].dataIndex);
if(columnConfig){

Ext.apply(columnConfig,savedColumns[i]);
newColumns.push(columnConfig);
}
} else if(GlogalFunction.isEmptyObj(savedColumns[i]) && Ext.isEmpty(me.columns[i].dataIndex)){
newColumns.push(me.columns[i]);
}
}

},
applyState : function(){
var me = this;
Ext.getBody().mask('Loading state information ...');
try {
if(GlobalVars.gridStatObj){

var savedColumnsArray = Ext.decode(GlobalVars.gridStatObj);
var newColums= [];
me.buildColumnsFromState(savedColumnsArray,newColums);
if(newColums.length>0){
me.columns = newColums;
}
//me.reconfigure(me.getStore(),me.columns)
me.reconfigure(me.getStore(),savedColumnsArray.columns);
me.view.refresh();
me.unmask();
}
} catch (e) {
Ext.getBody().unmask();
}

},
configureStateButtons:function(){
var me = this;

me.tbar = me.tbar || ['->'];
var Store = {
model: 'GridStateModel',
url: 'gridstate/getGridStateDtls',
paging: true,
listeners: {
beforeload: function () {
this.proxy.extraParams.gridId = me.gridId || me.id;
}
}
};
var descr = {
xtype: 'mycombobox',
labelWidth: 100,
width: 300,
name: 'gridCd',
itemId:'gridCdItemId',
displayField: 'gridCd',
submitValue : true,
valueField: 'gridCd',
storeObj: Store,
fieldLabel:'Grid State',
validateUrlme:'gridstate/validateGridStateDtls',
validateParams: [{
name:'gridId',
val: me.gridId || me.id
}],
columns:[{
header:'grid State',
width:80,
dataIndex:'gridCd'
}],
validateSuccessFunc: function (serverRespOjbData) {
GlobalVars.gridStatObj = serverRespOjbData.gridStateObj;
me.applyState();
return true;
},
validateFailFuncme: function () {

return true;
}
};


var saveStateBtn = {
xtype : "button",
iconCls: 'Save-Grid-state',
tooltip :'saveGridState',
scope:me,
handler : function() {
this.saveState();


}
};

Ext.Array.insert(me.tbar, me.tbar.length, [descrme,saveStateBtn]);

me.on('reconfigure', me.onReconfigure,me);
},


saveState:function(){
var me = this;
var gridColumns = me.columns;

var columnMetaArray = me.getState();
if(columnMetaArray.columns){

var paramObj = {
gridId : me.gridId || me.id,
gridCd : me.down('#gridCdItemId').getValue(),
gridStateObj : Ext.encode(columnMetaArray)
};
var body = Ext.getBody();
body.mask('Saving....');
Ext.Ajax.request({
url : 'gridstate/saveGridState',
method : 'POST',
params : paramObj,
success : function(response) {
GlobalVars.gridStatObj[paramObj.gridId]=paramObj.gridStateObj;
Ext.MessageBox.show({
title: 'saveSuccessTtl',
msg: 'recrdSvdScssflyMsg',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.INFO
});
me.down('#gridCdItemId').reset();
body.unmask();
},
failure : function() {
Ext.MessageBox.show({
title:''errorMsg',
msg:'serverResponceMsg',
buttons: Ext.MessageBox.OK,
icon: Ext.MessageBox.ERROR
});
body.unmask();
}

});
}

}


GlogalFunction.isEmptyObj = function(obj) {

for ( var key in obj) {
if (obj[key] instanceof Array) {
var arr = obj[key];
for ( var arrKey in arr) {
if (!Ext.isEmpty(arr[arrKey])) {
return false;
}
}
} else if (!Ext.isEmpty(obj[key])) {
return false;
}
}
return true;
};


GlobalVars.gridStatObj value.........


{
"columns": [{
"width": 24,
"header": "&#160;"
}, {
"dataIndex": "lifeNo",
"width": 80,
"header": "column2"
}, {
"dataIndex": "ctrNo",
"width": 100,
"header": "column1"
}, {
"width": 50,
"header": "column3"
}, {
"dataIndex": "eirProcessedFlg",
"hidden": true,
"width": 55,
"header": "column3"
}, {
"dataIndex": "eirNo",
"hidden": true,
"width": 100,
"header": "column4"
}, {
"dataIndex": "bkngNo",
"width": 100,
"header": "column4"
}, {
"dataIndex": "blNo",
"width": 100,
"header": "column5"
}, {
"dataIndex": "baseSts",
"width": 90,
"header": "column6"
}, {
"dataIndex": "lineCd",
"width": 90,
"header": "colum7"
}]
}








Help me in this....






Thanks
Kamalakar Reddy

joel.watson
11 Nov 2014, 3:31 PM
Hi Kamalakar--

If possible, could you create a version of this in Fiddle (https://fiddle.sencha.com/#fiddle) that others can run? That will definitely go a long way in helping others offer suggestions on your code and functionality.

Thanks!

kamalakarreddy vancha
18 Nov 2014, 2:40 AM
Hi..
thanks for your replay..
here i am creating grid with my own component.
That's why i am not able to create the Fiddle.
With this code i am saving the grid state.
In the restoring the grid state only i am facing the problem.
Please help me in this...

Thanks in Advance....
Kamalakar Reddy