JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

var treestore = Ext.data.TreeStore({
			root: {
				text: 'Län',
				expanded: true,
				children:[{
					"text": "Sverige",
					"children": [{
							"text": "Stockholm",
							"leaf": true
						},{
							"text": "Gävleborg",
							"leaf": true
						},{
							"text": "Västernorrland",
							"leaf": true
						}
					],
					"leaf": false
				}]
			},
			sorters:[{
				property: 'text',
				direction: 'ASC'
			}]	
		});                        
var panelTree = Ext.panel.Panel({    
        width: 500,
        height: 500,
        title: 'Border Layout',
        layout: 'border',   
        items: [{
            title: 'Län',
            region: 'west',
            xtype: 'treepanel',
            store: treestore,
            margins: '5 5 5 5',
            width: 200,
            height: 200,
            collapsible: true,
            // make collapsible
            id: 'provincediv',
            layout: {
                type: 'hbox'
            },
            rootVisible: false,
            listeners: {
				itemClick: function(view, record, item, index, e ){
                    var txt = record.get('text');
				    Ext.getCmp('resultdiv').update(txt);
                    //alert('simon says: '+txt);
                    
                   
                }
            }
        }, {
            title: 'Resultat',
            region: 'center',
            // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            id: 'resultdiv',
            margins: '5 5 5 0'
        }]
});

Ext.create("Ext.panel.Panel", {
    renderTo: Ext.getBody(),
    items: [
            panelTree
    ]
});