How to add local filtering option in basic grid using Ext Js 4.2?

Question

I have developed a basic grid using Ext Js 4.2. Here's the output..

Now i wanna add filtering option to the columns in this grid. For example (=, >, <) filtering have to occur.

I have found some source code like which might work but i am struggling where to add those javascript files. Here's my code:

Ext.define("UserListDemo.view.user.UserGrid", {
    extend: "Ext.grid.Panel",
    alias: "widget.userGrid",
    autoHeight:true,
    style: 'margin-top: 10px;margin-left: 15px;margin-right: 20px;',
    title: '<span style="color: #525252;">User List</span>',
    store: 'UserStore',
    name: 'userGrid',
    id: 'userGrid',
    loadMask: true,
    syncRowHeight: true,
    columns:[
    {
        text: 'ID',
        sortable: true,
        dataIndex: 'id',
        locked: true,
        width: 120
    },
    {
        text: 'Name',
        dataIndex: 'name',
        locked: true,
        width: 350
    },
    {
        text: 'Address',
        dataIndex: 'address',
        width: 450
    },
    {
        text: 'Contact',
        dataIndex: 'contact',
        width: 250
    },
    {
        text: 'Telephone',
        dataIndex: 'telephone',
        width: 200
    }
    
]
});

<html>
    <head>
        <title>User List</title>
        <link href="http://10.11.201.93:81/grid/ext-4.2.1/ext-4.2.1.883/resources/css/ext-all.css" 
         rel="stylesheet" type="text/css" />
        <script src="http://10.11.201.93:81/grid/ext-4.2.1/ext-4.2.1.883/ext-all-debug.js"></script> 
        <script src="EXTJS_Files/ListApp.js"></script>
  
  
  
  
    <body>
    </body>
</html>

Could someone help me with the source code of filtering and how to integrate it with my basic grid as well ?

Here is example with also source code http://docs.sencha.com/extjs/4.2.0/extjs-build/examples/grid-filtering/grid-filter-local.html — pagep, Feb 15 '17 at 11:44
yes. I also noticed that... but how could I integrate the grid-filter-local.js file with my existing grid? For example second line in the source code -- 'Ext.Loader.setPath('Ext.ux', '../ux');' But I have no Ext.ux directory in my project? — S.Rakin, Feb 15 '17 at 11:48
Here is a question on how to handel the ux namespace http://stackoverflow.com/q/10308018/1732133 — And-y, Feb 15 '17 at 12:58

S.Rakin · Accepted Answer · 2017-02-19T05:46:31.347

Finally I have been able to add filtering option into my basic grid. I am sharing the whole process in brief.

Firstly,we should keep in mind that ExtJs is a MVC(MVCS more precisely) kind of framework. So, any kind of feature (grid filtering, chart etc) we have to add we should follow the MVC architecture first. SO, I have to replace the local-filter.js file to the previous UserModel .

Here's is the Model View Controller ( and Store) architecture for ExtJs. I am sharing my whole project's directory.

So, in fine, I place the source code of local-filter.js in UserModel.js replacing the previous source code.

Secondly, You have to just include ListApp.js in the index.php. Then it will implicitly call all the MVC javascript files it needs. Just like that:-

  <script src="EXTJS_Files/ListApp.js"></script>

Finally, any json file in the data folder will show the data in the grid which will be shown as the way you filter the date. In this case grid-filter.json has been used. And, you have to set the directory of data in UserMdel.js like that.

So, following these steps and kind of grid with filtering, charts could be developed using ExtJs.

How to add local filtering option in basic grid using Ext Js 4.2?

1 Answers1