Code:
var generateData = function (count) {
var totalRecords = [], i;
for (i=0; i < count; i++) {
totalRecords[i] = {
name: 'name',
description: 'description'
};
};
return { data: totalRecords };
};
Ext.define('MyApp.model.SomeModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'description',
type: 'string'
}, 'id']
});
Ext.define("MyApp.store.SomeStore", {
extend: 'Ext.data.Store',
model: 'MyApp.model.SomeModel',
autoDestroy: true,
pageSize: 75,
autoLoad: false,
//sorters: [{
// property: 'name',
// direction: 'ASC'
//}],
data: generateData(10),
proxy: {
type: 'memory',
//url: 'data.json',// I use struts action to get 2000 records
//data: generateData(2000),
reader: {
type: 'json',
root: 'data'
}
}
});
var someStore = Ext.create('MyApp.store.SomeStore', {
storeId: 'SomeStore'
});
Ext.widget('viewport', {
layout: 'fit',
items: [{
xtype: 'grid',
itemId: 'maingrid',
store: 'SomeStore',
loadMask: true,
tbar: [{
text: 'Insert at ',
handler: function (btn) {
var grid = btn.up('gridpanel'),
store = grid.getStore(),
inserted;
inserted = store.insert( btn.up('gridpanel').down('#Position').getValue()-1, {
name: 'New Name',
description: 'New Description'
})[0];
grid.getView().refresh();
grid.getView().select(inserted);
}
},{
xtype: 'numberfield',
itemId: 'Position',
minValue: 1,
value: 1
}, '->', {
text: 'Remove at ',
handler: function (btn) {
var grid = btn.up('gridpanel'),
store = grid.getStore(),
removed;
store.removeAt( btn.up('gridpanel').down('#removePosition').getValue()-1); store.sort();// it calls rows renderers.
grid.getView().refresh();
}
},{
xtype: 'numberfield',
itemId: 'removePosition',
minValue: 1,
value: 1
}],
viewConfig: {
emptyText: 'No Records',
deferEmptyText: true,
trackOver: false
},
autoScroll: true,
border: 0,
selModel: {
selType: 'rowmodel',
pruneRemoved: false,
mode: 'MULTI'
},
columnLines: true,
columns: [{
xtype:'rownumberer',
renderer: function (v, p, record, rowIndex) {
//if (this.rowspan) {
// p.cellAttr = 'rowspan="' + this.rowspan + '"';
//}
return rowIndex + 1;
}
}, {
text: 'Name',
flex: 2,
minWidth: 120,
dataIndex: 'name'
}, {
text: 'Description',
flex: 3,
minWidth: 120,
dataIndex: 'description',
renderer: function (value, metaData, record,
rowIdx, colIdx, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
}]
}]
});