JSFiddle - React, Tailwind, and code Playground

by eternasparta

HTML

<html>
<head>
    <title>VCC</title>

    
	<script type="text/javascript" src="http://docs.sencha.com/extjs/4.1.3/extjs/ext-all.js"></script>
  </head>
  <body/>
</html>

CSS

html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%}q:before,q:after{content:""}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}*:focus{outline:none}.x-border-box,.x-border-box *{box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box}.x-body{color:#000;font-size:13px;font-family:"lucida grande",tahoma,verdana,arial,sans-serif}.x-rtl{direction:rtl}.x-ltr{direction:ltr}.x-clear{overflow:hidden;clear:both;font-size:0;line-height:0;display:table}.x-strict .x-ie7 .x-clear{height:0;width:0}.x-layer{position:absolute !important;overflow:hidden;zoom:1}.x-shim{position:absolute;left:0;top:0;overflow:hidden;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0}.x-hide-display{display:none !important}.x-hide-visibility{visibility:hidden !important}.x-item-disabled .x-form-item-label,.x-item-disabled .x-form-field,.x-item-disabled .x-form-cb-label,.x-item-disabled .x-form-trigger{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);opacity:0.3}.x-ie6 .x-item-disabled{filter:none}.x-hidden,.x-hide-offsets{display:block !important;visibility:hidden !important;position:absolute !important;left:-10000px !important;top:-10000px !important}.x-hide-nosize{height:0 !important;width:0 !important}.x-masked-relative{position:relative}.x-ie6 .x-masked select,.x-ie6.x-body-masked select{visibility:hidden !important}.x-css-shadow{position:absolute;-webkit-border-radius:5px 5px;-moz-border-radius:5px 5px;-ms-border-radius:5px 5px;-o-border-radius:5px 5px;border-radius:5px...

JavaScript

Ext.require([    
    'Ext.form.*',
    'Ext.tip.*'
]);


Ext.onReady(function() {    
    
    
    Ext.QuickTips.init();
 
    Ext.create('Ext.panel.Panel',{
    renderTo: Ext.getBody(),
    height:400,
        width:400,
        id:'specific_panel_id'
    });
    
dynamicPanel = new Ext.Component({
           loader: {
               /*load contents from this url*/
              url: 'http://it.wikipedia.org/wiki/Robot',
              renderer: 'html',
              autoLoad: true,
              scripts: true
              }
           });

Ext.getCmp('specific_panel_id').add(dynamicPanel);
   
});