Как я могу назначить другой идентификатор или класс для моего элемента списка? - PullRequest
Новая
       4

Как я могу назначить другой идентификатор или класс для моего элемента списка?

0 голосов
/ 02 апреля 2012

Во-первых, я прошу прощения за мой плохой английский.

Я пытаюсь создать список, в котором каждый элемент имеет свой идентификатор или класс, потому что я хочу контролировать, какие элементы отображаются (скрытые или видимые).

Может кто-нибудь помочь?

Буду благодарен!

1 Ответ

0 голосов
/ 02 апреля 2012 
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
});

с помощью приведенного выше кода вы можете добавлять пользовательские классы CSS к каждому элементу в представлении списка, просто укажите custom_class_ {uniqueid of model} для каждого узла, а затем вы можете получить к нему доступ с помощью Ext.DomQuery.select('div{class=contact custom_class_{firstName}}');, а затем пройти DOMчтобы получить родительский элемент, который вы можете использовать для скрытия элемента списка 

var div = Ext.DomQuery.select('div{class=contact custom_class_{firstName}}');
var listItem = div.up().up();
...