grid example
HTML
<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
JavaScript
Ext.onReady(function () {
//to be able to use the ajax simulator
Ext.Loader.setConfig({
disableCaching: false,
enabled: true,
paths: {
'Ext.ux': 'http://cdn.sencha.io/ext-4.2.0-gpl/examples/ux'
}
});
//just a model
Ext.define('Ceres.model.Folder', {
extend: 'Ext.data.Model',
fields: [{
name: 'id'
}, {
name: 'name'
}, {
name: 'type'
}]
});
//just a store
Ext.define('Ceres.store.FolderList', {
extend: 'Ext.data.Store',
requires: ['Ceres.model.Folder'],
constructor: function (cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.merge({
model: 'Ceres.model.Folder',
proxy: {
type: 'ajax',
api: {
read: "http://localhost/mockdata.php"
},
reader: {
type: 'json',
data: 'data',
messageProperty: 'message'
}
}
},
cfg)]);
}
});
//2 store instances
var storeA = Ext.create('Ceres.store.FolderList'),
storeB = Ext.create('Ceres.store.FolderList');
//view definition
Ext.define('Ceres.view.FolderList', {
extend: 'Ext.window.Window',
alias: 'widget.folderlist',
requires: ['Ceres.store.FolderList'],
height: 800,
width: 600,
layout: {
type: 'fit'
},
modal: true,
closeAction: 'hide',
enableLocking: true, //locking enabled!
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'grid',
store: storeA,
columns: [
{
...