extjs: Grid Buffered Scrolling with Row Editing/Deletion/Addition - extjs

Question

Has anybody seen any sample of extjs grid with buffered scrolling with new row, row editing and row deletion support?
Can CellEditing and RowEditing plugins be used with Buffered Scrolling?
Is row editing even possible with buffered scrolling?
Cheers,
Avi

Answer 1

I had opened a thread at Ext forum and got the response, insertion and deletion is NOT supported with buffered scrolling.
http://forums.ext.net/showthread.php?27969-Buffered-Scrolling-with-Row-Editing-Deletion-Addition&p=124559&posted=1#post124559
Cheers,
Avi

Answer 2

I changed this example http://docs.sencha.com/extjs/4.2.2/#!/example/grid/infinite-scroll.html, added the row editor. Open this example: http://jsfiddle.net/zAnZg/1/, click on record, change values and then click "Update"
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.grid.plugin.BufferedRenderer'
]);
Ext.onReady(function(){
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'forumtitle', 'forumid', 'username', {
name: 'replycount',
type: 'int'
}, {
name: 'lastpost',
mapping: 'lastpost',
type: 'date',
dateFormat: 'timestamp'
},
'lastposter', 'excerpt', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
model: 'ForumThread',
remoteGroup: true,
// allow the grid to interact with the paging scroller by buffering
buffered: true,
leadingBufferZone: 300,
pageSize: 100,
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an Ajax proxy would be better
type: 'jsonp',
url: 'http://www.sencha.com/forum/remote_topics/index.php',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true,
// sends single group as multi parameter
simpleGroupMode: true,
// This particular service cannot sort on more than one field, so grouping === sorting.
groupParam: 'sort',
groupDirectionParam: 'dir'
},
sorters: [{
property: 'threadid',
direction: 'ASC'
}],
autoLoad: true,
listeners: {
// This particular service cannot sort on more than one field, so if grouped, disable sorting
groupchange: function(store, groupers) {
var sortable = !store.isGrouped(),
headers = grid.headerCt.getVisibleGridColumns(),
i, len = headers.length;
for (i = 0; i < len; i++) {
headers[i].sortable = (headers[i].sortable !== undefined) ? headers[i].sortable : sortable;
}
},
// This particular service cannot sort on more than one field, so if grouped, disable sorting
beforeprefetch: function(store, operation) {
if (operation.groupers && operation.groupers.length) {
delete operation.sorters;
}
}
}
});
function renderTopic(value, p, record) {
return Ext.String.format(
'{0}',
value,
record.data.forumtitle,
record.getId(),
record.data.forumid
);
}
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
clicksToEdit: 1,
autoCancel: false,
listeners:{
edit: function(editor, e){
Ext.MessageBox.alert(
'Just create Ajax recuest here. Post changed record:<br/>' +
Ext.JSON.encode(e.record.data)
);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
collapsible: true,
title: 'ExtJS.com - Browse Forums',
store: store,
loadMask: true,
selModel: {
pruneRemoved: false
},
multiSelect: true,
viewConfig: {
trackOver: false
},
features:[{
ftype: 'grouping',
hideGroupedHeader: false
}],
plugins: [rowEditing],
// grid columns
columns:[{
xtype: 'rownumberer',
width: 50,
sortable: false
},{
tdCls: 'x-grid-cell-topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: true,
editor: {
allowBlank: false
}
},{
text: "Author",
dataIndex: 'username',
width: 100,
hidden: true,
sortable: true
},{
text: "Replies",
dataIndex: 'replycount',
align: 'center',
width: 70,
sortable: false,
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 150000
}
},{
id: 'last',
text: "Last Post",
dataIndex: 'lastpost',
width: 130,
renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
sortable: true,
groupable: false,
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'm/d/Y',
minValue: '01/01/2006',
minText: 'Cannot have a start date before the company existed!',
maxValue: Ext.Date.format(new Date(), 'm/d/Y')
}
}],
renderTo: Ext.getBody()
});
});