Search code examples
filterextjsloadstore

ExtJS: How to hide specific data on store with filtering?


I want to hide a record on Grid that returns from server.

I've setted a filter on store and can reach that specific data but how I'll handle to hide/ignore this record?

fooStore: {
    ....
    filters: [
         function(item) {
         let me = this;
         let theRecord = item.data.status === MyApp.STATUS; //true

         if (theRecord) {
              console.log(theRecord); //True
              console.log("So filter is here!!")
              //How to hide/ignore/avoid to load this specific data record to load Grid??
            }
         }
    ]
},

Returned JSON;

{
  "success": true,
  "msg": "OK",
  "count": 3,
  "data": [
    { 
      //Filter achives to this record and aim to hide this one; avoid to load this record.
      "id": 102913410,
      "status": "P"
    },
    {
      "id": 98713410,
      "status": "I"
    },
    { 
      "id": 563423410,
      "status": "A"
    }
  ]
}

Solution

  • I can't save my fiddle cause i don't have sencha forum's account so i give you my code :

    Ext.application({
        name : 'Fiddle',
    
        launch : function() {
            var model = Ext.create('Ext.data.Model', {
                extend: 'Ext.data.Model',
                fields: [
                    {name: 'id',  type: 'int'},
                    {name: 'status', type: 'string'},
                ]
            });
    
            var store = Ext.create('Ext.data.Store', {
                 autoLoad: true,
                 model: model,
                 proxy: {
                    type: 'ajax',
                    url:  'data.json',
                    reader: {
                        type: 'json',
                        rootProperty: 'data'
                    }
                },
                filters: [function(item) {
                    if (item.data.status === "P") {
                        return true;
                    }
                    else {
                        return false;
                    }
                }],
                listeners: {
                    load: {
                        fn: function() {
                            console.log(this.getRange());
                        }
                    }
                }
            });
        }
    });
    

    Also i create data.json like this :

    {
        "success": true,
        "msg": "OK",
        "count": 3,
        "data": [{
            "id": 102913410,
            "status": "P"
        }, {
            "id": 98713410,
            "status": "I"
        }, {
            "id": 563423410,
            "status": "A"
        }]
    }
    

    I thinks it's near to you'r code and after the loading of the store the filter work as you can this :

    enter image description here

    Here is sencha fiddle link : https://fiddle.sencha.com/#view/editor

    If this can't work, i don't understand what the fuck doing...