Dear all,

i am new to EXT Js. i have seen lot of examples regarding remote filtering of grid but nothing works for me. i am using asp.net/IIS as server side request processing engine. i am pasting my html/javascript code below if anyone member help me out i will be highly thankful.
<!-- below link and scripts are added to work with Ext Js -->
<link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Scripts/ext-all-debug.js" type="text/javascript"></script>
<script src="Scripts/FiltersFeature.js" type="text/javascript"></script>
<script src="Scripts/FilterRow.js" type="text/javascript"></script>
<script src="Scripts/Function.js" type="text/javascript"></script>
<!-- below is my javascript to render grid -->

<script type="text/javascript" language="javascript">

function pctChange(val) {
if (val % 2 == 0) {
return '<span style="color:green;">' + val + '%</span>';
} else {
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
var itemsPerPage = 20;
Ext.Loader.setConfig({ enabled: true });
Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.ux.grid.FiltersFeature', ]);

Ext.onReady(function () {

var encode = false;
var local = false;

var myStore = Ext.create('Ext.data.Store', {
id: 'myStore',
autoLoad: false,
remoteSort: true,
remoteFilter: true,
fields: ['Agency_Name', 'Agency_CODE', 'AGREEMENT_VERSION', 'Agency_ID', { name: 'APPOINTMENT_DATE', type: 'date' }, { name: 'Phone_1', type: 'string' }, { name: 'FAX', type: 'string'}],
pageSize: itemsPerPage,
sorters: [{ property: 'Agency_Name', direction: 'ASC'}],
proxy: {
type: 'ajax',
url: 'DataHandler.ashx?gl=0',
reader: {
type: 'json',
root: 'myDataSet',
totalProperty: 'TotalRecords'
}
}
});
myStore.load({ params: { start: 0, limit: itemsPerPage} });

var filters = {
ftype: 'filters',
encode: encode,
local: local,
filters: [
{ type: 'string', dataIndex: 'Agency_Name', disabled: true },
{ type: 'string', dataIndex: 'Agency_CODE' },
{ type: 'string', dataIndex: 'AGREEMENT_VERSION' },
{ type: 'numeric', dataIndex: 'Agency_ID' },
{ type: 'date', dataIndex: 'APPOINTMENT_DATE' },
{ type: 'string', dataIndex: 'Phone_1', disabled: true }
]
};

var sampleGridColumns = [
{ xtype: 'actioncolumn', width: 50, items: [

{ icon: 'resources/themes/images/drop-add.gif', tooltip: 'Edit', handler: function (grid, rowIndex, colIndex) { var rec = grid.getStore().getAt(rowIndex); alert("Edit " + rec.get('Agency_Name')); } },
{ icon: 'resources/themes/images/drop-no.gif', tooltip: 'Delete', handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);

var processDeleteAction = function (btn) {
if (btn == 'yes') {
var conn = new Ext.data.Connection();
conn.request
({
url: 'DeleteHandler.ashx?unique_ID=' + rec.get('Agency_ID'),
params:
{ unique_ID: rec.get('Agency_ID'), row: rec.row, limit: itemsPerPage },
success: function (resp, opt) {
myStore.load();
},
failure: function (resp, opt) {
Ext.Msg.alert('Error', 'Unable to delete record');
}
})
}
}
Ext.Msg.show({
title: "Delete",
msg: 'Are you sure you want to delete"' + rec.get('Agency_Name') + '"?',
buttons: Ext.MessageBox.YESNO,
closable: false,
fn: processDeleteAction,
icon: Ext.MessageBox.ERROR
})
}
}
]
},
{ header: 'Name', dataIndex: 'Agency_Name', filterable: true, filter: { type: 'string'} },
{ header: 'Email', dataIndex: 'Agency_CODE', flex: 1, filter: { type: 'string' }, renderer: function (value) { return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value); } },
{ header: 'Phone', dataIndex: 'AGREEMENT_VERSION', width: 100, hidden: true, filter: { type: 'string'} },
{ header: 'My ID', dataIndex: 'Agency_ID', sortable: false, hideable: false, renderer: pctChange, filter: { type: 'numeric'} },
{ header: 'DOB', dataIndex: 'APPOINTMENT_DATE', xtype: 'datecolumn', format: 'M/d/Y', filter: { type: 'date'} }, /*d/m/Y*/
{header: 'Full Name', xtype: 'templatecolumn', tpl: '{Phone_1}, {FAX}', flex: 2, filter: { type: 'string' }, filterable: false }
]

Ext.create('Ext.grid.Panel', {
title: '007 Suretec',
store: myStore, //Ext.data.StoreManager.lookup('FNStore'),
columns: sampleGridColumns,
//dockedItems: [{ xtype: 'pagingtoolbar', store: myStore, dock: 'bottom', dispalyInfo: true}], /*for paging*/
features: [filters],
height: 400,
width: 600,
renderTo: 'divGrid',
loadMask: true,
columnLines: true,
bbar: new Ext.PagingToolbar(
{ pageSize: itemsPerPage, store: myStore, displayInfo: true, displayMsg: 'Displaying agencies {0} - {1} of {2}', emptyMsg: "No agency found" })
});
});
</script>