PDA

View Full Version : [CLOSED] Filtering a store with a ModelField of Type Object



csfesta
Nov 15, 2013, 3:51 PM
I have a DataView that I want to apply a filter on. The Filter has a store that has two ModelFields, one is a string which I can filter by easily the other is of type object that I cannot figure out how to apply a filter on. How do I access the properties of an Object to apply a filter?

This will work because the filter property is a string type

<ext:TextField runat="server" FieldLabel="Filter" Width="250" LabelAlign="Right" LabelWidth="35">
<Listeners>
<Change Handler="var dataview = Ext.getCmp('AppDataView'), store = dataview.store;
store.suspendEvents();
store.clearFilter();
dataview.getSelectionModel().clearSelections();
store.resumeEvents();
store.filter({
property: 'Letter',
anyMatch: true,
value: newValue
});" Buffer="50" />
</Listeners>
</ext:TextField>

This will not work becuse the property is of type object

<ext:TextField runat="server" FieldLabel="Filter" Width="250" LabelAlign="Right" LabelWidth="35">
<Listeners>
<Change Handler="var dataview = Ext.getCmp('AppDataView'), store = dataview.store;
store.suspendEvents();
store.clearFilter();
dataview.getSelectionModel().clearSelections();
store.resumeEvents();
store.filter({
property: 'Applications[ApplicationName]',
anyMatch: true,
value: newValue
});" Buffer="50" />
</Listeners>
</ext:TextField>



Full Code


<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Print" Icon="Printer" OnClientClick="window.print();" />
<ext:TextField runat="server" FieldLabel="Filter" Width="250" LabelAlign="Right" LabelWidth="35">
<Listeners>
<Change Handler="var dataview = Ext.getCmp('AppDataView'), store = dataview.store;
store.suspendEvents();
store.clearFilter();
dataview.getSelectionModel().clearSelections();
store.resumeEvents();
store.filter({
property: 'Applications[ApplicationName]',
anyMatch: true,
value: newValue
});" Buffer="50" />
</Listeners>
</ext:TextField>
</Items>
</ext:Toolbar>



<form id="form1" runat="server">
<div>
<ext:DataView runat="server" DisableSelection="true" ItemSelector="td.letter-row" EmptyText="" ID="AppDataView">
<Store>
<ext:Store ID="Tier1Applications" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Letter" />
<ext:ModelField Name="Applications" Type="Object" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl ID="Template1" runat="server">
<Html>
<div id="applications-am">
<div class="header">
<p>Asset Management Applications</p>
</div>
<table>
<tr>
<th style="width:40%">Application Name</th>
<th style="width:20%">Acronym</th>
<th style="width:20%">Line of Business</th>
<th style="width:20%">Contact</th>
</tr>
<tpl for=".">
<tr>
<td class="letter-row" colspan="4">
<div><h2 class="letter-selector">{Letter}</h2></div>
<tpl for="Applications">
<table>
<tr class="applicaiton-record">
<td class="application-name" appName="{ApplicationName}" appAcronym="{ApplicationAcronym}" appLob="{ApplicationLob}" appContact="{ApplicationContact}" appEmail="{ApplicationEmail}" appDoc="{ApplicationDocUrl}" style="width:40%">{ApplicationName}</td>
<td style="width:20%">&nbsp;{ApplicationAcronym}</td>
<td style="width:20%">&nbsp;{ApplicationLob}</td>
<td style="width:20%">&nbsp;{ApplicationContact}</td>
</tr>
</table>
</tpl>
</td>
</tr>
</tpl>
</table>
</div>
</Html>
</Tpl>
<Listeners>
<ItemClick Fn="itemClick" />
<Refresh Handler="this.el.select('tr.applicaiton-record').addClsOnOver('cust-name-over');" Delay="100" />
</Listeners>
</ext:DataView>
</div>
</form>

Baidaly
Nov 15, 2013, 5:09 PM
Hello!

Try to use Ext.util.Filter: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.util.Filter

You have to define a function, which will filter your records.

csfesta
Nov 15, 2013, 5:16 PM
Yes I know I have to create a function, that is what I am doing.

The question is how do I pass in an object of an object into the Property.

The Object is
Property = Letter, Type = String
Property = Application, Type = Object

how do you access the property of the Application object in the filter function?

Baidaly
Nov 15, 2013, 8:20 PM

csfesta
Nov 16, 2013, 4:12 AM
Still confused on how I can do this. My data model is exactly like the example:
http://examples2.ext.net/#/DataView/Advanced/Report/

In that example I would be filtering on the Address. I do not see how I can accomplish this.

I've gotten as far as limiting it to the Letter as long as the filter is contained in the letters object but it keeps the remaining objects.

So for example if I run my filterBy function and filtered on Address of A2, it would return all of the address' in A. The result I am looking for is to have A with only Address of A2




var filterTxt = function(record) {
var apps = record.get('Applications');
var newValue = Ext.getCmp('FilterTxtField').getValue() || "";

for(var p in apps)
{
if(apps[p].ApplicationName.toLowerCase().indexOf(newValue.to LowerCase()) > -1) {
return true;
}
else {

}
}

return false;
}

Daniil
Nov 18, 2013, 5:40 AM
Hi everybody,

I am afraid there is no built-in possibility to achieve such kind of filtration.

I am thinking about this approach.

var fullData = App.dsReport.getRecordsValues({
excludeId: true
}),
filteredData = [],
i, j,
len1, len2,
rec,
cs,
condition = "Address of A2";

//window.fullData = fullData; - save the initial data somewhere to restore easily

for (i = 0, len1 = fullData.length; i < len1; i++) {
rec = fullData[i];
cs = rec.Customers;

delete rec.Customers;
for (j = 0, len2 = cs.length; j < len2; j++) {
if (cs[j].Address === condition) {
if (filteredData.length <= i) {
filteredData.push(rec);
rec.Customers = [];
}

rec.Customers.push(cs[j]);
}
}
}

App.dsReport.loadData(filteredData);