CODEWITHSUNDEEP
javascriptextjs
S.Rakin
S.Rakin

Reputation: 832

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

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

enter image description here

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 ?

Upvotes: 3

Views: 674

Answers (1)

S.Rakin
S.Rakin

Reputation: 832

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.

enter image description here

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.

enter image description here

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

Upvotes: 1

Related Questions