What's New?

Combobox with force selection

  1. #1
    Feb 22, 2012, 3:03 AM

    Combobox with force selection

    I have a simple ComboBox and I want the users to be able pick from the list of items in the box. so i prepared my combo like,

    <ext:ComboBox ID="ComboBox1" runat="server" DisplayField="Name" ValueField="Value"
        TypeAhead="false" ForceSelection="true">
    i referred and using same like custom search combobox
    https://examples1.ext.net/#/Form/Com...Custom_Search/

    But it is not allowing the user to delete the selected item.. if combox is empty then its filling the last selected item automatically when its lost the focus!!..
    i don't want auto fill to happen if user delete the selected item. how to accomplish my requirement?
  2. #2
    Feb 22, 2012, 8:02 AM
    Hi,

    Quote Originally Posted by dtamils View Post
    But it is not allowing the user to delete the selected item.. if combox is empty then its filling the last selected item automatically when its lost the focus!!..
    This is the functionality of ForceSelection="true".

    You should set up ForceSelection="false" to achieve your requirement.

    As an alternative solution you can use an additional trigger to clear a ComboBox.
    https://examples1.ext.net/#/Form/Com...riggerButtons/
  3. #3
    Mar 24, 2012, 1:04 AM
    Quote Originally Posted by Daniil View Post
    Hi,



    This is the functionality of ForceSelection="true".

    You should set up ForceSelection="false" to achieve your requirement.

    As an alternative solution you can use an additional trigger to clear a ComboBox.
    https://examples1.ext.net/#/Form/Com...riggerButtons/
    I also encountered the same problem.
    But set up ForceSelection="false" ,will be allowed to enter a non-existent List inside the value.
    As if only one more trigger button to clear a ComboBox.
    But Extjs 3.4 inside the example is not such a problem,Do not need more of a trigger button.
    http://dev.sencha.com/deploy/ext-3.4...rm/combos.html
    Can such as Extjs ???
    Last edited by d18zj; Mar 24, 2012 at 1:11 AM.
  4. #4
    Mar 26, 2012, 6:33 AM
    Can you add a judgment here, if is empty, don't write back to the old value.
    in the file:
    <Ext.Net sources root>\Ext.Net\Build\Ext.Net\extnet\core\form\ComboBox.js
    in the sections:
    checkOnBlur : function () {
        var t = this.getEl().dom.value ? this.getEl().dom.value.trim() : "", v = this.getValue();

        if (this.oldValue !== v || (t !== this.oldText && t !== this.emptyText)) {
            if (!Ext.isEmpty(this.selValue) && this.selText !== t && this.selValue === this.getValue()) {
                this.hiddenField.value = "";
            }

            var val = this.el.dom.value,
                r = this.findRecordByText(this.displayField, val);

            if (!Ext.isEmpty(r)) {
                this.onSelect(r, this.store.indexOf(r), false, true);
            } else {
                if (this.forceSelection) {
                    //if (Ext.isEmpty(this.findRecord(this.valueField, this.oldValue))) {
                    //if is empty or a not exist value ,then clear value.
                    if (t == "" || Ext.isEmpty(this.findRecord(this.valueField, this.oldValue))) {
                        this.clearValue();
                    } else {
                        this.setValue(this.oldValue);
                    }
                } else {
                    this.setValue(val);
                }
            }

            this.getSelectionField().setValue(this.getSelectedIndex());
        }
    },
  5. #5
    Mar 27, 2012, 2:10 PM
    Confirmed. We will consider it.

    For now, please fix it locally on your page.

    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", "item1" },
                new object[] { "2", "item2" },
                new object[] { "3", "item3" }
            };
            store.DataBind();
        }
    }
</script>

<!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>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
    <script type="text/javascript">
        Ext.form.ComboBox.override({
            checkOnBlur : function () {
                var t = this.getEl().dom.value ? this.getEl().dom.value.trim() : "", 
                    v = this.getValue();

                if (this.oldValue !== v || (t !== this.oldText && t !== this.emptyText)) {
                    if (!Ext.isEmpty(this.selValue) && this.selText !== t && this.selValue === this.getValue()) {
                        this.hiddenField.value = "";
                    }

                    var val = this.el.dom.value,
                        r = this.findRecordByText(this.displayField, val);

                    if (!Ext.isEmpty(r)) {
                        this.onSelect(r, this.store.indexOf(r), false, true);
                    } else {
                        if (this.forceSelection) {
                            if (Ext.isEmpty(this.findRecord(this.valueField, this.oldValue)) || val === "") {

                                this.clearValue();
                            } else {
                                this.setValue(this.oldValue);
                            }
                        } else {
                            this.setValue(val);
                        }
                    }

                    this.getSelectionField().setValue(this.getSelectedIndex());
                }
            }
        });
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:ComboBox ID="ComboBox1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="value" />
                                <ext:RecordField Name="text" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
        </ext:ComboBox>
    </form>
</body>
</html>
  6. #6
    Mar 28, 2012, 12:59 AM
    Quote Originally Posted by Daniil View Post
    Confirmed. We will consider it.

    For now, please fix it locally on your page.
    Thank you very much.

Similar Threads

  1. [CLOSED] [1.2] Force request from WebService-ComboBox
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 22, 2011, 12:35 PM
  2. [CLOSED] Force selection in grid
    By krzak in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 28, 2011, 2:03 PM
  3. [CLOSED] Force remote reloading of ComboBox on each query
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 05, 2010, 3:59 PM
  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