JSFiddle - React, Tailwind, and code Playground

by Serghei Cebotari

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-h5.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdn.sencha.com/ext/commercial/7.5.1/build/ext-modern-all-debug.js"></script>
<link rel="stylesheet" href="https://cdn.sencha.com/ext/commercial/7.5.1/build/modern/theme-triton/resources/theme-triton-all-debug.css">

CSS

.grid-stack {
  background: lightgoldenrodyellow;
}

.grid-stack-item-content {
  color: #2c3e50;
  text-align: center;
  background-color: #18bc9c;
}

JavaScript

Ext.application({
  name: 'App',
  launch: function() {
    const win = Ext.create('Ext.Dialog', {
      title: 'MyDialog',
      scrollable: true,
      width: 300,
      height: 300,
      layout: 'fit',
      items: {
        xtype: 'component',
        listeners: {
          painted: {
            delay: 500,
            fn() {
              this.element.addCls('grid-stack');
              win.gridstack = GridStack.init({
                column: 3,
                cellHeight: '200px',
                animate: false,
                resizable: {
                  handles: 'all',
                },
                draggable: {
                  scroll: true,
                },
              });
            }
          }
        },
      },
      bbar: [{
        text: 'Add widget',
        handler() {
          win.gridstack.addWidget({
            x: 0,
            y: 0,
            w: 5,
            h: 3
          });
        }
      }]
    }).show();
  }
});