[CLOSED] Combo Box Pre-Selection Problem

  1. #1

    [CLOSED] Combo Box Pre-Selection Problem

    Hi

    I have tried to develop a drop down list that pre-selects a value in the Example

    https://examples1.ext.net/#/Form/Com...Custom_Search/

    I have added the script:

        <script type="text/javascript">
            function afterRender(e)
            {
                var val = "cowslip";
                e.store.baseParams = { preSelect: val };
                        
                var store = e.getStore();
                store.on("load", function ()
                {
                    e.setValue(val);
                    if (e.store.data.length == 0)
                    {
                        e.clearValue();
                    }
                });
                store.load();
                clensePreSelect(e);
                
            }
    
            function clensePreSelect(selector)
            {
                selector.store.baseParams = { preSelect: null };
                selector.store.removeAll(true);
                selector.store.clearData();
                selector.setValue(null);
                selector.clearValue();
                selector.setRawValue(null);
                selector.lastQuery = null;
                selector.store.totalLength = 0;
            }
            function checkValue(selector)
            {
                clensePreSelect(selector);
            }
        </script>
    Adding this markup to the combobox item itself:

                            <Triggers>
                                <%--<ext:FieldTrigger Icon="SimpleWrench" Qtip="Check value" />--%>
                                <ext:FieldTrigger Icon="Clear" Qtip="Clear" />
                            </Triggers>
                            <Listeners>
                                <AfterRender Handler="afterRender(this);" />               
                                <TriggerClick Handler="checkValue(this);"  />  
                            </Listeners>
    However, when it loads it successfully selects "cowslip", but if you hit clear and then perform another search:
    1) If you type too slow, it pre-selects "cowslip" again, and you end up typing in the middle of the word cowslip.
    2) If you search for something that isnt in the store, it clears what you have typed in.
    3) If you search for something that is in the store, eg *, it replaces what you searched for with "cowslip". Even though the list search correctly and you selected an item in it.

    Hope you can help, this is driving me bonkers! :)

    Ian
    Last edited by Daniil; Jun 13, 2011 at 3:52 PM. Reason: [CLOSED]
  2. #2
    Hi,

    There is a lot of redundant things within the code of the 'clensePreSelect' function.

    Please describe the requirement and we will try to suggest the solution.

    But before describing please investigating the following related thread:
    http://forums.ext.net/showthread.php?10708
  3. #3
    Hi Daniil,

    Thanks for the reply, the other link had no relevance to our problem as far as we can see.

    We have been trying to get this working for quite a while and have been googling various "solutions", the clensePreSelect function is pretty much anything we could find, all put into one function. Its aim is to completely clear any previous query and any mention of the pre-selected value.

    What we are trying to do is:
    1) have a custom powered search powered by our data source (which works)
    2) be able to preselect a value (which also works)

    However, we can't completely clear the search after we have pre-selected it, allowing the user to perform a new/different search.

    Kind regards

    Ian
  4. #4
    I guess you need to clear a lastQuery.
    http://dev.sencha.com/deploy/ext-3.3...mber=lastQuery

    Example
    <BeforeQuery Handler="delete queryEvent.combo.lastQuery;" />
  5. #5
    Hi Daniil

    I have commented out all the contents of the clensePreSelect function out, and added the suggested listener to the combobox.

    This causes the trigger button not to work (to be expected after commenting out the function content), and does not stop the problems I have had before.

    Kind regards

    Ian
  6. #6
    Is there TriggerAction="Query" for the ComboBox?
  7. #7
    Hi Danill,

    The example is as https://examples1.ext.net/#/Form/Com...Custom_Search/

    I have tried adding this attribute, but that makes no difference either. If you try adding the clear trigger and preceeding code to that example you will see the same problems.

    Kind regards

    Ian
  8. #8
    Relating to the example you mentioned, I can suggest you to investigate the following one.

    I changed only Default.aspx, all rest parts are the same.

    Please note that if you would change "predefined index (emulated value)", you will see it.

    Example
    <%@ 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>Ext.NET Example</title>
        <style type="text/css">
            .search-item {
                font          : normal 11px tahoma, arial, helvetica, sans-serif;
                padding       : 3px 10px 3px 10px;
                border        : 1px solid #fff;
                border-bottom : 1px solid #eeeeee;
                white-space   : normal;
                color         : #555;
            }
            
            .search-item h3 {
                display     : block;
                font        : inherit;
                font-weight : bold;
                color       : #222;
            }
    
            .search-item h3 span {
                float       : right;
                font-weight : normal;
                margin      : 0 0 5px 5px;
                width       : 100px;
                display     : block;
                clear       : none;
            } 
            
            p { width: 650px; }
            
            .ext-ie .x-form-text { position : static !important; }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
        
            <div style="width:600px;">
                <div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
                <div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
                    <h3 style="margin-bottom:5px;">Search the plants</h3>
                    
                <ext:ComboBox 
                    ID="ComboBox1"
                    runat="server" 
                    DisplayField="Common" 
                    ValueField="Common"
                    TypeAhead="false"
                    LoadingText="Searching..." 
                    Width="570"
                    PageSize="10"
                    HideTrigger="true"
                    ItemSelector="div.search-item"        
                    MinChars="1">
                    <Store>
                        <ext:Store runat="server" AutoLoad="false">
                            <Proxy>
                                <ext:HttpProxy Method="POST" Url="Plants.ashx" />
                            </Proxy>
                            <Reader>
                                <ext:JsonReader Root="plants" TotalProperty="total">
                                    <Fields>
                                        <ext:RecordField Name="Common" />
                                        <ext:RecordField Name="Botanical" />
                                        <ext:RecordField Name="Light" />
                                        <ext:RecordField Name="Price" Type="Float" />
                                        <ext:RecordField Name="Indoor" Type="Boolean" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <Template runat="server">
                       <Html>
                           <tpl for=".">
                              <div class="search-item">
                                 <h3><span>${Price}</span>{Common}</h3>
                                 {Botanical}
                              </div>
                           </tpl>
                       </Html>
                    </Template>
                    <Triggers>
                        <ext:FieldTrigger Icon="Clear" Tag="clear" />
                    </Triggers>
                    <Listeners>
                        <TriggerClick Handler="if (tag === 'clear') {
                                                   this.clear();
                                                   delete this.lastQuery;
                                               }" />
                        <BeforeQuery 
                            Handler="var mode = RadioGroup1.getValue().inputValue,
                                         combo = queryEvent.combo,
                                         store = combo.store;
                                    switch (mode) {
                                        case 0:
                                        case 1:
                                            store.on(
                                                'load', 
                                                function (store, records) {
                                                    combo.setValue(records[mode].data.Common);        
                                                },
                                                null,
                                                {
                                                    single : true
                                                }
                                            );
                                            break;
                                    };" />
                    </Listeners>
                </ext:ComboBox>
                <div style="padding-top:4px;">
                    Plants search (type '*' (asterisk) for showing all)
                </div>
                </div></div></div>
                <div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
            </div>
            
            <br />
    
            <ext:RadioGroup ID="RadioGroup1" runat="server" ColumnsNumber="1">
                <Items>
                    <ext:Radio 
                        runat="server" 
                        InputValue="={-1}" 
                        BoxLabel="Without predefined" 
                        Checked="true" />
                    <ext:Radio 
                        runat="server" 
                        InputValue="={0}" 
                        BoxLabel="Predefined: index 0" />
                    <ext:Radio 
                        runat="server" 
                        InputValue="={1}" 
                        BoxLabel="Predefined: index 1" />
                </Items>
                <Listeners>
                    <%--<Change Handler="delete ComboBox1.lastQuery;" />--%> <%--Uncomment to reset a combo automatically--%>
                </Listeners>
            </ext:RadioGroup>
                
        </form>
    </body>
    </html>

Similar Threads

  1. [CLOSED] Combo initialization with no selection on window show.
    By FAS in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 22, 2012, 4:53 PM
  2. Replies: 0
    Last Post: Jan 06, 2010, 6:41 AM
  3. Replies: 3
    Last Post: Dec 10, 2009, 10:51 AM
  4. Combo Force Selection
    By simonmicheal in forum 1.x Help
    Replies: 0
    Last Post: Aug 26, 2009, 11:34 AM
  5. Combo Force Selection
    By simonmicheal in forum 1.x Help
    Replies: 3
    Last Post: Aug 15, 2009, 2:30 PM

Tags for this Thread

Posting Permissions