Sep 12, 2011, 1:58 PM
[CLOSED] TriggerField shrinks unexpectedly on TabPanel when Buffer property is used
Hi,
I have an issue with a TriggerField placed on a TopBar of a Panel which is a TabPanel item.
I need to make some store filtering while user types in this trigger field. This filtering performance is not the best, so I use a Buffer attribute to delay the sorting process to ensure the user has finished his typing.
Steps:
1. user types a letter into the TriggerField
2. user changes a tab (before the end of the delay specified by Buffer value)
3. user returns to the original tab: the TriggerField has zero width
If user changes the tab after the Buffer timeout has finished, everyting work well.
It is critical for me to have filter-as-you-type feature, so I have to continue to use Buffer or something like this.
Any idea?
I have an issue with a TriggerField placed on a TopBar of a Panel which is a TabPanel item.
I need to make some store filtering while user types in this trigger field. This filtering performance is not the best, so I use a Buffer attribute to delay the sorting process to ensure the user has finished his typing.
Steps:
1. user types a letter into the TriggerField
2. user changes a tab (before the end of the delay specified by Buffer value)
3. user returns to the original tab: the TriggerField has zero width
If user changes the tab after the Buffer timeout has finished, everyting work well.
It is critical for me to have filter-as-you-type feature, so I have to continue to use Buffer or something like this.
Any idea?
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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></title>
<script language="javascript" type="text/javascript">
filterTheGrid = function () { }
</script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Button runat="server" Text="Open Window">
<Listeners>
<Click Handler="#{window1}.show();" />
</Listeners>
</ext:Button>
<ext:Window
ID="window1"
runat="server"
Title="Wizard"
Width="850px" AutoHeight="true"
Hidden="true"
BodyStyle="background-color: #fff;"
Padding="5"
CenterOnLoad="true"
Resizable="false"
Modal="true" CloseAction="Hide" >
<Items>
<ext:TabPanel ID="tpFormula" runat="server" ActiveIndex="0" Height="320">
<Items>
<ext:Panel runat="server" ID="panel1" Title="Panel I" TitleCollapse="true">
<Items>
<ext:Panel ID="grid1" runat="server" StripeRows="false"
AutoScroll="true" AnchorHorizontal="100%" Height="250" Width="500">
<TopBar>
<ext:Toolbar ID="Toolbar4" runat="server">
<Items>
<ext:TriggerField ID="SearchDocsBox" runat="server" Width="150" EnableKeyEvents="true" Icon="Magnifier">
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true"/>
</Triggers>
<Listeners>
<TriggerClick Handler="if(index == 0) {this.clear(); this.triggers[0].hide(); } filterTheGrid(this.getValue());" />
<KeyUp Handler="if(this.getValue().length != 0) this.triggers[0].show(); else this.triggers[0].hide(); filterTheGrid(this.getValue());" Buffer="500" />
</Listeners>
</ext:TriggerField>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="Panel3" Title="Panel II" TitleCollapse="true">
<Items>
<ext:Label Text="any content"></ext:Label>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Window>
</body>
</html>