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

  1. #1

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

    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>
    Last edited by Daniil; May 23, 2014 at 7:00 AM. Reason: [CLOSED]
  2. #2
    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"];
    }
  3. #3
    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>
  4. #4
    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>

Similar Threads

  1. [CLOSED] How can I make ImageCommandColumn pass a Parameter
    By tobros in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 10, 2013, 5:31 AM
  2. [CLOSED] How to pass parameter when using HttpWriteProxy
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 16, 2012, 9:46 PM
  3. Pass Parameter to store at runtime
    By Vaishali in forum 1.x Help
    Replies: 0
    Last Post: Feb 07, 2012, 6:58 AM
  4. pass parameter by selected row in grid panel
    By vahid.ch in forum 1.x Help
    Replies: 0
    Last Post: Dec 19, 2011, 11:05 AM
  5. How to pass object as a parameter?
    By diegovbs in forum 1.x Help
    Replies: 1
    Last Post: Jan 04, 2011, 5:53 PM

Posting Permissions