JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

JavaScript

var store = Ext.create('Ext.data.Store', {
    fields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'count',
        type: 'int'
    }, {
        name: 'amount',
        type: 'string'
    }],
    data: [{
        name: 'All',
        count: 10,
        amount: '10,000.00'
    }, {
        name: 'Draft',
        count: 5,
        amount: '5,000.00'
    }, {
        name: 'Issued',
        count: 3,
        amount: '2,000.00'
    }, {
        name: 'Expired',
        count: 5,
        amount: '5,000.00'
    }]
});

var tpl = new Ext.XTemplate('<ul><tpl for="."><li class="">{name}</li></tpl></ul>'
/*['<ul><tpl for="."><li class="">',
                    '<a href="#" data-tab-id="title" class=" ">',
                        '<div class="x-tab-inner">',
                            '<span class="label">',
                                '<span class="title">{name}</span>',
                                '<span class="count">({count})</span>',
                            '</span>',          
                            '<span class="amount">{amount}</span>',
                        '</div>',
                    '</a>',
                '</li></tpl></ul>']*/
);

var view = Ext.create('Ext.view.View', {
    renderTo: Ext.getBody(),
    store: store,
    itemSelector: 'li',
    tpl: tpl
});

debugger;