How can I allocate different ID or class to my list item? - sencha-touch

Question

First, I apologize for my poor English.
I am trying to build a list where each item has a different ID or class, because I want to control which items are displayed (hidden or visible).
Can anyone help?
I will be grateful!

Answer 1

Ext.define('Contact', {
extend: 'Ext.data.Model',
config: {
fields: ['firstName', 'lastName']
}
});
var store = Ext.create('Ext.data.Store', {
model: 'Contact',
sorters: 'lastName',
data: [
{ firstName: 'Tommy', lastName: 'Maintz' },
{ firstName: 'Rob', lastName: 'Dougan' },
{ firstName: 'Ed', lastName: 'Spencer' },
{ firstName: 'Jamie', lastName: 'Avins' },
{ firstName: 'Aaron', lastName: 'Conran' },
{ firstName: 'Dave', lastName: 'Kaneda' },
{ firstName: 'Jacky', lastName: 'Nguyen' },
{ firstName: 'Abraham', lastName: 'Elias' },
{ firstName: 'Jay', lastName: 'Robinson'},
{ firstName: 'Nigel', lastName: 'White' },
{ firstName: 'Don', lastName: 'Griffin' },
{ firstName: 'Nico', lastName: 'Ferrero' },
{ firstName: 'Nicolas', lastName: 'Belmonte'},
{ firstName: 'Jason', lastName: 'Johnston'}
]
});
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '<div class="contact custom_class_{firstName}">{firstName} <strong>{lastName}</strong></div>',
store: store
});
by using above code you can add custom css classes to every item in list view, just specify custom_class_{uniqueid of model} for every node and then you can access it using Ext.DomQuery.select('div{class=contact custom_class_{firstName}}'); and then you traverse the DOM to get the parent element which you can use it to hide list item
var div = Ext.DomQuery.select('div{class=contact custom_class_{firstName}}');
var listItem = div.up().up();