JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css">
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-classic/build/ext-theme-classic.js"></script>
JavaScript
Ext.onReady(function() {
var Viewport = Ext.create("Ext.container.Viewport", {
id: "Viewport",
layout: "border",
style: 'background: #fff; text-align:left;',
frame: true,
items: [
{
xtype: "toolbar",
height: 35,
region: "north",
frame: true,
},
{
xtype: "toolbar",
height: 28,
region: 'south',
html: "<center>ExtJs 5.1</center>",
},
{
xtype: "panel",
height: 500,
region: "west",
split: true,
collapsible: true,
autoScroll: true,
layout: 'accordion',
items: [{ xtype: "panel", title: "Панель №1" }, { xtype: "panel", title: "Панель №2" }, { xtype: "panel", title: "Панель №3" }]
},
{
xtype: "panel",
id: "center_panel",
region: 'center',
autoScroll: true,
}
]
});
var win = Ext.widget("window", {
title: "Window №1",
width: 350, height: 250,
maximizable: true,
resizable: true,
border: false,
layout: "border",
//constrainHeader: true,
//constrain: true,
x: 0, y: 0,
renderTo: Ext.getCmp("center_panel").body,
});
//Ext.getCmp("viewcontainercentral").add(win);
win.show();
win.on('move', function (win, x, y) {
if (y < 0 || x < 0) {
win.setPosition(x < 0 ? 0 : x, y < 0 ? 0 : y);
}
});
});