PDA

View Full Version : [CLOSED] [#111] How to filter combo box data using the text that exists in the middle



sailendra
Aug 06, 2012, 8:34 AM
<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
var store = this.SelectBox1.GetStore();

store.DataSource = new object[]
{
new object[] { "AL", "The Heart of Dixie ", "The Heart of Dixie" },
new object[] { "AK", "The Land of the Midnight Sun", "The Land of the Midnight Sun" },
new object[] { "AZ", "The Grand Canyon State", "The Grand Canyon State" },

};

store.DataBind();
}
</script>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title>SelectBox - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:ComboBox
ID="SelectBox1"
runat="server"
DisplayField="state"
ValueField="abbr" QueryMode="Local"
EmptyText="Select a state...">
<Store>
<ext:Store ID="Store1" runat="server">

<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="state" />
<ext:ModelField Name="nick" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</form>
</body>
</html>


When i type "Dixie" then item "The Heart of Dixie" should filter in the combo box, how to achieve that?

Daniil
Aug 06, 2012, 11:21 AM
Hi,

Here is the example for Ext.NET v1.
http://forums.ext.net/showthread.php?13067&p=53824&viewfull=1#post53824

I think the idea should work in Ext.NET v2 as well.

sailendra
Aug 06, 2012, 11:46 AM
Typed value is being automatically clear using above approach.

Daniil
Aug 06, 2012, 1:16 PM
Confirm.

I can suggest the following solution.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.ComboBox1.GetStore();
store.DataSource = new object[]
{
new object[] { "1", "aa" },
new object[] { "2", "ab" },
new object[] { "3", "ac" },
new object[] { "4", "ba" },
new object[] { "5", "bb" },
new object[] { "6", "bc" },
new object[] { "7", "ca" },
new object[] { "8", "cb" },
new object[] { "9", "cc" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:ComboBox
ID="ComboBox1"
runat="server"
QueryMode="Local"
EnableKeyEvents="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<BeforeQuery Handler="var q = queryEvent.query;

queryEvent.query = new RegExp(q);
queryEvent.query.length = q.length;" />
</Listeners>
</ext:ComboBox>
</body>
</html>

Here is a related Sencha thread I have just started.
http://www.sencha.com/forum/showthread.php?235564

sailendra
Aug 06, 2012, 3:59 PM
Thanks very much, it works.

Daniil
Dec 29, 2012, 10:26 AM
Here is a related Sencha thread I have just started.
http://www.sencha.com/forum/showthread.php?235564

Sencha opened a ticket to improve. Here are some details what they are going to do.
http://www.sencha.com/forum/showthread.php?235564&p=883454&viewfull=1#post883454

Created an Issue to track it.
https://github.com/extnet/Ext.NET/issues/111

Daniil
Mar 14, 2013, 12:55 PM
Sencha added the enableRegEx option.
http://docs.sencha.com/ext-js/4-2/#!/api/Ext.form.field.ComboBox-cfg-enableRegEx

Now this

<Listeners>
<BeforeQuery Handler="var q = queryEvent.query;

queryEvent.query = new RegExp(q);
queryEvent.query.length = q.length;" />
</Listeners>
can be replaced with just EnableRegEx="true" option for a ComboBox.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.ComboBox1.GetStore();
store.DataSource = new object[]
{
new object[] { "1", "aa" },
new object[] { "2", "ab" },
new object[] { "3", "ac" },
new object[] { "4", "ba" },
new object[] { "5", "bb" },
new object[] { "6", "bc" },
new object[] { "7", "ca" },
new object[] { "8", "cb" },
new object[] { "9", "cc" }
};
store.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:ComboBox
ID="ComboBox1"
runat="server"
QueryMode="Local"
EnableRegEx="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="value" />
<ext:ModelField Name="text" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</body>
</html>