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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s