1. #11
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      0  

    Default


    Sorry, but I don't understand all your code. Is "gridfr" a your class extend my class?
    I see you use "items" in "gridfr" and you put in it a toolbar. I think the problem is here.
    I explain to you how I write the property value in my "
    filtersArray" object.When I create my toolbar I add for each field a property named "
    fieldName" with the name of the model field.(line 47).
    When I apply the filter i get all textfields in my toolbar (line 67) and for each of them I put the
    "
    fieldName" property in "
    filtersArray.property".
    You must verify if the row field "fieldName" property has value. Can you try to put this line after my line 42 for verify if dataIndex returns a value?
    console.log(dataIndex)
    If yes the problem is in line 67 when I read all textfields in my toolbar (is it possible for your toolbar in items?).
    If no I have a new element for understand the problem.
    Thanks

  2. #12
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Smile I discovered some workarounds...

    I discovered some workarounds...


    Hello Tino,

    If yes the problem is in line 67 when I read all textfields in my toolbar (is it possible for your toolbar in items?).
    Indeed the problem was in line 67, which reads:
    Code:
    var filterRowCell=Ext.ComponentQuery.query('textfield');
    That will return all text fields in the entire document. Since I have several views/stores in my app and they reference different model classes, selecting all 'textfields' to create a filterRowCell array returns more fields than are defined in the grid. Therefore, many of the fields were processed with "undefined" properties, which threw the error. As a workaround, I added a conditional to only process textfields in the filterRowCell array that match a DOM property unique to fields associated with my Grid. So, I changed your code from this:
    Code:
            var filterRowCell=Ext.ComponentQuery.query('textfield');
            filtersArray=[];
            for (c=0; c < filterRowCell.length; c++) {
                var textField=filterRowCell[c].getValue();
                if(textField!=null&&textField!=''){
                    filtersArray.push({property: filterRowCell[c].fieldName, value: textField, root: 'data'});
                }
            }
    To this:
    Code:
            var filterRowCell=Ext.ComponentQuery.query('textfield');
            console.log(filterRowCell);
            filtersArray=[];
            for (c=0; c < filterRowCell.length; c++) {
                if(filterRowCell[c].parent.flex==1) {
                    var textField=filterRowCell[c].getValue();
                    if(textField!=null&&textField!=''){
                        filtersArray.push({property: filterRowCell[c].fieldName, value: textField, root: 'data'});
                    }
                }
            }
    This is a hack, but it works for now. Perhaps you can think of an elegant solution?

    A few more hacks I had to do may be of interest to you. First, the "clearIcon" does not work correctly in filter fields currently, it does not clear the value, just the display. Therefore, I just set "clearIcon:false" in your config. Second, your implementation for filtering does not support date fields. Since I am using one date field in my grid, I decided to just disable the display of the filter field. This brings me to hack 3, which conditionally displays columns based on their "dataIndex" variable. So, I changed your code from this:
    Code:
        _filterRowToolbarPainted : function (e) {
            var filterRowCell=Ext.query("div.x-grid-filterrow-cell");
            for (c=0; c < filterRowCell.length; c++) {
                var elem = new Ext.Element(filterRowCell[c]);
                elem.update('');
                var fieldHeight=parseInt(e.element.dom.offsetHeight*70/100)+'px';
                var dataIndex = elem.getAttribute('dataindex');
                var filterField=Ext.create('Ext.field.Text', {
                                        flex:1,
                                        placeHolder:'Filter...',
                                        height       : fieldHeight,
                                        fieldName:dataIndex
                });
    To This:
    Code:
        _filterRowToolbarPainted : function (e) {
            var filterRowCell=Ext.query("div.x-grid-filterrow-cell");
            for (c=0; c < filterRowCell.length; c++) {
                var elem = new Ext.Element(filterRowCell[c]);
                elem.update('');
                var fieldHeight=parseInt(e.element.dom.offsetHeight*70/100)+'px';
                var dataIndex = elem.getAttribute('dataindex');
                if (dataIndex!='date_reserved') {
                    var filterField=Ext.create('Ext.field.Text', {
                                flex:1,
                                placeHolder:'Filter',
                                clearIcon : false,
                                height   : fieldHeight,
                                fieldName: dataIndex
                    });
                }
                if (dataIndex=='date_reserved') {
                    var filterField=Ext.create('Ext.Spacer', {
                                flex:1,
                                html: '<center style="color:white;">No Filter</center>'
                    });
                }
    Again, these are just ugly hacks as a workaround for now. Perhaps you can give this some thought and implement a much better solution? Thanks for providing this, it is a very useful extension, and I am glad you made it available.
    Last edited by shaneavery; 25 Jan 2012 at 1:27 PM. Reason: typos

  3. #13
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      0  

    Default


    Thanks for the help!
    I have updated my component.
    Now I have added a date filter and I have solved the bugs.
    I attach new version of my component and an example with mitchellsimoens exemple data.
    In the index.js files I have commented all my parameters with default value.
    Thanks again.
    Ext.gp.Grid.zip

  4. #14
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Red face Thanks!

    Thanks!


    Wow, this is great! Thanks for the quick follow up. This is turning into a fantastically polished extension. Nice Work! Let me know if I can assist with any other testing/evaluating.

  5. #15
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Lightbulb This Just in...

    This Just in...


    I discovered a condition that may be beyond your control to fix, but perhaps not. I noticed that filters done on datePicker fields will not return results if the time segment is not stored as 00:00:00. I realize that the datePicker does not record time values, so by default, it records the time as 00:00:00 (i.e. "2012-01-08T00:00:00"). However, I am relying heavily on the time segment in my app, and I automate the recording of Javascript dates without using the datePicker field.

    So my question is: is there a way to filter datePicker fields by ignoring the time segment, such that all records matching a specific date are returned, regardless of the time value?

    Thanks.

  6. #16
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Thumbs up Answered my own question, but...

    Answered my own question, but...


    I found a workaround to my dilemma by adding conditionals to your _applyFilter:function() around line 169. I am basically passing filtersArray objects as normal if the "type" property is a "string". If the "type" property is a "date", then I reformat the date, convert in into a string, and then set that as the "value" property. I also added the "anyMatch : true" property, which is required for this hack to work. The result is that I get returned from the _applyFilter function the dates I expect, irrespective of what time segment values the records contain. See code:

    Code:
        _applyFilter:function(){ 
            //console.log(this);
            var store     = this.getStore(),
                    filters   = store.filters;
    
            var filterRowCell=Ext.ComponentQuery.query('*[gpGridFilterField=true]'); 
            filtersArray=[];
            for (c=0; c < filterRowCell.length; c++) {
                var textField=filterRowCell[c].getValue();
                if(textField!=null&&textField!=''){
                    if (filterRowCell[c].gpGridFilterFieldType == 'string') {
                        filtersArray.push({
                                    property: filterRowCell[c].fieldName,
                                    value: textField,
                                    type:filterRowCell[c].gpGridFilterFieldType,
                                    root: 'data'
                                  });
                    }
                    if (filterRowCell[c].gpGridFilterFieldType == 'date') {
                      textField = Ext.Date.format( textField, 'M d Y' );
                        filtersArray.push({
                                    property: filterRowCell[c].fieldName,
                                    value: textField.toString(),
                                    type:filterRowCell[c].gpGridFilterFieldType,
                                    root: 'data',
                                    anyMatch : true
                                  });
                    }
                }
            }
    I don't know if this is of any use to you, but it works for me, at least for now. Perhaps you have a better way?

    Thanks.

  7. #17
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Question One more thing...

    One more thing...


    Tino,

    I also noticed that there is no way to clear a date filter in the GUI after it is set. This is something I expect will be required. I tried some differing approaches, but am having trouble choosing an event to act on. One idea I have is to automatically clear a date filter whenever any other text field is given focus. What do you think? I have made some attempts, but keep getting lost in scope. How would you implement?

    Thanks

  8. #18
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      0  

    Default


    in my class I have removed and after added again the component.
    After I have found this:
    http://www.sencha.com/forum/showthread.php?173669-How-to-blank-out-a-DatePickerField&highlight=datePicker


  9. #19
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Default Another way...

    Another way...


    Tino,

    Until Sencha provides a way to blank out a DatePickerField, I found this approach works for me. I just added a "Show All" button in my controller that clears all filters and resets the datepicker field's "input" value attribute to "". See code:

    Code:
        onShowAllBtn: function() {
            var dateField = Ext.ComponentQuery.query('datepickerfield[fieldName=date_reserved]')[0],
                partyField = Ext.ComponentQuery.query('textfield[fieldName=Party]')[0],
                nameField = Ext.ComponentQuery.query('textfield[fieldName=Name]')[0],
                sentField = Ext.ComponentQuery.query('textfield[fieldName=Sent]')[0],
                seatedField = Ext.ComponentQuery.query('textfield[fieldName=Seated]')[0];
            dateField.setValue(null);
            partyField.setValue(null);
            nameField.setValue(null);
            sentField.setValue(null);
            seatedField.setValue(null);
            this.getGrid()._applyFilter();
            this.getGrid().getStore().clearFilter();
            dateField.element.dom.lastChild.firstChild.firstChild.value="";
        }
    Works for now...

  10. #20
    Sencha User
    Join Date
    Aug 2011
    Location
    Brescia - Italy
    Posts
    102
    Vote Rating
    4
    tino7_03 is on a distinguished road

      0  

    Default


    I'll try it in my class for remove the code that replaces data field each reset.
    Thanks

    EDIT:
    In my component your solution change the display value only and note the component value. I hope that sencha solve this issue because I don't like remove and after add my datePicker component for to be empty