1. #1
    Sencha User
    Join Date
    May 2008
    Posts
    125
    Vote Rating
    1
    wiulma is on a distinguished road

      1  

    Default popup gridpanel not clear filter when close

    popup gridpanel not clear filter when close


    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:
    Code:
            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

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    we can't tell if you destroyed it the right way. http://extjs.com/learn/Ext_Forum_Help

  3. #3
    Sencha User
    Join Date
    May 2008
    Posts
    125
    Vote Rating
    1
    wiulma is on a distinguished road

      0  

    Default


    I create the column model:
    Code:
            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:
    Code:
            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:
    Code:
        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:
    Code:
            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:
    Code:
    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

  4. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Are you creating a new instance of lDataPanel every time you create the window?

  5. #5
    Sencha User
    Join Date
    May 2008
    Posts
    125
    Vote Rating
    1
    wiulma is on a distinguished road

      0  

    Default


    Code:
    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.
    Code:
    Ext.getCmp('lookupwin').close();

  6. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    can you post the entire method where you create the grid and window and not cut it up??

  7. #7
    Sencha User
    Join Date
    May 2008
    Posts
    125
    Vote Rating
    1
    wiulma is on a distinguished road

      0  

    Default


    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:
    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;
    }

  8. #8
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Looking at your code, you really should consider learning more about modern javascript development practices (looking at the Ext source is a good way).

  9. #9
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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.

  10. #10
    Sencha User
    Join Date
    May 2008
    Posts
    125
    Vote Rating
    1
    wiulma is on a distinguished road

      0  

    Default


    ok I'try to clear the filter before to create the window again.
    But...for example...what there is in my code?

Thread Participants: 1