Posted By

Winkyboy on 06/23/12


Tagged

list extjs Sencha


Versions (?)

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.

  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  

You need to login to post a comment.