JSFiddle - React, Tailwind, and code Playground

by Rambabu Pudi

HTML

<script src="http://dev.sencha.com/extjs/5.0.0/ext-all-debug.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/extjs/5.0.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css">
<div id="panel"></div>

CSS

.custom-row-disabled .x-grid-cell {
    color: #999;
}

JavaScript

Ext.define('DataObject', {
    extend: 'Ext.data.Model',
    fields: ['name']
});

Ext.onReady(function(){

    var measureData = [
        { name : "AVG COST"},
        { name : "AVGSELLINGPRICE"},
        { name : "BUDGETCOSTPLAN", draggable:false}
    ];
	
	var productData = [
        { name : "SBU"},
        { name : "FAMILY"},
        { name : "SUBFAMILY"}
    ];

    // create the data store
    var measureGridStore = Ext.create('Ext.data.Store', {
        model: 'DataObject',
        data: measureData
    });
	
	// create the data store
    var productGridStore = Ext.create('Ext.data.Store', {
        model: 'DataObject',
        data: productData
    });


    // Column Model shortcut array
    var columns = [
        {text: "Measure Name", flex: 1, sortable: true, dataIndex: 'name'}
    ];

    // declare the source Grid
    var measureGrid = Ext.create('Ext.grid.Panel', {
    	hideHeaders:true,
      rowLines: false,
      viewConfig: {
            copy : true,
            stripeRows: false,
            plugins: {
                ptype: 'gridviewdragdrop',
                dragGroup: 'measureDDGroup',
                dropGroup: 'secondGridDDGroup',
                dragZone: {
                         onBeforeDrag: function(data, e) {
                        	// return ($(data.item).find('tbody tr:first').hasClass('row-disabled')) ? false: true;
                         }
                     },
            },
             getRowClass: function(record, index, rowParams, store) {
	            	 return record.get("disabled") ? "custom-row-disabled" : "";
	             },
            listeners: {
                drop: function(node, data, dropRec, dropPosition) {
                   
                }
            }
        },
        store            : measureGridStore,
        columns          : columns,
        stripeRows       : true,
        title            : 'Measures',
        margins          : '0 2 0 0',
        id: 'measuresDragGrid',
	        ...