What's New?

[CLOSED] Filtering a store with a ModelField of Type Object

  1. #1
    Nov 15, 2013, 2:51 PM

    [CLOSED] Filtering a store with a ModelField of Type Object

    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>
    Last edited by Daniil; Nov 22, 2013 at 4:08 AM. Reason: [CLOSED]
  2. #2
    Nov 15, 2013, 4:09 PM
    Hello!

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

    You have to define a function, which will filter your records.
  3. #3
    Nov 15, 2013, 4: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?
  4. #4
    Nov 15, 2013, 7:20 PM
  5. #5
    Nov 16, 2013, 3:12 AM
    Still confused on how I can do this. My data model is exactly like the example:
    https://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.toLowerCase()) > -1) {
                        return true;
                    }
                    else {
                        
                    }
                }

                return false;
            }
  6. #6
    Nov 18, 2013, 4: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);

Similar Threads

  1. [CLOSED] ComboBox Value causes Cannot create an object of type 'System.Object' from its string representation '60''
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Oct 15, 2013, 11:35 AM
  2. Cannot deserialize the current JSON object (e.g. {"name":"value"}) into type 'Ext.Net.SelectedRowCollection' because the type re
    By lasantha in forum 1.x Help
    Replies: 1
    Last Post: Sep 11, 2013, 5:39 PM
  3. [CLOSED] Ext.Net.ModelFieldCollection must have items of type 'Ext.Net.ModelField', not 'Ext.Net.FieldContainer
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 17, 2012, 1:44 PM
  4. [CLOSED] TargetException: Object does not match target type - error with store
    By GLD in forum 1.x Legacy Premium Help
    Replies: 12
    Last Post: May 17, 2011, 7:08 AM
  5. Filtering data befor a Combobox is loaded from a Store Object
    By egodoy in forum 1.x Help
    Replies: 1
    Last Post: May 18, 2009, 1:41 PM

Posting Permissions