ExtJS grid store filter

using a combobox to filter a grid in extjs

window.onload = function() {

var accModel = Ext.create('Ext.data.Model', {
fields: ['accCode', 'name', 'type', 'amount']
});

var store = Ext.create('Ext.data.Store', {
alias: 'store.accStore',
model: accModel,
proxy: {
type: 'ajax',
url: '/accounts.json',
reader: {
type: 'json'
}
},
autoLoad: true
});

var accGrid = Ext.create('Ext.grid.Panel', {
header: {
hidden: true
},
store: store,
layout: 'fit',
columns: [{
text: "Account Code",
dataIndex: 'accCode'
},
{
text: "Name",
dataIndex: 'name'
},
{
text: "Type",
sortable: false,
dataIndex: 'type'
},
{
text: "Amount",
align: 'right',
sortable: false,
dataIndex: 'amount'
}
],
columnLines: true,
width: 600,
height: 300
});

var accCodesStore = Ext.create('Ext.data.Store', {
fields: ['accCode', 'abbr'],
proxy: {
type: 'ajax',
url: '/accCodes.json',
reader: {
type: 'json'
}
},
autoLoad: true
});

var cBox = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose Account',
store: accCodesStore,
queryMode: 'local',
displayField: 'accCode',
valueField: 'abbr',
forceSelection: true,
listeners: {
change: function (field, newValue, oldValue) {
//console.log(newValue);
accGrid.getStore().clearFilter();
accGrid.getStore().filter('accCode', newValue);
},
scope: this
}
});

Ext.onReady(function() {

Ext.create('Ext.panel.Panel', {
title: 'Account details',
width: 600,
height: 450,
items: [cBox, accGrid],
renderTo: Ext.getBody()
});

});
}


//accounts.json
[
  {
    "accCode": "003",
    "name": "satya",
    "type": "savings",
    "amount": 10000
  },
  {
    "accCode": "003",
    "name": "Abhinaw",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "003",
    "name": "Vishal",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "004",
    "name": "Malvika",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "004",
    "name": "Sakshi",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "004",
    "name": "Kshitij",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "005",
    "name": "Palash",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "005",
    "name": "Supal",
    "type": "current",
    "amount": 100000
  },
  {
    "accCode": "005",
    "name": "Ramesh",
    "type": "current",
    "amount": 100000
  }
]


//accCodes.json
[
  {
    "accCode": "003",
    "abbr": "003"
  },
  {
    "accCode": "004",
    "abbr": "004"
  },
  {
    "accCode": "005",
    "abbr": "005"
  }
]

ExtJS 5.0.1

Starting ExtJs sample

This is my first ExtJs sample. in this I am going to explain about how to start a sample in ExtJs.

first download the ExtJs library files

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/crisp/resources/sencha-charts-all-debug.css

https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-crisp/build/ext-theme-crisp.js

https://extjs.cachefly.net/ext/gpl/5.1.0/packages/sencha-charts/build/sencha-charts-debug.js

Include them into the html file.

create a script block in html like below

 


      lessThan script type="text/javascript" greaterThan //<![CDATA[
         window.onload=function(){ }  //]] greaterThan 
         
      lessThan /script greaterThan

Now let’s create a simple grid with some JSON data inside window.onload function,

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [ 'name', 'email', 'phone' ]
});

This is going to be our model. In ExtJs a model is the JSON structure not the actual data. The model is a part of Ext.data Object. And it has fields which is an Array. Each field can be a simple name or you can define the type as well for the field like below

fields: [  { name: ‘id’, type: ‘int’ }  ]

Now time to create the actual JSON data. ExtJs holds the actual data in Store Object. Store takes at least two parameters model and data.

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

Let’s render the data into a grid container.

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});