[CLOSED] Implementing Non-CaseSensitive Regex in ComboBox

[Argenta]

Hi

I'm trying implement this override but I'm getting an error message saying that me.queryFilter is undefined. Do I need to do something additional, other than include it as an override?

Ext.form.field.ComboBox.override({
    doQuery: function(queryString, forceAll, rawQuery) {
        queryString = queryString || '';


        // store in object and pass by reference in 'beforequery'
        // so that client code can modify values.
        var me = this,
            qe = {
                query: queryString,
                forceAll: forceAll,
                combo: me,
                cancel: false
            },
            store = me.store,
            isLocalMode = me.queryMode === 'local';


        if (me.fireEvent('beforequery', qe) === false || qe.cancel) {
            return false;
        }


        // get back out possibly modified values
        queryString = qe.query;
        forceAll = qe.forceAll;


        // query permitted to run
        if (forceAll || (queryString.length >= me.minChars)) {
            // expand before starting query so LoadMask can position itself correctly
            me.expand();


            // make sure they aren't querying the same thing
            if (!me.queryCaching || me.lastQuery !== queryString) {
                me.lastQuery = queryString;


                if (isLocalMode) {


                    // Querying by a typed string...
                    if (queryString || !forceAll) {


                        // Ensure queryFilter is enabled and set the new value
                        me.queryFilter.disabled = false;
                        me.queryFilter.setValue(me.enableRegEx ? new RegExp(queryString, me.caseSensitive ? '' : 'i') : queryString);
                    }


                    // Disable query value filter if no query string or forceAll passed
                    else {
                        me.queryFilter.disabled = true;
                    }


                    // Filter the Store according to the updated filter
                    store.filter();
                } else {
                    // Set flag for onLoad handling to know how the Store was loaded
                    me.rawQuery = rawQuery;


                    // In queryMode: 'remote', we assume Store filters are added by the developer as remote filters,
                    // and these are automatically passed as params with every load call, so we do *not* call clearFilter.
                    if (me.pageSize) {
                        // if we're paging, we've changed the query so start at page 1.
                        me.loadPage(1);
                    } else {
                        store.load({
                            params: me.getParams(queryString)
                        });
                    }
                }
            }


            // Clear current selection if it does not match the current value in the field
            if (me.getRawValue() !== me.getDisplayValue()) {
                me.ignoreSelection++;
                me.picker.getSelectionModel().deselectAll();
                me.ignoreSelection--;
            }


            if (isLocalMode) {
                me.doAutoSelect();
            }
            if (me.typeAhead) {
                me.doTypeAhead();
            }
        }
        return true;
    }
});

Thanks

Jeff

[Daniil]

Hi Jeff,

A ComboBox's doQuery method looks quite different in ExtJS 5.1.1 which is a base of the latest Ext.NET.
http://docs.sencha.com/extjs/5.1/5.1...method-doQuery

Not sure which starting point you used for the override.

Also I am not sure about the initial requirement. It looks like filtering is non-case-sensitive by default. Typing "i" or "I" doesn't matter in the example below - it filters case-insensitively. But if set CaseSensitive="true" it filter case-sensitive.

Please elaborate on the initial requirement

Example

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

<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", "Item 1" },
                new object[] { "2", "Item 2" },
                new object[] { "3", "Item 3" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:ComboBox 
            ID="ComboBox1" 
            runat="server" 
            DisplayField="text" 
            ValueField="value"
            QueryMode="Local">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="value" />
                                <ext:ModelField Name="text" />
                            </Fields>
                        </ext:Model>
                    </Model>
                    <Reader>
                        <ext:ArrayReader />
                    </Reader>
                </ext:Store>
            </Store>
        </ext:ComboBox>
    </form>
</body>
</html>

[Argenta]

Hi Daniil

This is a simplified version of the initial requirement. I have got CaseSensitive set to false. So when I type in 'app' I would expect to get 2 records; "Apple & Blackberry" and "Pineapple" but I only get "Pineapple". Similarly when I type in "App" I only get "Apple & Blackberry" .

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <script>
        </script>
</head>
<body>
    @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug).SourceFormatting(true)
    @(Html.X().FormPanel().ID("FormPanel").Layout(LayoutType.Anchor)
        .Items(Html.X().FieldSet().Items(
        Html.X().ComboBox().DisplayField("Name").Height(22).Width(600).Height(30).Editable(true).EnableRegEx(true).CaseSensitive(false).QueryMode(DataLoadMode.Local)
            .Name("Name").FieldLabel("Product:").MaxLength(100)
            .ListConfig(Html.X().BoundList().ItemTpl(Html.X().XTemplate().Html(@<div>{Name}</div>)))
                .Store(Html.X().Store()
                    .Model(Html.X().Model().Fields(new ModelField("Item")))
                    .Proxy(Html.X().AjaxProxy().Url(Url.Action("ReadProducts")).Reader(Html.X().JsonReader().RootProperty("data")))
                    )
             )
        )
    )
</body>
</html>

using Ext.Net;
using Ext.Net.MVC;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace ExtSandpit.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult ReadProducts()
        {
            List<Product> lstProducts = new List<Product>();
            lstProducts.Add(new Product(1001, "Apple & Blackberry"));
            lstProducts.Add(new Product(1002, "Pineapple"));
            lstProducts.Add(new Product(1003, "Pine  nuts"));
            return this.Store(lstProducts);
        }
    }

    public class Product
    {
        public Product()
        {
        }
        public Product(int id, string name)
        {
            ID = id;
            Name = name;
        }
        public int ID { get; set; }
        public string Name { get; set; }
    }
}

Thanks

Jeff

[Daniil]

Thank you for the test case.

If .EnableRegEx(true) then a .CaseSensitive setting is ignored.

.EnableRegEx(true) means that a user types a regular expression directly in ComboBox, not just a text to filter.

It looks like you should remove .EnableRegEx(true) and set .AnyMatch(true) for the ComboBox. It turned out that we missed the AnyMatch setting. Created an Issue:
https://github.com/extnet/Ext.NET/issues/896

I will fix right away, but it is also possible to set it via:
.CustomConfig(cc => cc.Add(new { anyMatch = true }))

[Daniil]

The AnyMatch setting has been added in the revision 6563 (trunk). It goes to the 3.3 release.

Thank you for the question that led to the finding that it is missed.

[Argenta]

Thanks very much Daniil

That's all working as expected now.

Jeff