Advanced Search

Return to Snippet

Revision: 58071
at June 23, 2012 06:45 by Winkyboy
Initial Code 
Ext.define("YourNamespace.view.YourViewHere", {
    extend: 'Ext.List',

    config: {
        id: 'YourViewHere',
        title: 'Your Title Here',
        scrollable: {
            direction: 'vertical'
        },
        store: 'YourStoreHere',
        emptyText: '<div class="listEmpty">You have nothing in this list</div>',
        deferEmptyText: false,

        // {type} and {content} below would be defined in your model
        itemTpl: '<div class="SomeClassItem AnIdentifierLikeClass{type}">' +
                '   <div class="noteContent">{content}</div>' +
                '</div>',

        listeners: {
            initialize: function() {
                var store = this.getStore();
                store.addListener("refresh", function() {
                    this.refresh();
                }, this);
            },

            activate: function() {
                // hide items in your list based on a class ('SomeNewClassToAdd' would have display:none)
                var listItems = Ext.Element.select('#YourViewHere .x-list-item');
                for (var intI = 0; intI < listItems.elements.length; intI++) {
                    if (listItems.elements[intI].innerHTML.indexOf('AnIdentifierLikeClass3') > 0) {
                        Ext.get(listItems.elements[intI].id).addCls('SomeNewClassToAdd');
                    }
                }
            }
        }

    }
});
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
Although I realize one should be able to filter a store to remove unwanted items in the list, this allows the list items through and just hides them via CSS.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Hide Sencha Touch list items dynamically via CSS

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
list

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript