JSFiddle - React, Tailwind, and code Playground

by brian428

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<script src="http://cdn.sencha.com/ext/gpl/4.2.0/ext-all-dev.js"></script>

CoffeeScript

Ext.Loader.setConfig enabled: true
Ext.Loader.setPath "Ext.ux", "../ux/"
Ext.require ["Ext.grid.*", "Ext.data.*", "Ext.util.*", "Ext.grid.plugin.BufferedRenderer"]
Ext.define "Employee",
  extend: "Ext.data.Model"
  fields: [
    name: "rating"
    type: "int"
  ,
    name: "salary"
    type: "float"
  ,
    name: "name"
  ]

Ext.onReady ->
  
  ###
  Returns an array of fake data
  @param {Number} count The number of fake rows to create data for
  @return {Array} The fake record data, suitable for usage with an ArrayReader
  ###
  createFakeData = (count) ->
    firstNames = ["Ed", "Tommy", "Aaron", "Abe", "Jamie", "Adam", "Dave", "David", "Jay", "Nicolas", "Nige"]
    lastNames = ["Spencer", "Maintz", "Conran", "Elias", "Avins", "Mishcon", "Kaneda", "Davis", "Robinson", "Ferrero", "White"]
    ratings = [1, 2, 3, 4, 5]
    salaries = [100, 400, 900, 1500, 1000000]
    data = []
    i = 0

    while i < (count or 25)
      ratingId = Math.floor(Math.random() * ratings.length)
      salaryId = Math.floor(Math.random() * salaries.length)
      firstNameId = Math.floor(Math.random() * firstNames.length)
      lastNameId = Math.floor(Math.random() * lastNames.length)
      rating = ratings[ratingId]
      salary = salaries[salaryId]
      name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId])
      data.push
        id: "rec-" + i
        rating: rating
        salary: salary
        name: name

      i++
    data
  
  # Create the Data Store.
  # Because it is buffered, the automatic load will be directed
  # through the prefetch mechanism, and be read through the page cache
  store = Ext.create("Ext.data.Store",
    id: "store"
    data: createFakeData(5000)
    model: "Employee"
    proxy:
      type: "memory"
  )

  Ext.define("MyLockedBufferedGrid",
    extend: "Ext.grid.Panel"
        
    width: 500
    height: 300
    header: false
    renderTo: Ext.getBody()
    dockedItems: []
    plugins:
      ptype: "bufferedrenderer"
      ...