JSFiddle - React, Tailwind, and code Playground
by luisvsilva
HTML
<script src="http://dev.sencha.com/deploy/touch/sencha-touch.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css">
JavaScript
Ext.regApplication({
name: 'app',
launch: function() {
this.mainLaunch();
},
mainLaunch: function() {
this.views.viewport = new this.views.Viewport();
}
});
app.views.Viewport = Ext.extend(Ext.Panel, {
id:'pnlViewPort',
fullscreen: true,
layout:'fit',
initComponent: function() {
app.views.Viewport.superclass.initComponent.apply(this, arguments);
var list = new Ext.List({
itemTpl : '{label}',
store: app.stores.categories
});
this.add(list);
this.doLayout();
}
});
var dataCategories = {
categories:[
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"},
{ label:"Painting"}
]
}
app.models.Category = Ext.regModel("app.models.Category", {
fields: [
{name: "id", type: "int"},
{name: "name", type: "string"},
{name: "label", type: "string"}
]
});
app.stores.categories = new Ext.data.Store({
model: "app.models.Category",
sorters:'id',
data:dataCategories,
proxy:{
type:'memory',
reader:{
type:'json',
...