Advanced Search

Hide Sencha Touch list items dynamically via CSS

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. Ext.define("YourNamespace.view.YourViewHere", {
  2.     extend: 'Ext.List',
  3.  
  4.     config: {
  5.         id: 'YourViewHere',
  6.         title: 'Your Title Here',
  7.         scrollable: {
  8.             direction: 'vertical'
  9.         },
  10.         store: 'YourStoreHere',
  11.         emptyText: '<div class="listEmpty">You have nothing in this list</div>',
  12.         deferEmptyText: false,
  13.  
  14.         // {type} and {content} below would be defined in your model
  15.         itemTpl: '<div class="SomeClassItem AnIdentifierLikeClass{type}">' +
  16.                 '   <div class="noteContent">{content}</div>' +
  17.                 '</div>',
  18.  
  19.         listeners: {
  20.             initialize: function() {
  21.                 var store = this.getStore();
  22.                 store.addListener("refresh", function() {
  23.                     this.refresh();
  24.                 }, this);
  25.             },
  26.  
  27.             activate: function() {
  28.                 // hide items in your list based on a class ('SomeNewClassToAdd' would have display:none)
  29.                 var listItems = Ext.Element.select('#YourViewHere .x-list-item');
  30.                 for (var intI = 0; intI < listItems.elements.length; intI++) {
  31.                     if (listItems.elements[intI].innerHTML.indexOf('AnIdentifierLikeClass3') > 0) {
  32.                         Ext.get(listItems.elements[intI].id).addCls('SomeNewClassToAdd');
  33.                     }
  34.                 }
  35.             }
  36.         }
  37.  
  38.     }
  39. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.