Callback when Ext.NET Combobox local query returns no data

214 Views Asked by At

Using Ext.NET combobox.

<ext:ComboBox runat="server" 
    ID="ComboBoxCategorizedList" 
    QueryMode="Local" 
    ValueField="Id" 
    EmptyText="Type to begin search..." 
    TypeAhead="false"
    DisplayField="Name"
    Width="500"
    NoteAlign="Down" EnableKeyEvents="true"   
    Note="Press 'Search' icon or Press ENTER for more results"
    RemoveClearTrigger="true">
    <%--Note="Type '*' for a full list"--%>
    <HtmlBin>
        <ext:XScript runat="server">
            <script type="text/javascript">
                $(window).on("__refresh__", function () {
                    #{ StoreComboBoxCategorizedList }.reload();
                });
            </script>
        </ext:XScript>
    </HtmlBin>  
    <Store>
        <ext:Store runat="server" ID="StoreComboBoxCategorizedList" OnReadData="ComboBoxCategorizedList_ReadData">
            <Proxy>
                <ext:PageProxy />
            </Proxy>
            <Model>
                <ext:Model Id="ModelCategorizedComboBox" runat="server" IDProperty="Id">
                    <Fields>
                        <ext:ModelField Name="Id" />
                        <ext:ModelField Name="Name" />
                        <ext:ModelField Name="Type"  />
                        <ext:ModelField Name="RefId"  />
                        <ext:ModelField Name="Description"  />
                    </Fields>
                </ext:Model>
            </Model>
            <Listeners>
                <Update Handler="#{ComboBoxCategorizedList}.expand();" />
                <EndUpdate Handler="categorizedList();" />
            </Listeners>
            <Parameters>
                <ext:StoreParameter Mode="Raw" Name="filter" Value="#{ComboBoxCategorizedList}.getValue()" />
            </Parameters>
        </ext:Store>
    </Store>
    <Triggers>
        <ext:FieldTrigger Icon="Clear"/>
        <ext:FieldTrigger Icon="Search"></ext:FieldTrigger>
    </Triggers>
    <Listeners>
        <SpecialKey Fn="enterKeyPressHandler" />
        <Expand Handler="categorizedList();" Delay="100" />
        <BeforeSelect Fn="onBeforeSelect" />
        <KeyPress  Handler="#{ComboBoxCategorizedList}.getTrigger(1).onClick();" Buffer="1000" />
        <Change Handler="filterComboxBoxFunction(#{StoreComboBoxCategorizedList}, #{ComboBoxCategorizedList}.getValue()); #{ComboBoxCategorizedList}.expand(); categorizedList();" Delay="100" />
    </Listeners>

Not asking for debugging help, but I want to know if an Ext.NET or Extjs dev has a generic solution: Very simply ... I want to initiate a remote search only when the local search returns no records. So I am looking for the best way to wire this up to the combobox. I've looked at using the Expand event and BeforeQuery event but this seems to come up short.

I'm looking for best practices so i can add a "OnLocalQuery" event to my comboboxes; and then take action if the local query returns 0 matches.

1

There are 1 best solutions below

1
transistor_47 On

I use this function and it works fine .. and without QueryMode="Local":

<ext:ComboBox ID="cmb_name" runat="server" FieldLabel="ComboBox" EmptyText="-Select-" HideTrigger="true" TriggerAction="All" SelectOnFocus="true" DisplayField="Name" ValueField="Id" Editable="true" TabIndex="11">
    <Store>
        <ext:Store ID="str_ComboBox" runat="server" PageSize="10">
            <Model>
                <ext:Model ID="mdl_ComboBox" runat="server">
                    <Fields>
                    <ext:ModelField Name="Id" />
                    <ext:ModelField Name="Name" />
                    <ext:ModelField Name="Type"  />
                    <ext:ModelField Name="RefId"  />
                    <ext:ModelField Name="Description"  />
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    </Store>
    <Listeners>
        <Change Fn="fn_filter" />
    </Listeners>
</ext:ComboBox>

<script type="text/javascript">
var fn_filter = function (_this, newValue, oldValue, eOpts) {
    var n = 0;
    if (_this.lastQuery == undefined || _this.lastQuery == null) {
        _this.lastQuery = "";
    }
    _this.getStore().clearFilter(true);
    _this.getStore().load();
    _this.store.filter(function (item) {
        if (item.get('Name').includes(_this.getRawValue())) {
            n = n + 1;
            return true;
        }
        else {
            return false;
        }
    });
    _this.expand();
    if (n == 0) {
        //returns no records
        //enter code here Callback
    }
}
</script>