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.


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.