Results 1 to 2 of 2

Thread: External Filter for a grid is not working

  1. #1

    Default External Filter for a grid is not working

    Hi,
    i have a grid and a store which loads data from rest call and a form panel which is used as a text filed for filter .

    my modelview :
    */
    Ext.define('MyExtJs.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',


    alias: 'viewmodel.main',
    requires : [
    'MyExtJs.view.main.MainController',
    'MyExtJs.model.Personnel',
    'Ext.util.Filter'],
    stores:
    {
    storeexample: {
    autoLoad:true,
    fields : [ 'accountId', 'fileType', 'sitFileName',
    'sitCheckHeader', 'sitItemData', 'sitCheckNumber',
    'sitPaymentAmount','prodFileName','prodCheckHeader',
    'prodItemData','prodCheckNumber','prodPaymentAmount' ],
    proxy : {
    type : 'ajax',
    url : '/getAllRecords',
    reader: {
    type: 'json',
    }
    }
    }
    }



    which loads the data from my store.


    and my form panel :


    Ext.define('MyExtJs.view.main.FilterForm', {
    extend : 'Ext.form.Panel',
    xtype : 'form-field',
    width : 1000,
    height : 40,


    requires : [ 'MyExtJs.view.main.MainController', 'MyExtJs.model.Personnel',
    'MyExtJs.view.main.List', 'Ext.util.Filter',
    'MyExtJs.view.main.MainModel' ],


    viewModel : {
    "type" : "main"
    },


    tbar : [ {
    Label : 'Search',
    xtype : 'textfield',
    emptyText : 'Search sit Payment Amount...',
    width : 250,
    listeners : {
    change : function(value) {
    console.log(value);
    var grid = Ext.getCmp('listgrid');
    console.log('grid');
    var store = grid.getStore('storeexample');
    console.log('store');
    /* var store = Ext.getStore('storeexample'); */
    if (!value) {
    store.getFilters().removeAll();
    } else {
    console.log('store');
    store.filter([ {
    property : "sitPaymentAmount",
    value : value,
    anyMatch : true
    }


    ]);


    }


    }
    }
    } ]



    which is having a text filed , in which i type my text to filter data over a grid .


    and my grid :


    Ext.define('MyExtJs.view.main.List',
    {
    extend : 'Ext.grid.Panel',
    id : 'listgrid',
    xtype : 'mainlist',
    width : 1000,
    height:800,
    title: 'File Comparision Data',


    requires : [
    'MyExtJs.view.main.MainController',
    'MyExtJs.model.Personnel',
    'Ext.util.Filter',
    'MyExtJs.view.main.MainModel'],
    viewModel : {
    "type" : "main"
    },
    bind : {
    store : '{storeexample}'
    },
    columns :
    [
    {
    text : 'Account Id',
    dataIndex : 'accountId',
    width : 100,
    filter : {
    type : 'string'
    }
    }, {
    text : 'File Type',
    dataIndex : 'fileType',
    width : 100,
    filter : {
    type : 'string'
    }
    }, {
    text : 'Sit File Name',
    dataIndex : 'sitFileName',
    width : 200,
    filter : {
    type : 'string'
    }
    }, {
    text : 'Sit Check Header',
    dataIndex : 'sitCheckHeader',
    width : 500,
    filter : {
    type : 'string'
    }
    }, {
    text : 'Sit Item Data',
    dataIndex : 'sitItemData',
    width : 500,
    filter : {
    type : 'string'
    }
    }, {
    text : 'Sit Check Number',
    dataIndex : 'sitCheckNumber',
    width : 200,
    filter : {
    type : 'string'
    }
    }, {
    text : 'Sit Payment Amount',
    dataIndex : 'sitPaymentAmount',
    width : 200,
    filter : true,
    filter : {
    type : 'string'
    }
    }, {
    text : 'Prod File Name',
    dataIndex : 'prodFileName',
    width : 200,
    filter : {
    type : 'string'
    }
    }, {
    text : 'Prod Check Header',
    dataIndex : 'prodCheckHeader',
    width : 500,
    filter : {
    type : 'string'
    }
    }, {
    text : 'Prod Item Data',
    dataIndex : 'prodItemData',
    width : 500,
    filter : {
    type : 'string'
    }
    }, {
    text : 'Prod Payment Amount',
    dataIndex : 'prodPaymentAmount',
    width : 200,
    filter : {
    type : 'string'
    }
    } ],
    plugins : 'gridfilters',
    renderTo : Ext.getBody(),


    , please do help how to filter the text entered in the text field over the grid and how to update the grid with the filtered data , how the store will get updated to the view .

  2. #2
    Sencha Premium User
    Join Date
    Mar 2017
    Posts
    27

    Default

    Hi!

    You would get more help with well-formatted code...

    Here is how you can achieve grid filtering (assuming you are using Classic toolkit, as it seems to be your case).
    Just add data to your viewModel and use it as a filter directly on your store.

    PHP Code:
    var main Ext.create('Ext.grid.Panel', {
      
    viewModel : {
        
    data : {
          
    yourField ''
        
    },
        
    stores : {
          
    storeexample : {
            
    data : [ {
              
    accountId 1,
              
    fileType 'image/png',
              
    sitPaymentAmount 10
            
    }, {
              
    accountId 2,
              
    fileType 'image/jpg',
              
    sitPaymentAmount 20
            
    } ],
            
    filters : [ {
              
    property 'sitPaymentAmount',
              
    value '{yourField}',
              
    anyMatch true
            
    } ]
          }
        }
      },
      
    bind '{storeexample}',
      
    columns : [ {
        
    text 'Account Id',
        
    dataIndex 'accountId',
        
    width 100
      
    }, {
        
    text 'File Type',
        
    dataIndex 'fileType',
        
    width 100,
      } ],
      
    tbar : {
        
    xtype 'textfield',
        
    bind '{yourField}'
      
    }
    });
    Ext.create('Ext.window.Window', {
      
    title 'Hello',
      
    height 500,
      
    width 500,
      
    layout 'fit',
      
    items main
    }).show(); 
    Hope it helps...

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •