JSFiddle - React, Tailwind, and code Playground

by chaoszcat

HTML

<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-0/extjs/resources/css/ext-all.css">

JavaScript

Ext.define('Workshop.store.YearsStore', {
    extend: 'Ext.data.Store',
    fields: ['id', 'type'],
    startYear: 1972,
    endYear: (new Date()).getFullYear(),
    constructor: function(cfg) {
        var me = this;
        
        //We init the configurations first (to copy startYear and endYear)
        Ext.apply(me, cfg || {});
        
        me.data = [];
        //Then we push data
        for(var n = me.startYear ; n <= me.endYear ; n++) {
            me.data.push({id: n, type: n});
        }
        
        //Then finally we callparent to init this store.
        me.callParent([cfg]);
    }
});

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: 'The Custom Year Store Demo',
    style: 'margin: 10px;',
    bodyStyle: 'padding: 10px;',
    defaults: {
        xtype: 'combo',
        valueField: 'id',
        displayField: 'type',
        triggerAction: 'all'
    },
    items: [{
        store: Ext.create('Workshop.store.YearsStore'),
        fieldLabel: 'No config'
    },{
        store: Ext.create('Workshop.store.YearsStore', {
            startYear: 2000
        }),
        fieldLabel: '2000 - default'
    },{
        store: Ext.create('Workshop.store.YearsStore', {
            startYear: 2005,
            endYear: 2008
        }),
        fieldLabel: '2005 - 2008'
    }]
});