JSFiddle - React, Tailwind, and code Playground

by vero4ka

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.0/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.0.0/ext-all-debug.js"></script>
<div id="container"></div>

CSS

.search-item {
            padding: 5px 10px;
            white-space: normal;
            color: #555;
        }

        .search-item h3 {
            display: block;
            font: inherit;
            font-weight: bold;
            color: #222;
        }

        .search-item h3 span {
            float: right;
            font-weight: normal;
            margin:0 0 5px 5px;
            width: 100px;
            clear: none;
        }

        html, body {
            border: 0;
        }

JavaScript

Ext.onReady(function(){
    Ext.define("Post", {
        extend: 'Ext.data.Model',
        proxy: {
            type: 'jsonp',
            url : 'http://www.sencha.com/forum/topics-remote.php',
            reader: {
                type: 'json',
                root: 'topics',
                totalProperty: 'totalCount'
            }
        },

        fields: [
            {name: 'id', mapping: 'post_id'},
            {name: 'title', mapping: 'topic_title'},
            {name: 'topicId', mapping: 'topic_id'},
            {name: 'author', mapping: 'author'},
            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'timestamp'},
            {name: 'excerpt', mapping: 'post_text'}
        ]
    });

    var ds = Ext.create('Ext.data.Store', {
        pageSize: 10,
        model: 'Post'
    });


    var panel = Ext.create('Ext.panel.Panel', {
        renderTo: 'container',
        title: 'Search the Ext Forums',
        width: 300,
        bodyPadding: 10,
        layout: 'anchor',
        
        items: [{
            xtype: 'combo',
            store: ds,
            displayField: 'title',
            typeAhead: false,
            hideLabel: true,
            anchor: '100%',
            
            displayTpl: Ext.create('Ext.XTemplate', [ 
                '<tpl for=".">',
                '<img src="http://phpbb3.pl/adm/images/icon_edit.gif" /><sup>2</sup>',
                '{[typeof values === "string" ? values : values["title"]]}',
                '</tpl>'
            ]),
            
            listConfig: {
                loadingText: 'Searching...',
                emptyText: 'No matching posts found.',

                // Custom rendering template for each item
                getInnerTpl: function() {
                    return '<div class="search-item">' +
                        '<h3><img src="http://phpbb3.pl/adm/images/icon_edit.gif" /><sup>2</sup><span>{[Ext.Date.format(values.lastPost, "M j, Y")]}<br />by...