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>' +

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

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


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

Initial Language