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

//Defining the view
Ext.define('Blog.view.Users', {
    extend: 'Ext.window.Window',
    title: 'My Users',
    width: 400,
    height: 250,
    layout: 'border',
    border: false,
    items: [Ext.create('Ext.grid.Panel', {
        region: 'north',
        height: 150,
        store: Ext.create('Ext.data.Store', {
            fields: ['id', 'name', 'country'],
            data: [
                {id:1,name:'A',country:'Australia'},
                {id:2,name:'B',country:'Brunei'},
                {id:3,name:'C',country:'China'}
            ]
        }),
        columns: [
            {header: 'ID', dataIndex: 'id'},
            {header: 'Name', dataIndex: 'name'},
            {header: 'Country', dataIndex: 'country', flex:1}
        ]
    }), {
        region: 'center',
        html: 'Pick an item',
        bodyStyle: 'padding: 10px;'
    }]
});

Ext.define('Blog.controller.Users', {
    extend: 'Ext.app.Controller',
    
    init: function() {
        
        //Create your view
        Ext.create('Blog.view.Users', {
            id: 'the-user-view'
        }).show();
        
        this.control({
            '#the-user-view gridpanel': {
                selectionchange: this.onSelectionChange
            }
        });
    },

    onSelectionChange: function(sel) {
        var me = this,
            tpl = new Ext.Template('<p>Name: {name}</p><p>Country: {country}</p>'),
            rec = sel.getSelection()[0];
        
        Ext.getCmp('the-user-view').items.get(1).update(tpl.apply(rec.data));
    }
});

Ext.application({
    name: 'Blog',
    models: ['User'],
    controllers: ['Users'],

    launch: function() {
        Ext.create('Blog.controller.Users');
    }
});