Data views в Ext JS 6

Ext.view.View (xtype:dataview) используется для отображения данных через кастомный шаблон. Вам нужно предоставить кастомный шаблон и data store. data view предоставляет встроенные события: click, double-click, mouseover, mouseout.
Создадим сначала стор:
Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'age',
        type: 'int'
    }, {
        name: 'gender',
        type: 'int'
    }]
});

Ext.create('Ext.data.Store', {
    id: 'employees',
    model: 'Person',
    data: [{
        name: 'Mike',
        age: 22,
        gender: 0
    }, {
        name: 'Woo',
        age: 32,
        gender: 1
    }, {
        name: 'John',
        age: 33,
        gender: 1
    }, {
        name: 'Kalai',
        age: 25,
        gender: 0
    }]
});

Далее нужно создать шаблон. Для того чтобы забиндить поле из модели надо просто указать его имя в фигурных скобках. XTemplate поддерживает условный рендеринг.
var empTpl = new Ext.XTemplate(
 '<tpl for=".">',
 '<div style="margin-bottom: 10px;" class="data-view">',
 '<table style="width:100%">',
 '<tr>',
 '<td style="font-size: 100px;width:100px;" rowspan="3"><i
class="fa fa-user"></i></td>',
 '<td>Name: {name}</td>',
 '</tr>',
 '<tr>',
 '<td>Age:{age}</td>',
 '</tr>',
 '<tr>',
 '<td>Gender: <tpl if="gender == 1">',
 '<i class="fa fa-mars"></i>',
 '<tpl else>',
 '<i class="fa fa-venus"></i>',
 '</tpl>
 </td>',
 '</tr>',
 '</div>',
 '</tpl>'
);
В вышеприведенном коде использовался прикольный шрифт для того чтобы отрендерить иконку. Чтобы он заработал надо HTML файл добавить строку:
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/fontawesome/4.3.0/css/font-awesome.min.css">

Следующий код создает data view:
Ext.create('Ext.view.View', {
    store: Ext.getStore('employees'),

    tpl: empTpl,
    itemSelector: 'div.data-view',

    renderTo: Ext.getBody(),
    listeners: {
        itemclick: function(node, rec, item, index, e) {
            alert(rec.data.name);
        }
    }
});

itemSelector - это просто CSS-селектор. Он используется для того чтобы определить с какими узлами будет работать этот DataView. itemSelector используется для мапинга DOM-узлов на записи (records).


Теги: