Posted By

Winkyboy on 06/23/12

Tagged

list

Versions (?)

Last Edited at 06/23/12 06:45am

Statistics

Viewed 1111 times

Favorited by 0 user(s)

Related snippets

Hide Sencha Touch list items dynamically via CSS

/ Published in: JavaScript

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.

Highlighted TextExpand

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');
                    }
                }
            }
        }

}
});

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.