Hello @amitpareek!
There's no resourceManager defined in the page, at least. So the page refuses to load.
Printable View
Hello @amitpareek!
There's no resourceManager defined in the page, at least. So the page refuses to load.
Hi Fabricio,
Can you please add below code, just above the panel pnlParent and try again ?
Code:<ext:ResourceManager ID="supportResourceManager" runat="server" DirectMethodNamespace="DM"></ext:ResourceManager>
Hello @amitpareek!
I could run the example adding the resource manager.
It is still not clear what your goal is but I could see the calls you make for clearFilter() are breaking the typeAhead functionality of filtering the combo boxes based on what you type. I couldn't notice anything broken if I just commented out lines calling said clearFilter().
You should try the different approach suggested here: combox store filter lose efficacy after ClearFilter
Hope this helps!
Hi Fabricio,
That is what the main issue is, after clearFilter() its causing an issue in filter.
I will try this approch : https://forums.ext.net/showthread.php?59869
and let you know.
Hi Fabricio,
This solution didn't work for me.
I have to filter package combo on the basis of what is selected in client combo.
So when i try to select another value in client combo, i have to filter package combo, which requires to clear the filter.
Same thing with package and fq combo, fq combo filters on selection of package combo.
Hence this solution is not working for me : https://forums.ext.net/showthread.ph...l=1#post274164
Note : here first combo is client, second is package and third is fq.
Hello @amitpareek!
As there's a conflict with the filters maybe if you populated the stores with the relevant data as the previous ones are selected would fit best to your scenario?
Refer to this example that shows linked combo boxes being populated on previous' selection: Forms - Combo Box - Linked Combo Boxes
Else maybe a solution would be to, instead of calling clearFilter(), removing just the specific filter you are applying to the store on selection, hopefully that would prevent the typeAhead filters from being removed.
Hi Fabricio,
That exampla is getting data in second combo via service (Cities.asmx/GetCities). While i have all the data available in the combo store (that we get on boxReady), just need to filter it as per the clientId/PackageId of the selected client/package combo.
Also i have tried to remove the filter on combo selection, that is even not working for me.
Can you please try these solution on your end and let me know if any of it works for you ?
Hello @amitpareek!
Well, a suggestion is exactly to cease loading all data to the combo box and filter + typeAhead filter it so that you don't need to clear the filter ever.
It is not required to use a service to load the data, if you look at the ajax linked combos example, it just wires the OnReadData event to load the combo box. There, the function that loads the city list could be just replaced by the example's for loop making (for example) the packages list for customer 3, if that was the selection passed to the event.
One advantage on this approach is loading to the page only the necessary data on demand, making the user experience better if there are a lot of companies and each has lots of packages and, in turn, each has a lot of "FQ" entries. And you can mask the other combo boxes with the word "loading" as it fetches the data from the server.
If you really require the "all comboboxes preloaded" approach, let us know. We can try to get something working for you if that's feasible.
There may be a simple solution or the fix so complicated it pretty much takes the underlying (ExtJS) framework towards the next version which, in turn, would make the solution not feasible.
Please consider the on-demand loading approach, and let us know if it does not help at all so we can investigate the "all preloaded" approach for work around over the problem.
Hello Fabricio,
There are more than 46000 records in our case, so we have to get it only once for all three combos, and hence we use all preloaded approach.
I want to make a try with on demand loading approach as you suggested, so will check it first and then let you know if it wont work for me.
Thank you.
Hello @amitpareek!
By your claim I believe the best option is really have it loading on-demand instead of filtering over. Will save a lot during the first page load.
Anyway, I went ahead and reviewed your test case with a working filter-based solution. At least as far as I tested it here, it works fine. The main point there is the clearFieldFilters() function used instead of the store's clearFilter().
Still, the best solution seems to be loading the combo boxes as the selections are made.Code:<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>61851 - Store-filter-linked combo boxes</title>
<script type="text/javascript">
TestExtractionProtocol = {
ExpComboSelect: function (combo, records, eOpts) {
var clientcb = App.clientcb,
clientsto = App.clientsto,
pkgcb = App.pkgcb,
pkgsto = App.pkgsto,
fqcb = App.fqcb,
fqsto = App.fqsto,
clearFilter = TestExtractionProtocol.clearFieldFilters;
var cmVal = combo.getValue();
combo.getTrigger(0).show();
if (combo.id == clientcb.id) {
clearFilter(pkgsto, 'ClientId');
pkgsto.filter('ClientId', cmVal);
pkgcb.emptyText = "Select one Package";
pkgcb.applyEmptyText();
pkgcb.reset();
pkgcb.focus();
clearFilter(fqsto, 'ClientId');
fqsto.filter('ClientId', cmVal);
fqcb.reset();
} else if (combo.id == pkgcb.id) {
clearFilter(fqsto, 'PackageId');
fqsto.filter('PackageId', cmVal);
fqcb.emptyText = "Select one FQ";
fqcb.applyEmptyText();
fqcb.reset();
fqcb.focus();
}
},
// This will clear any filter affecting the specified field.
// It does not refresh the store though, it is expected a
// store.filter() would be called right after this to refresh it.
clearFieldFilters: function (store, field) {
var to_remove = [];
var eachFn = function (entry, index, self) {
if (entry.property == field) {
to_remove.push(index);
}
};
// Get the (reverse) list of filters to remove
Ext.each(store.filters.items, eachFn, this, true);
// Remove each filter
Ext.each(to_remove, function (entry) { store.filters.removeAt(entry); });
},
clearFilterExp: function (me) {
var clientcb = App.clientcb,
clientsto = App.clientsto,
pkgcb = App.pkgcb,
pkgsto = App.pkgsto,
fqcb = App.fqcb,
fqsto = App.fqsto,
clearFilter = TestExtractionProtocol.clearFieldFilters;
me.clearValue();
me.clear();
me.getTrigger(0).hide();
if (me.id == clientcb.id) {
clearFilter(pkgsto, 'ClientId');
pkgsto.filter('ClientId', -1);
clearFilter(fqsto, 'ClientId');
fqsto.filter('ClientId', -1);
TestExtractionProtocol.clearFilterExp(pkgcb);
pkgcb.emptyText = "Choose a client";
pkgcb.applyEmptyText();
} else if (me.id == pkgcb.id) {
clearFilter(fqsto, 'PackageId');
fqsto.filter('PackageId', -1);
TestExtractionProtocol.clearFilterExp(fqcb);
fqcb.emptyText = "Choose a package";
fqcb.applyEmptyText();
} else if (me.id == "fqcb") {
}
},
ExpComboBoxReady: function () {
var clientcb = App.clientcb,
clientsto = App.clientsto,
pkgcb = App.pkgcb,
pkgsto = App.pkgsto,
fqcb = App.fqcb,
fqsto = App.fqsto;
clientList = []; a = 1;
packageList = []; b = 1;
fqList = []; c = 1;
for (var i = 1; i <= 10; i++) {
clientList.push({ ClientId: i, ClientName: "Client " + i });
for (var j = 1; j <= 10; j++) {
packageList.push({ ClientId: i, PackageId: b, PackageName: "cl" + i + "/Package " + b });
for (var k = 1; k <= 50; k++) {
fqList.push({ ClientId: i, PackageId: b, FQId: c, FQName: "cl" + i + "/pk" + b + "/FQ " + c });
c++;
}
b++;
}
}
clientsto.removeAll();
clientsto.add(clientList);
pkgsto.removeAll();
pkgsto.add(packageList);
pkgsto.filter('ClientId', -1);
App.fqsto.removeAll();
App.fqsto.add(fqList);
fqsto.filter('ClientId', -1);
fqsto.filter('PackageId', -1);
clientcb.anyMatch = true;
clientcb.enableRegEx = false;
clientcb.bindStore(App.clientsto);
clientcb.displayField = 'ClientName';
clientcb.valueField = 'ClientId';
pkgcb.anyMatch = true;
pkgcb.enableRegEx = false;
pkgcb.bindStore(App.pkgsto);
pkgcb.displayField = 'PackageName';
pkgcb.valueField = 'PackageId';
pkgcb.emptyText = "Choose a client";
pkgcb.applyEmptyText();
fqcb.anyMatch = true;
fqcb.enableRegEx = false;
fqcb.bindStore(App.fqsto);
fqcb.displayField = 'FQName';
fqcb.valueField = 'FQId';
fqcb.emptyText = "Choose a package";
fqcb.applyEmptyText();
},
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" />
<div>
<h2>
Forum thread <a href="https://forums.ext.net/showthread.php?61851">61851</a>: link combo boxes by
their respective stores' filters with typeAhead enabled.
</h2>
<br />
<h4>
Using store.clearFilter() while typeAhead is enabled effectively disables typeAhead, so a selective
removal of filters is necessary, which is implemented with
<pre>TestExtractionProtocol.clearFieldFilters(store, field)</pre>
</h4>
<ext:Panel runat="server" ID="pnlParent" ItemID="pnlParent" Height="500">
<Items>
<ext:ComboBox
ID="clientcb"
QueryMode="Local"
runat="server"
DisplayField="ClientName"
Width="300"
Margin="15"
ValueField="ClientId"
FieldLabel="Client Name"
LabelAlign="Right"
TypeAhead="true"
>
<Store>
<ext:Store runat="server" ID="clientsto">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ClientId" />
<ext:ModelField Name="ClientName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect" />
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);" />
<AfterRender Fn="TestExtractionProtocol.ExpComboBoxReady" Delay="1000" />
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
</Triggers>
</ext:ComboBox>
<ext:ComboBox
ID="pkgcb"
runat="server"
QueryMode="Local"
DisplayField="PackageName"
Width="300"
Margin="15"
ValueField="PackageId"
FieldLabel="Package Name"
LabelAlign="Right"
TypeAhead="true"
>
<Store>
<ext:Store runat="server" ID="pkgsto" SortOnFilter="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="ClientId"></ext:ModelField>
<ext:ModelField Name="PackageId"></ext:ModelField>
<ext:ModelField Name="PackageName"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect"></Select>
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);"></TriggerClick>
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true"></ext:FieldTrigger>
</Triggers>
</ext:ComboBox>
<ext:ComboBox
ID="fqcb"
runat="server"
QueryMode="Local"
Width="300"
Margin="15"
DisplayField="FQName"
ValueField="FQId"
FieldLabel="FQ"
LabelAlign="Right"
TypeAhead="true"
>
<Store>
<ext:Store runat="server" ID="fqsto" SortOnFilter="true">
<Model>
<ext:Model runat="server" ID="modelfqlistEP">
<Fields>
<ext:ModelField Name="ClientId" />
<ext:ModelField Name="PackageId" />
<ext:ModelField Name="FQId" />
<ext:ModelField Name="FQName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Listeners>
<Select Fn="TestExtractionProtocol.ExpComboSelect" />
<TriggerClick Handler="TestExtractionProtocol.clearFilterExp(this);" />
</Listeners>
<Triggers>
<ext:FieldTrigger Icon="Clear" HideTrigger="true" />
</Triggers>
</ext:ComboBox>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>
Hope this helps, nevertheless!