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.*'
]);

var store = Ext.create('Ext.data.Store', {
    fields:['label'],
    data:[]
});
Ext.define('AM.view.editpanel.CustomList', {
			extend : 'Ext.container.Container',
			alias : 'widget.sclist',
				layout : {
					type : 'vbox',
					align : 'stretch'

				},
				items : [{
							xtype : 'grid',						
							plugins:[],
							selModel : {
								selType : 'cellmodel'
							},
							tbar: [{
								text:'Add',
								actionId:'add',
								handler: function(th, e, eArg) {
				                    var store = th.up('grid').store;
									var r = Ext.create(store.model.modelName
				               );
				               store.insert(0, r);
				               
				                }
							}],
							height	:200,
							store:store,
							columns: [
							          { text: 'Name',  dataIndex: 'label', flex: 1
							        	  , editor: {
							        	  xtype: 'numberfield',
							                allowBlank: false
							            }
							          },
							          {
											xtype: 'actioncolumn',
											width:30,
											sortable: false,
											
											actionId:'delete',
											header:'delete',
											items: [{
												tooltip:'tool'
							               	 
											}]
							          }
							      ],
							flex : 1
						}],
				flex : 1,
			initComponent:function(){
				this.items[0].plugins.push(Ext.create('Ext.grid.plugin.CellEditing', {
				    clicksToEdit: 2
				}));
				
				
				this.callParent(arguments);
				
				var sto = Ext.create('Ext.data.Store', {
				    fields:['label'],
				    data:[]
				});
				this.down('grid').bindStore(sto);
				this.down('grid').columns[0].text='Name';
				this.down('grid').columns[0].dataIndex='label';
			}
		});
    


Ext.onReady(function() {    
    
    
    Ext.QuickTips.init();
 
    var grid1 = Ext.create('AM.view.editpanel.CustomList',{
    renderTo: Ext.getBody()
    });
    var grid2 =...