JSFiddle - React, Tailwind, and code Playground

by el_chief

HTML

<link rel="stylesheet" type="text/css" href="//extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all-gray.css" />

JavaScript

Ext.define('MyApp.view.ui.MyGridPanel', {
    extend: 'Ext.grid.Panel',
    renderTo:Ext.getBody(),

    height: 316,
    width: 536,
    collapsible: true,
    title: 'Documents',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            store:[
                {},{},{}
            ],
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'string',
                    text: 'Category'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'string',
                    text: 'Document Title'
                },
                {
                    xtype: 'numbercolumn',
                    dataIndex: 'number',
                    text: 'File Sharing'
                },
                {
                    xtype: 'datecolumn',
                    dataIndex: 'date',
                    text: 'Date'
                },
                {
                    xtype: 'actioncolumn',
                    items: [
                        {
                            icon: 'http://deepweb.libraryforce.com:8080/upm/images/info.png'
                        },
                        {
                            icon: 'http://www.freshdex.com/images/icon_edit.gif'
                        }
                    ]
                }
            ],
            viewConfig: {

            },
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    items: [
                        {
                            xtype: 'tbfill'
                        },
                        {
                            xtype: 'textfield',
                            emptyText: 'Search documents...'
                        },
                        {
                            xtype: 'button',
                            text: '+',
                            menu: {
    ...