1. 21 Feb 2013 3:36 AM #1
    manishprajapati
    manishprajapati is offline
    Sencha User
    Join Date
    Oct 2011
    Posts
    27
    Vote Rating
    0
    manishprajapati is on a distinguished road
      0  

    Default Filtering in NestedList + TreeStore

    Filtering in NestedList + TreeStore


    Hi All,

    I need a help on urgent basis. Can anyone help me that how can we filter the data in NestedList?

    Here is my code:-

    Category.json
    Code:
    [{
    "text": "Cars",
    "children": [{
        "text": "Asia",
        "children": [{
            "text": "Japan",
            "children": [{
                "text": "Acura",
                "leaf": true
            },{
                "text": "Honda",
                "leaf": true
            },{
                "text": "Infiniti",
                "leaf": true
            },{
                "text": "Mitsubishi",
                "leaf": true
            },{
                "text": "Nissan",
                "leaf": true
            },{
                "text": "Scion",
                "leaf": true
            },{
                "text": "Subaru",
                "leaf": true
            },{
                "text": "Toyota",
                "leaf": true
            }]
        },{
            "text": "Korea",
            "children": [{
                "text": "Hyundai",
                "leaf": true
            },{
                "text": "Kia",
                "leaf": true
            }]
        }]
    },{
        "text": "United Kingdom",
        "children": [{
            "text": "Aston Martin",
            "leaf": true
        },{
            "text": "Bentley",
            "leaf": true
        },{
            "text": "TVR",
            "leaf": true
        },{
            "text": "Land Rover",
            "leaf": true
        }]
    },{
        "text": "Europe",
        "children": [{
            "text": "Germany",
            "children": [{
                "text": "Audi",
                "leaf": true
            },{
                "text": "BMW",
                "leaf": true
            },{
                "text": "Opel",
                "leaf": true
            },{
                "text": "Porsche",
                "leaf": true
            },{
                "text": "Volkswagen",
                "leaf": true
            }]
        },{
            "text": "France",
            "children": [{
                "text": "Citroën",
                "leaf": true
            },{
                "text": "Renault",
                "leaf": true
            },{
                "text": "Peugeot",
                "leaf": true
            }]
        }]
    },{
        "text": "United States",
        "children": [{
            "text": "Buick",
            "leaf": true
        },{
            "text": "Cadillac",
            "leaf": true
        },{
            "text": "Chevrolet",
            "leaf": true
        },{
            "text": "Chrysler",
            "leaf": true
        },{
            "text": "Ford",
            "leaf": true
        },{
            "text": "Jeep",
            "leaf": true
        },{
            "text": "Oldsmobile",
            "leaf": true
        },{
            "text": "Saturn",
            "leaf": true
        },{
            "text": "Tesla",
            "leaf": true
        }]
    }]
},
{
    "text": "Bus",
    "children": [{
        "text": "India",
        "children": [{
            "text": "A",
            "children": [{
                "text": "B",
                "leaf": true
            },{
                "text": "C",
                "leaf": true
            },{
                "text": "D",
                "leaf": true
            },{
                "text": "E",
                "leaf": true
            },{
                "text": "F",
                "leaf": true
            },{
                "text": "G",
                "leaf": true
            },{
                "text": "H",
                "leaf": true
            },{
                "text": "I",
                "leaf": true
            }]
        },{
            "text": "1111",
            "children": [{
                "text": "Hyundai",
                "leaf": true
            },{
                "text": "Kia",
                "leaf": true
            }]
        }]
    },{
        "text": "2222",
        "children": [{
            "text": "Aston Martin",
            "leaf": true
        },{
            "text": "Bentley",
            "leaf": true
        },{
            "text": "TVR",
            "leaf": true
        },{
            "text": "Land Rover",
            "leaf": true
        }]
    },{
        "text": "3333",
        "children": [{
            "text": "Germany",
            "children": [{
                "text": "Audi",
                "leaf": true
            },{
                "text": "BMW",
                "leaf": true
            },{
                "text": "Opel",
                "leaf": true
            },{
                "text": "Porsche",
                "leaf": true
            },{
                "text": "Volkswagen",
                "leaf": true
            }]
        },{
            "text": "France",
            "children": [{
                "text": "Citroën",
                "leaf": true
            },{
                "text": "Renault",
                "leaf": true
            },{
                "text": "Peugeot",
                "leaf": true
            }]
        }]
    },{
        "text": "4444",
        "children": [{
            "text": "Buick",
            "leaf": true
        }
        ]
    }]
}
]
    Model:Category.js
    Code:
    Ext.define('Sencha.model.Category', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{
            name: 'text',
            type: 'string'
}]
        }
    });
    Store: Categories.js
    Code:
    Ext.define('eLearing.store.Categories',
{
    extend: 'Ext.data.TreeStore',
    requires: 'eLearing.model.Category',
    config:
    {
        model: 'eLearing.model.Category',
        type: 'tree',
        proxy: {
            type: 'ajax',
            url: 'app/data/Category.json',
            reader: {
                type: 'json',
                root: 'children'
            }

        }
    }
}
    );
    app.js
    Code:
    var categoriesStore = Ext.getStore("Categories");
            categoriesStore.load();

            var nestedList = Ext.create('Ext.NestedList', {
                modal: true,
                hideOnMaskTap: true,
                width: '400px',
                height: '400px',
                store: categoriesStore,
                tpl: "<div>{text}</div>"
            });
            nestedList.add({
                docked: 'top',
                xtype: 'searchfield',
                height: 100,
                listeners: {
                    scope: this,
                    keyup: function(field) {

                        var value = field.getValue();

////// LOGIC WILL BE HERE.



                    }
                }



            });
       Ext.Viewport.add(nestedList);

    Thanks,
    Manish
    Reply With Quote Reply With Quote
  2. 23 Feb 2013 7:05 AM #2
    mitchellsimoens
    mitchellsimoens is offline
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    34,121
    Vote Rating
    453
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of
      0  

    Default


    The TreeStore doesn't really support filtering. Each child list of the nestedlist you can try and filter them.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is almost in print!

    When posting code, please use BBCode's CODE tags.
    Reply With Quote Reply With Quote
  3. 18 Apr 2013 2:44 AM #3
    ppurohit
    ppurohit is offline
    Sencha User
    Join Date
    Mar 2013
    Posts
    16
    Vote Rating
    0
    ppurohit is on a distinguished road
      0  

    Default My XML looks like this.. and I want to use it in nestedList... I Got Parent but not

    My XML looks like this.. and I want to use it in nestedList... I Got Parent but not


    <ns8:categoryHierarchy xmlns="http://www.deliverycube.com/mobilecube/rest/error" xmlns:ns2="http://www.deliverycube.com/mobilecube/rest/customer"xmlns:ns3="http://www.deliverycube.com/mobilecube/rest/payment" xmlns:ns4="http://www.deliverycube.com/mobilecube/rest/address"xmlns:ns5="http://www.deliverycube.com/mobilecube/rest/session" xmlns:ns6="http://www.deliverycube.com/mobilecube/rest/login"xmlns:ns7="http://www.deliverycube.com/mobilecube/rest/order" xmlns:ns8="http://www.deliverycube.com/mobilecube/rest/catalog"xmlns:ns9="http://www.deliverycube.com/mobilecube/rest/orderRequest" xmlns:ns10="http://www.deliverycube.com/mobilecube/rest/registration">
    <script id="tinyhippos-injected">
    if (window.top.ripple) { window.top.ripple("bootstrap").inject(window, document); }
    </script>


    <ns8:categoryHierarchyElement categoryId="topCatId1" displayName="Gift Ideas">
    <ns8:childCategories>
    <ns8:category id="subCatId11" displayName="For Him"/>
    <ns8:category id="subCatId12" displayName="For Her"/>
    <ns8:category id="subCatId13" displayName="Gift Certificates"/>

    </ns8:childCategories>



    </ns8:categoryHierarchyElement>


    <ns8:categoryHierarchyElement categoryId="topCatId2" displayName="Women's Apparel">
    <ns8:childCategories>
    <ns8:category id="subCatId21" displayName="Shirts"/>
    <ns8:category id="subCatId22" displayName="Pants"/>
    <ns8:category id="subCatId23" displayName="Dresses"/>
    <ns8:category id="subCatId24" displayName="Skirts"/>
    <ns8:category id="subCatId25" displayName="Shorts"/>
    <ns8:category id="subCatId26" displayName="Jackets"/>
    <ns8:category id="subCatId27" displayName="Accessories"/>

    </ns8:childCategories>



    </ns8:categoryHierarchyElement>


    <ns8:categoryHierarchyElement categoryId="topCatId3" displayName="Footwear">
    <ns8:childCategories>
    <ns8:category id="subCatId31" displayName="Women's Shoes"/>
    <ns8:category id="subCatId32" displayName="Men's Shoes"/>

    </ns8:childCategories>



    </ns8:categoryHierarchyElement>


    <ns8:categoryHierarchyElement categoryId="topCatId4" displayName="Home Store">
    <ns8:childCategories>
    <ns8:category id="subCatId41" displayName="Tables"/>
    <ns8:category id="subCatId42" displayName="Seating"/>
    <ns8:category id="subCatId43" displayName="Storage & Display"/>

    </ns8:childCategories>



    </ns8:categoryHierarchyElement>


    <ns8:categoryHierarchyElement categoryId="topCatId5" displayName="Bed & Bath">
    <ns8:childCategories>
    <ns8:category id="subCatId51" displayName="Towels and Linens"/>

    </ns8:childCategories>



    </ns8:categoryHierarchyElement>


    <ns8:categoryHierarchyElement categoryId="topCatId6" displayName="Home Accessories">
    <ns8:childCategories>
    <ns8:category id="subCatId61" displayName="Clocks"/>
    <ns8:category id="subCatId62" displayName="Radios"/>
    <ns8:category id="subCatId63" displayName="Cushions and Pillows"/>
    <ns8:category id="subCatId64" displayName="Glassware"/>
    <ns8:category id="subCatId65" displayName="Lamps and Lighting"/>
    <ns8:category id="subCatId66" displayName="Miscellaneous"/>

    </ns8:childCategories>



    </ns8:categoryHierarchyElement>



    </ns8:categoryHierarchy>


    My XML looks like this.. and I want to use it in nestedList... I Got Parent but not child... Why I don't know... Please Help....
    Reply With Quote Reply With Quote