PDA

View Full Version : popup gridpanel not clear filter when close



wiulma
23 Feb 2009, 6:45 AM
Hi!
in my code I open a Window with a gridPanel inside.
this gridPanel have filters.
The first time I open my window I can see all the data, then I can filtermy data and close window.
All ok.
But, when I reopen the window (I create it dinamically) I can't see all the data but I have still the last filter applyed.
I have debug ext-all.js and I can see that the old filter is applied here:


options = options || {};if(this.fireEvent("beforeload", this, options) !== false){
Now, I think I don't destroy the window and the grid panel in the rigth way.
Can someone help me?
thanks

23 Feb 2009, 7:10 AM
we can't tell if you destroyed it the right way. http://extjs.com/learn/Ext_Forum_Help

wiulma
23 Feb 2009, 7:28 AM
I create the column model:


var columnModel = new Ext.grid.ColumnModel([{
id: 'provincia',
dataIndex: 'PROVINCIA',
header: 'Provincia',
sortable: true,
align: 'center'
}, {
id: 'comune',
dataIndex: 'COMUNE',
header: 'Comune',
sortable: true,
align: 'left'
}, {
id: 'cap',
dataIndex: 'CAP',
header: 'CAP',
sortable: true,
align: 'center'
}, {
id: 'codiceIstat',
dataIndex: 'COD_ISTAT',
header: 'Codice ISTAT',
sortable: true,
align: 'left'
}]);
I create the filter:


columnModel.defaultSortable = true;
var objProv = document.forms[formName].elements['provincia']; // getDivElementValueById(formName,'INPUT','provincia','')
var objCap = document.forms[formName].elements['cap'];
var objCodIstat = document.forms[formName].elements['codiceIstat']; // getDivElementValueById(formName,'INPUT','codiceIstat','')
var objComune = document.forms[formName].elements['comune']; // getDivElementValueById(formName,'INPUT','comune','')
// for numeric filter: value: {eq: getDivElementValueById(formName,'INPUT','cap','')}
var gridFilters = new Ext.grid.GridFilters({
filters: [{
type: 'string',
dataIndex: 'PROVINCIA',
mapField: 'provincia',
value: iif(objProv.value!='',objProv.value,null)
}, {
type: 'string',
dataIndex: 'COMUNE',
mapField: 'comune',
value: iif(objComune.value!='',objComune.value,null)
}, {
type: 'string',
dataIndex: 'CAP',
mapField: 'cap',
value: iif(objCap.value!='',objCap.value,null)
}, {
type: 'string',
dataIndex: 'COD_ISTAT',
mapField: 'codiceIstat',
value: iif(objCodIstat.value!='',objCodIstat.value,null)
}]
});
I create popup elements:


var lMessagePanel = new Ext.Panel({
region: 'north',
margins:'0 0 0 0',
autoHeight: true,
autoShow: false,
id: 'msg_lookupwin',
//hidden: 'true',
html:''
});
var lDataPanel = new Ext.grid.GridPanel({
region: 'center',
id: 'gridLookup',
margins:'0 0 0 0',
title:'Lista',
autoExpandColumn: expandField, //'deField',
autoSizeColumns: true,
autoSizeHeaders: true,
autoWidth: true,
frame:true,
store: autoDS,
trackMouseOver:false,
disableSelection:false,
loadMask: true,
cm: columnModel,
bbar: pagingBar,
plugins: gridFilters,
listeners:{
'rowdblclick':{fn: function (gridObj, rowIdx, e) {
setLookupSelectedField(divContainer,arrField, gridObj.getStore().getAt(rowIdx),arrStoreConfig['tagKeyField'],arrStoreConfig['tagFields']);
try {Ext.getCmp('lookupwin').close();
} catch (exc) {var msg = exc.message;}
}
}
}
});
I create the window:


var win = new Ext.Window({
id : 'lookupwin',
title : strTitle,
closable : true,
modal : true,
plain : true,
height : eval(winHeight),
width : eval(winWidth),
layout : 'border',
items : [lMessagePanel,lDataPanel]
});
and then I load the data store:

autoDS.load({params:arrParam});I think I do nothing about how to destroy the window, the gridPanel and the filter.
I think perhaps I have to explicit some config or write some code on the window close event.
thanks

23 Feb 2009, 7:31 AM
Are you creating a new instance of lDataPanel every time you create the window?

wiulma
23 Feb 2009, 7:36 AM
var lDataPanel = new Ext.grid.GridPanel({ I execute this every time I open the popup, then I think I create the gridPanel every time I open the popup. (and so for all the popup elements, too)
But I thought I destroyed it when I close the window.

Ext.getCmp('lookupwin').close();

23 Feb 2009, 7:42 AM
can you post the entire method where you create the grid and window and not cut it up??

wiulma
23 Feb 2009, 7:50 AM
ok.
I have a form with a input text field.
When I doubleclick on the input text field I call then getDatiLocalita function.
This is the code:


function getDatiLocalita(formName,sourceField,fgForceSearch) {
var fieldValue = getDivElementValueById(formName,'INPUT',sourceField,'');
if (fieldValue != '' || fgForceSearch) {
var strTitle = 'Ricerca Dati';
var columnModel = new Ext.grid.ColumnModel([{
id: 'provincia',
dataIndex: 'PROVINCIA',
header: 'Provincia',
sortable: true,
align: 'center'
}, {
id: 'comune',
dataIndex: 'COMUNE',
header: 'Comune',
sortable: true,
align: 'left'
}, {
id: 'frazione',
dataIndex: 'FRAZIONE',
header: 'Frazione',
sortable: true,
align: 'left'
},{
id: 'cap',
dataIndex: 'CAP',
header: 'CAP',
sortable: true,
align: 'center'
}, {
id: 'codiceIstat',
dataIndex: 'COD_ISTAT',
header: 'Codice ISTAT',
sortable: true,
align: 'left'
}]);
columnModel.defaultSortable = true;
var objProv = document.forms[formName].elements['provincia'];
var objCap = document.forms[formName].elements['cap'];
var objFrazione = document.forms[formName].elements['frazione'];
var objCodIstat = document.forms[formName].elements['codiceIstat'];
var objComune = document.forms[formName].elements['comune'];
var gridFilters = new Ext.grid.GridFilters({
filters: [{
type: 'string',
dataIndex: 'PROVINCIA',
mapField: 'provincia',
value: iif(objProv.value!='',objProv.value,null)
}, {
type: 'string',
dataIndex: 'COMUNE',
mapField: 'comune',
value: iif(objComune.value!='',objComune.value,null)
}, {
type: 'string',
dataIndex: 'FRAZIONE',
mapField: 'frazione',
value: iif(objFrazione.value!='',objFrazione.value,null)
},{
type: 'string',
dataIndex: 'CAP',
mapField: 'cap',
value: iif(objCap.value!='',objCap.value,null)
}, {
type: 'string',
dataIndex: 'COD_ISTAT',
mapField: 'codiceIstat',
value: iif(objCodIstat.value!='',objCodIstat.value,null)
}]
});
var arrStoreConfig = new Array();
arrStoreConfig['tagTotalRecords'] = 'TOTAL_COUNT';
arrStoreConfig['tagRecord'] = 'ROW';
arrStoreConfig['tagKeyField'] = 'COD_ISTAT';
arrStoreConfig['tagFields'] = new Array('PROVINCIA','COMUNE','FRAZIONE','CAP','COD_ISTAT');
var pIdDiv = 'load_' + sourceField+'_'+tabKey;
var arrField = ['provincia','comune','frazione','cap','codiceIstat'];
searchLookup(pIdDiv, formName, sourceField, "AdapterHTTP?ACTION_NAME=FiltroDatiFrazioneAction&codRicerca=COMBO&codNomeCampo=DATI_RESIDENZA&xmlResponse=TRUE", "LIST_XML", arrField, arrStoreConfig, columnModel, gridFilters, strTitle, 400, 600, 'frazione',true);
}
}

function searchLookup (idDiv, formName, sourceField,strUrl, strMessage, arrField, arrStoreConfig, columnModel, gridFilters, strTitle, wHeight, wWidth,expandField,fgSearchLike) {
if (fgCallAjax && Ext.getCmp('lookupwin')==null) {
var paramUrl ='';
var sepParam = '';
var arrFieldValue = new Array();
var idUrlField = '';
var valueUrlField = '';
var tmpValue = '';
var fieldLoad = document.getElementById(idDiv);
try {
fieldLoad.innerHTML = "<img src='../img/ext/loading.gif' />";
fieldLoad.style.display = 'inline';
} catch (exc) {}
var fgFilter = false;
var i = 0;
var len = 0;
var toFieldName = '';
for (i=0,len=arrField.length;i<len;i++) {
if (arrField[i].indexOf(sourceField)==0) {
tmpValue = '';
idUrlField = columnModel.getColumnId(i);
toFieldName = columnModel.getColumnId(i);
try {
valueUrlField = getDivElementValueById(formName,'INPUT',arrField[i],'');
if (valueUrlField!='') {
fgFilter = true;
tmpValue = valueUrlField;

if (fgSearchLike && columnModel.getDataIndex(i)!=arrStoreConfig['tagKeyField']) {
tmpValue = '*' + valueUrlField + '*';
}
paramUrl += sepParam+toFieldName+'='+tmpValue;
sepParam = '&';
}
arrFieldValue[i] = valueUrlField;
} catch (exc) {}
}
}

if (fgFilter){
if (paramUrl != '') {
paramUrl ='&' + paramUrl;
}

var searchUrl = strUrl;
fgCallAjax = false;
Ext.Ajax.request({
url: searchUrl+paramUrl+'&MESSAGE='+strMessage+'&callLookup=TRUE',
method: 'POST',
success: function(result, request) {
var fgFindKey = findKey(formName,arrField, result.responseXML,arrStoreConfig['tagKeyField'],arrStoreConfig['tagFields']);
if (!fgFindKey) {
vediLookup (formName,searchUrl,strMessage, columnModel, arrStoreConfig, arrField, arrFieldValue,strTitle, wHeight, wWidth, gridFilters,expandField);
}
},
failure: function(result, request) {
vediLookup (formName,strUrl,strMessage, columnModel, arrStoreConfig, arrField, ['',''],strTitle, wHeight, wWidth, gridFilters,expandField);
}
});
fgCallAjax = true;
} else {
vediLookup (formName,strUrl,strMessage, columnModel, arrStoreConfig, arrField, arrFieldValue,strTitle, wHeight, wWidth, gridFilters,expandField);
}
try {
fieldLoad.style.display = 'none';
fieldLoad.innerHTML = '';
} catch (exc) {}
}
}

function vediLookup (divContainer,strUrl,strMessage, columnModel, arrStoreConfig, arrField, arrFieldValue,strTitle, winHeight, winWidth, gridFilters,expandField) {
var strLookupField = '';
var sep = '';
var idField = '';
var customUrl = strUrl;
var autoDS = getSimpleDataStore(customUrl,arrStoreConfig['tagTotalRecords'],arrStoreConfig['tagRecord'],arrStoreConfig['tagKeyField'],arrStoreConfig['tagFields']);

var pagingBar = new Ext.EngPagingToolbar({store: autoDS, pageSize: lookupPageSize, plugins: gridFilters});
var lMessagePanel = new Ext.Panel({
region: 'north',
margins:'0 0 0 0',
autoHeight: true,
autoShow: false,
id: 'msg_lookupwin',
html:''
});

var lDataPanel = new Ext.grid.GridPanel({
region: 'center',
id: 'gridLookup',
margins:'0 0 0 0',
title:'Lista',
autoExpandColumn: expandField,
autoSizeColumns: true,
autoSizeHeaders: true,
autoWidth: true,
frame:true,
store: autoDS,
trackMouseOver:false,
disableSelection:false,
loadMask: true,
cm: columnModel,
bbar: pagingBar,
plugins: gridFilters,
listeners:{
'rowdblclick':{fn: function (gridObj, rowIdx, e) {
setLookupSelectedField(divContainer,arrField, gridObj.getStore().getAt(rowIdx),arrStoreConfig['tagKeyField'],arrStoreConfig['tagFields']);
try {Ext.getCmp('lookupwin').close();
} catch (exc) {var msg = exc.message;}
}
}
}
});
var arrParam = new Array();
arrParam['start'] = '0';
arrParam['limit'] = '500';
arrParam['message'] = strMessage;
var k = 0;
var len = 0;
var fgToFields = false;
if (arrStoreConfig['toFields']!=null && columnModel.getColumnCount()!=arrStoreConfig['toFields'].length) {
fgToFields = true;
}
var fieldName = '';
var filtroValue = '';
for (k=0,len=arrFieldValue.length;k<len;k++) {
if (arrFieldValue[k]!='' && arrFieldValue[k]!=null) {
if (fgToFields) {
fieldName = arrStoreConfig['toFields'][k];
} else {
fieldName = columnModel.getColumnId(k);
}
filtroValue = arrFieldValue[k];
arrParam [fieldName] = arrFieldValue[k];
}
}
try {
var win = new Ext.Window({
id : 'lookupwin',
title : strTitle,
closable : true,
modal : true,
plain : true,
height : eval(winHeight),
width : eval(winWidth),
layout : 'border',
items : [lMessagePanel,lDataPanel]
});
win.show(win);
autoDS.on('load', function(r, options, success){
Ext.getCmp('msg_lookupwin').body.update('<div style="display:none"></div>');
if (success) {
if (eval(autoDS.totalLength) >= eval(lookupMaxRowCount)) {
var strMessage = getErrorDescrFromXml(autoDS.reader.xmlData, 'Lettura dei dati non completa');
Ext.getCmp('msg_lookupwin').body.update('<div class="msgLookup"><span class="errorMessage">' + strMessage + '</span></div>');
}
}
Ext.getCmp('lookupwin').doLayout();
});
autoDS.load({params:arrParam});
} catch (exc) {
var msg = exc.message;
}
}

function getSimpleDataStore(strUrl,tagTotalRecord,tagRecord,idField,arrRecordField,fgSync) {
var proxyConfig = new Array();
proxyConfig['url'] = strUrl;
if (fgSync) {
proxyConfig['sync'] = fgSync;
}
var simpleDS = new Ext.data.Store({
proxy: new Ext.data.HttpProxy(proxyConfig),
reader: new Ext.data.XmlReader({record: tagRecord, id: idField, totalRecords:tagTotalRecord}, arrRecordField),
autoLoad : false,
remoteSort:true
});
return simpleDS;
}

23 Feb 2009, 8:01 AM
Looking at your code, you really should consider learning more about modern javascript development practices (looking at the Ext source is a good way).

23 Feb 2009, 8:08 AM
in a quick glance, i see you are not recreating the grid filters plugin, but you're applying it to the new grid. you should consider purging the gridFilters when you recreate the window.

wiulma
23 Feb 2009, 8:13 AM
ok I'try to clear the filter before to create the window again.
But...for example...what there is in my code?

23 Feb 2009, 8:16 AM
But...for example...what there is in my code?

I don't understand :-/

wiulma
23 Feb 2009, 8:20 AM
Looking at your code, you really should consider learning more about modern javascript development practices (looking at the Ext source is a good way).
I would like to understand why my code is wrong

wiulma
24 Feb 2009, 3:10 AM
I resolve my problem in this way:


var win = new Ext.Window({
id : 'lookupwin',
title : strTitle,
closable : true,
closeAction: 'close',
modal : true,
plain : true,
height : eval(winHeight),
width : eval(winWidth),
layout : 'border',
items : [lMessagePanel,lDataPanel]
});
win.on ('beforeclose',function(p){
Ext.getCmp('gridLookup').filters.clearFilters();
});

'gridLookup' is the gridPanel inside the window