JSFiddle - React, Tailwind, and code Playground

by amitaviv99

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext-4.0.7-gpl/resources/css/ext-all.css">
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/ext-all.js"></script>

JavaScript

Ext.onReady(function(){
    
//this is the model we will be using in the store
Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id',    type: 'int'},
        {name: 'name',  type: 'string'},
        {name: 'phone', type: 'string', mapping: 'phoneNumber'}
    ]
});

//this data does not line up to our model fields - the phone field is called phoneNumber
var data = {
    users: [
        {
            id: 1,
            name: 'Ed Spencer',
            phoneNumber: '555 1234'
        },
        {
            id: 2,
            name: 'Abe Elias',
            phoneNumber: '666 1234'
        }
    ]
};

//note how we set the 'root' in the reader to match the data structure above
var store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    model: 'User',
    data : data,
    proxy: {
        type: 'memory',
        //data : data,
        reader: {
            type: 'json',
            root: 'users'
        }
    }
});
    console.log(store.getCount());
});