I can suggest you to not update the grid when one of filters is focused.
See Before handler of Update DirectEvent.
Example
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Refresh(object sender, DirectEventArgs e)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
{
new object[] { "test1", DateTime.Now.ToLongTimeString() },
new object[] { "test2", DateTime.Now.ToLongTimeString() },
new object[] { "test3", DateTime.Now.ToLongTimeString() }
};
store.DataBind();
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<ext:XScript runat="server">
<script type="text/javascript">
var applyFilter = function (field) {
var store = #{GridPanel1}.getStore();
store.suspendEvents();
store.filterBy(getRecordFilter());
store.resumeEvents();
#{GridPanel1}.getView().refresh(false);
};
var clearFilter = function () {
#{Filter1}.reset();
#{Filter2}.reset();
#{Store1}.clearFilter();
}
var filterString = function (value, dataIndex, record) {
var val = record.get(dataIndex);
if (typeof val != "string") {
return value.length == 0;
}
return val.toLowerCase().indexOf(value.toLowerCase()) > -1;
};
var getRecordFilter = function () {
var f = [];
f.push({
filter: function (record) {
return filterString(#{Filter1}.getValue(), "test1", record);
}
});
f.push({
filter: function (record) {
return filterString(#{Filter2}.getValue(), "test2", record);
}
});
var len = f.length;
return function (record) {
for (var i = 0; i < len; i++) {
if (!f[i].filter(record)) {
return false;
}
}
return true;
};
};
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Reader>
<ext:ArrayReader>
<Fields>
<ext:RecordField Name="test1" />
<ext:RecordField Name="test2" />
</Fields>
</ext:ArrayReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Header="Test1" DataIndex="test1" />
<ext:Column Header="Test2" DataIndex="test2" />
<ext:Column
Width="28"
DataIndex="test1"
Sortable="false"
MenuDisabled="true"
Header=" "
Fixed="true">
<Renderer Handler="return '';" />
</ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server">
<HeaderRows>
<ext:HeaderRow>
<Columns>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="Filter1" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn Cls="x-small-editor">
<Component>
<ext:TextField ID="Filter2" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="applyFilter(this);" Buffer="250" />
</Listeners>
</ext:TextField>
</Component>
</ext:HeaderColumn>
<ext:HeaderColumn AutoWidthElement="false">
<Component>
<ext:Button ID="ClearFilterButton" runat="server" Icon="Cancel">
<ToolTips>
<ext:ToolTip runat="server" Html="Clear filter" />
</ToolTips>
<Listeners>
<Click Handler="clearFilter(null);" />
</Listeners>
</ext:Button>
</Component>
</ext:HeaderColumn>
</Columns>
</ext:HeaderRow>
</HeaderRows>
</ext:GridView>
</View>
<Plugins>
<ext:GridFilters ID="GridFilters1">
<Filters>
<ext:StringFilter DataIndex="test1" />
<ext:StringFilter DataIndex="test2" />
</Filters>
</ext:GridFilters>
</Plugins>
</ext:GridPanel>
<ext:TaskManager runat="server">
<Tasks>
<ext:Task Interval="3000" AutoRun="true">
<DirectEvents>
<Update
OnEvent="Refresh"
Before="return !(#{Filter1}.hasFocus || #{Filter2}.hasFocus);"
Success="#{GridPanel1}.store.filterBy(getRecordFilter());" />
</DirectEvents>
</ext:Task>
</Tasks>
</ext:TaskManager>
</form>
</body>
</html>