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().
<%@ 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>
Still, the best solution seems to be loading the combo boxes as the selections are made.
Hope this helps, nevertheless!