What's New?

[CLOSED] Combobox property QueryMode = Local

  1. #1
    Oct 14, 2014, 8:35 PM

    [CLOSED] Combobox property QueryMode = Local

    Hi Ext.net support team !!

    Through this example, I want to represent my problem.

    Step 1. Type on the ComboBox "Company", the word "General".
    Step 2. Select the enterprise "General Electric Company".
    Step 3. Click on the "Company" button.
    Step 4. Select enterprise "3 Com".

    The selected enterprise from "Company GridPanel" don't appears selected in the "Company ComboBox"

    Step 5. Click on the "Company" button.
    Step 6. Select enterprise "General Motors Corporation".

    The selected enterprise from "Company GridPanel" appears selected in the "Company Combobox".

    This issue is represent when the QueryMode property is equal to "Local".

    
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            this.Store1.DataSource = new object[]
            {
                new object[] { "01-01", "3m Co"},
                new object[] { "02-02", "Alcoa Inc"},
                new object[] { "03-03", "Altria Group Inc"},
                new object[] { "04-04", "American Express Company"},
                new object[] { "05-05", "American International Group, Inc."},
                new object[] { "06-06", "AT&T Inc."},
                new object[] { "07-07", "Boeing Co."},
                new object[] { "08-08", "Caterpillar Inc."},
                new object[] { "09-09", "Citigroup, Inc."},
                new object[] { "10-10", "E.I. du Pont de Nemours and Company"},
                new object[] { "11-11", "Exxon Mobil Corp"},
                new object[] { "12-12", "General Electric Company"},
                new object[] { "13-13", "General Motors Corporation"},
                new object[] { "14-14", "Hewlett-Packard Co."},
                new object[] { "15-15", "Honeywell Intl Inc"},
                new object[] { "16-16", "Intel Corporation"},
                new object[] { "17-17", "International Business Machines"},
                new object[] { "18-18", "Johnson & Johnson"},
                new object[] { "1919", "JP Morgan & Chase & Co"},
                new object[] { "20-20", "McDonald\"s Corporation"},
                new object[] { "21-21", "Merck & Co., Inc."},
                new object[] { "22-22", "Microsoft Corporation"},
                new object[] { "23-23", "Pfizer Inc"},
                new object[] { "24-24", "The Coca-Cola Company"},
                new object[] { "25-25", "The Home Depot, Inc."},
                new object[] { "26-26", "The Procter & Gamble Company"},
                new object[] { "27-27", "United Technologies Corporation"},
                new object[] { "28-28", "Verizon Communications"},
                new object[] { "29-29", "Wal-Mart Stores, Inc."}
            };
            this.Store1.DataBind();
                        
            this.Store2.DataSource = new object[]
            {
                new object[] { "01-01", "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                new object[] { "02-02", "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                new object[] { "03-03", "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                new object[] { "04-04", "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "05-05", "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                new object[] { "06-06", "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                new object[] { "07-07", "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                new object[] { "08-08", "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                new object[] { "09-09", "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                new object[] { "10-10", "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                new object[] { "11-11", "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                new object[] { "12-12", "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                new object[] { "13-13", "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                new object[] { "14-14", "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                new object[] { "15-15", "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                new object[] { "16-16", "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                new object[] { "17-17", "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                new object[] { "18-18", "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                new object[] { "19-19", "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                new object[] { "20-20", "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                new object[] { "21-21", "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                new object[] { "22-22", "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                new object[] { "23-23", "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                new object[] { "24-24", "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                new object[] { "25-25", "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                new object[] { "26-26", "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                new object[] { "27-27", "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                new object[] { "28-28", "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                new object[] { "29-29", "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
            };

            this.Store2.DataBind();
        }
    }
    protected void Button2_Click(object sender, DirectEventArgs e)
    {
        Window1.Show();
    }
    protected void RowSelectionModel1_OnCellSelect(object sender, DirectEventArgs e)
    {
        ComboBox1.GetStore().ClearFilter();
        ComboBox1.Value = e.ExtraParams["id"].ToString();
        
        Window1.Hide();
    }      
</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <title></title>

    <style type="text/css">
        .my-toolbar1
        {
            background-color : #f5f5f5;
            background-image : none;
        }    
        .my-toolbar2
        {
            background-color : #dfeaf2;
            background-image : none;
        }  
    </style>
</head>

    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" IDMode="Explicit" Theme="Neptune" />

            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" DefaultAnchor="90%">
                <Items>
                    <ext:Panel ID="Panel1" runat="server" 
                            Region="North"
                            Margins="5 5 5 5"
                            BodyPadding="5"
                            Frame="true" >
                        <DockedItems>
                            <ext:Toolbar ID="Toolbar1" runat="server" Dock="Top" Cls="my-toolbar1">
                                <Items>
                                    <ext:ToolbarFill />
                                    <ext:Button ID="Button1" runat="server" Icon="Cog" Text="Tools">
                                        <Menu>
                                            <ext:Menu ID="Menu1" runat="server">
                                            <Items>
                                                <ext:MenuItem ID="MenuItem1" runat="server" Icon="Printer" Text="Print" Handler="function () {alert('Print');}" />
                                                <ext:MenuSeparator ID="MenuSeparator1" runat="server" />
                                                <ext:MenuItem ID="MenuItem2" runat="server" Icon="PageCode" Text="Export XML">
                                                </ext:MenuItem>
                                            </Items>
                                            </ext:Menu>
                                        </Menu>
                                        <ToolTips>
                                            <ext:ToolTip ID="ToolTip1" runat="server" Html="Tools" />
                                        </ToolTips>
                                </ext:Button>
                            </Items>
                            </ext:Toolbar>
                            <ext:Toolbar ID="Toolbar2" runat="server" Dock="Top" Cls="my-toolbar2">
                                <Items>
                                    <ext:FieldContainer ID="FieldContainer1" runat="server" Layout="HBoxLayout" FieldLabel="Company" AnchorHorizontal="100%">
                                        <Items>
                                            <ext:ComboBox ID="ComboBox1" runat="server"
                                                    AllowBlank="true"
                                                    DisplayField="company"
                                                    ValueField="id"
                                                    QueryMode="Local"
                                                    TypeAhead="true"
                                                    ForceSelection="true"
                                                    TriggerAction="All"
                                                    Name="id_company" Width="380"
                                                    EmptyText="Select Company">
                                                <Store>
                                                    <ext:Store ID="Store1" runat="server" >               
                                                        <Model>
                                                            <ext:Model ID="Model1" runat="server">
                                                                <Fields>
                                                                    <ext:ModelField Name="id"/>
                                                                    <ext:ModelField Name="company" />
                                                                </Fields>
                                                            </ext:Model>
                                                        </Model>
                                                    </ext:Store>
                                                </Store>
                                                <Triggers>
                                                    <ext:FieldTrigger Icon="Clear" HideTrigger="true" />
                                                </Triggers>
                                                <DirectEvents>
                                                    <Select>
                                                        <EventMask ShowMask="true" />
                                                    </Select>
                                                </DirectEvents>
                                                <ListConfig>
                                                    <ItemTpl ID="ItemTpl2" runat="server">
                                                        <Html>
                                                            <div class="list-item">
                                                                <h3>{company}</h3>
                                                                    {id}
                                                            </div>
                                                        </Html>
                                                    </ItemTpl>
                                                </ListConfig>
                                                <Listeners>
                                                    <Select Handler="this.getTrigger(0).show();" />
                                                    <BeforeQuery Handler="this.getTrigger(0)[this.getRawValue().toString().length == 0 ? 'hide' : 'show']();" />
                                                    <TriggerClick Handler="if (index == 0) 
                                                                        { 
                                                                               this.clearValue(); 
                                                                               this.getTrigger(0).hide();
                                                                           }" />
                                                </Listeners>
                                            </ext:ComboBox>
                                            <ext:Button ID="Button2" runat="server" Icon="Zoom" ToolTip="Company">
                                                <DirectEvents>
                                                    <Click OnEvent="Button2_Click">
                                                    </Click>
                                                </DirectEvents>

                                            </ext:Button>
                                        </Items>
                                    </ext:FieldContainer>
                                </Items>
                            </ext:Toolbar>
                        </DockedItems> 
                    </ext:Panel>                                
                </Items>
            </ext:Viewport>                

            <ext:Window ID="Window1" runat="server"
                    Title="Example" 
                    Icon="Table"
                    Modal="true" 
                    Width="780" 
                    Height="400"
                    Collapsible="true"
                    Hidden="true"
                    Layout="Fit" Closable="true">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server"
                            Height="400" Layout="AnchorLayout" ForceFit="true">
                        <Store>
                            <ext:Store ID="Store2" runat="server" PageSize="10">
                                <Model>
                                    <ext:Model ID="Model2" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="id"/>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column runat="server" Text="Id" DataIndex="id"/>
                                <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                                <ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
                                    <Renderer Format="UsMoney" />
                                </ext:Column>
                                <ext:Column runat="server" Text="Change" Width="75" DataIndex="change" />
                                <ext:Column runat="server" Text="Pct.Change" Width="75" DataIndex="pctChange" />
                                <ext:DateColumn runat="server" Text="Last Updated" Width="85" DataIndex="lastChange" Format="dd-mm-yyyy" />
                            </Columns>
                        </ColumnModel>

                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server">
                                <DirectEvents>
                                    <Select OnEvent="RowSelectionModel1_OnCellSelect">
                                        <ExtraParams>
                                            <ext:Parameter Name="id" Value="record.get('id')" Mode="Raw" />
                                        </ExtraParams>
                                        <EventMask ShowMask="True" Msg="Redireccionando ..." MinDelay="100" />
                                    </Select>
                                </DirectEvents>
<%--                                <Listeners>
                                    <Select Handler="#{Window1}.hide();" ></Select>
                                </Listeners>--%>
                            </ext:RowSelectionModel>
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server"
                                    DisplayInfo="true"
                                    DisplayMsg="{0} - {1} de {2}"
                                    EmptyMsg="No hay registros a desplegar">
                                    <Items>
                                        <ext:Label ID="Label5" runat="server" Text="Tama?o de la P?gina:" />
                                        <ext:ToolbarSpacer ID="ToolbarSpacer5" runat="server" Width="10" />
                                        <ext:ComboBox ID="ComboBox5" runat="server" Width="80">
                                            <Items>
                                                <ext:ListItem Text="1" />
                                                <ext:ListItem Text="5" />
                                                <ext:ListItem Text="10" />
                                                <ext:ListItem Text="20" />
                                            </Items>
                                            <SelectedItems>
                                                <ext:ListItem Value="10" />
                                            </SelectedItems>
                                            <Listeners>
                                                <Select Handler="#{GridPanel1}.store.pageSize = parseInt(this.getValue(), 10); #{GridPanel1}.store.reload();" />
                                            </Listeners>
                                        </ext:ComboBox>
                                    </Items>
                                    <Plugins>
                                        <ext:ProgressBarPager ID="ProgressBarPager1" runat="server" />
                                    </Plugins>
                                </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>    
                </Items>
            </ext:Window>
        </form>
    </body> 
</html>
    Any ideas about how to overcome this issue?

    Best Regards
    Last edited by Daniil; Oct 16, 2014 at 1:32 PM. Reason: [CLOSED]
  2. #2
    Oct 15, 2014, 11:59 AM
    Hi @opendat2000,

    Typing in the ComboBox filters its underlying Store. I think it needs to clear the filter before applying the new value.

    Please try:
    protected void RowSelectionModel1_OnCellSelect(object sender, DirectEventArgs e)
{
    ComboBox1.GetStore().ClearFilter();
    ComboBox1.Value = e.ExtraParams["id"].ToString();
    Window1.Hide();
}
  3. #3
    Oct 15, 2014, 2:41 PM
    Thanks Daniil ..

    The sentence works fine, but now the filter doesn't work property, i've inserted code-line in the first post.

    Step 1. Type on the ComboBox "Company", the word "General".
    Step 2. Select the enterprise "General Electric Company".
    Step 3. Click on the "Company" button.
    Step 4. Select enterprise "3 Com".

    The selected enterprise from "Company GridPanel" appears selected in the "Company Combobox".

    But if repeat step 1,the filter doesn't work property

    Any ideas about how to overcome this issue?

    Best Regards
  4. #4
    Oct 16, 2014, 5:01 AM
    It turns out that a clearFilter() call breaks the things.

    Please try:
    protected void RowSelectionModel1_OnCellSelect(object sender, DirectEventArgs e)
{
    ComboBox1.Reset();
    X.Js.AddScript(string.Format("delete {0}.lastQuery;", ComboBox1.ClientID));
    ComboBox1.Value = e.ExtraParams["id"].ToString();
    Window1.Hide();
}
  5. #5
    Oct 16, 2014, 1:29 PM
    Thank you for your support and comments Daniil.

    You can mark this thread with CLOSED

    Saludos
    Mauricio.

Similar Threads

  1. [CLOSED] Local Filtering on ComboBox
    By ptrourke in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: May 30, 2014, 4:17 PM
  2. ComboBox Local Mode Filter Issue(Urgent)
    By shaileshsakaria in forum 2.x Help
    Replies: 2
    Last Post: Apr 03, 2013, 1:29 PM
  3. combobox using local data. <Model> not existed
    By fangmdu in forum 2.x Help
    Replies: 2
    Last Post: Jul 03, 2012, 6:07 PM
  4. [CLOSED] Local datastore filtering param when getting data to combo in local mode
    By KorsG in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 11, 2010, 11:46 AM
  5. [CLOSED] Setting the EmptyText property to a comboBox using local resources.
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 04, 2010, 12:24 PM

Posting Permissions