PDA

View Full Version : [CLOSED] how to pass DropDownField's text to his component(gridpanel)'s store as a parameter ?



hdsoso
May 17, 2014, 3:27 PM
i want to achieve a feature such as google suggest, when i type something in the dropdownfield, will search the data about sth. into the gridpanel,
for example , i type "a" , the data about "a" will automatic show in gridpanel .
how to pass s DropDownField's text to his component(gridpanel)'s store as a parameter , so i can search data about the user's type.
below is my test case.


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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Loadinfo(object sender, StoreReadDataEventArgs e)
{
var start = e.Start;
var limit = e.Limit;
int num = 100;
var infos = new object[]
{
new {title="aa",addtime="2014-04-05"},
new {title="aa",addtime="2014-04-05"},
new {title="aa",addtime="2014-04-05"},
new {title="aa",addtime="2014-04-05"},
new {title="aa",addtime="2014-04-05"},
new {title="aa",addtime="2014-04-05"},
new {title="aa",addtime="2014-04-05"},
new {title="aa",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"}
};

e.Total = num;
s_info.DataSource = infos;
s_info.DataBind();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True" DisableViewState="False"></ext:ResourceManager>
<ext:DropDownField ID="ddf" runat="server" TriggerIcon="Search" Width="463">

<Component>
<ext:GridPanel runat="server" Title="分类信息">
<Store>
<ext:Store runat="server" ID="s_info" OnReadData="Loadinfo">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="title"></ext:ModelField>
<ext:ModelField Name="addtime"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy></ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="title" Text="标题" Flex="1"></ext:Column>
<ext:DateColumn runat="server" DataIndex="addtime" Format="yyyy--MM-dd" Text="日期"></ext:DateColumn>
</Columns>
</ColumnModel>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:PagingToolbar runat="server" StoreID="s_info"></ext:PagingToolbar>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</Component>
</ext:DropDownField>
</form>
</body>
</html>

Daniil
May 19, 2014, 6:52 AM
Hi @hdsoso,

You can do the following.

1. Set these settings for the DrowDownFields.

EnableKeyEvents="true"


<Listeners>
<KeyUp Handler="this.expand();
this.getPicker().getStore().load({
params: {
filter: this.getRawValue()
}
});" />
</Listeners>

2. Set this for the Store.

AutoLoad="false"

3. Access the filter parameter in the Loadinfo method:

protected void Loadinfo(object sender, StoreReadDataEventArgs e)
{
string filter = e.Parameters["filter"];
}

hdsoso
May 19, 2014, 10:36 AM
when click next page, the parameter dose not pass to directevent


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

<%@ Import Namespace="System.Diagnostics.Eventing.Reader" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Loadinfo(object sender, StoreReadDataEventArgs e)
{
string filter = e.Parameters["filter"];
var start = e.Start;
var limit = e.Limit;
int num = 100;
var infos = new object[] { };
if (filter == "a")
{
infos = new object[]
{
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"}
};
e.Total = 8;
}
else
{
infos = new object[]{
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title = "aa", addtime = "2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"},
new {title="bb",addtime="2014-04-05"}
};
e.Total = 17;
}


s_info.DataSource = infos;
s_info.DataBind();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True" DisableViewState="False"></ext:ResourceManager>
<ext:DropDownField ID="ddf" runat="server" TriggerIcon="Search" Width="463" EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="this.expand();
this.getPicker().getStore().load({
params: {
filter: this.getRawValue()
}
});" />
</Listeners>
<Component>
<ext:GridPanel runat="server" Title="分类信息">
<Store>
<ext:Store runat="server" ID="s_info" OnReadData="Loadinfo" AutoLoad="False" PageSize="3">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="title"></ext:ModelField>
<ext:ModelField Name="addtime"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Proxy>
<ext:PageProxy>

</ext:PageProxy>
</Proxy>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" DataIndex="title" Text="标题" Flex="1"></ext:Column>
<ext:DateColumn runat="server" DataIndex="addtime" Format="yyyy--MM-dd" Text="日期"></ext:DateColumn>
</Columns>
</ColumnModel>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:PagingToolbar runat="server" StoreID="s_info"></ext:PagingToolbar>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:GridPanel>
</Component>
</ext:DropDownField>
</form>
</body>
</html>

Daniil
May 19, 2014, 1:56 PM
Please change the KeyUp listener to this one:

<KeyUp Handler="this.expand();
this.getPicker().getStore().reload();" />
and set up this Parameters section for the Store

<Parameters>
<ext:StoreParameter Name="filter" Value="App.ddf.getRawValue()" Mode="Raw" />
</Parameters>