PDA

View Full Version : [CLOSED] Sorting an Infinite Grid while Row Editing



KEH
1 Aug 2013, 10:50 AM
Ext version tested:

Ext 4.2.1


Browser versions tested against:

Chrome 27
IE9
Firefox 22
Opera 12
Safari 5


Description:

Ext.grid.plugin.RowEditing gets out of position graphically (and isn't linked with actual row) when sorting an infinite grid.


Steps to reproduce the problem:

Create an Ext.grid.Panel with infinite grid configuration (remote data) and Ext.grid.plugin.RowEditing plugin. Click any sorting header when editing a row.


The result that was expected:

Warning that editing changes will be lost if you (remotely) sort (or alternative; see below).


The result that occurs instead:

The row editor jumps to the top or stays in its incorrect position. It can successfully update the information (in the database), but if the actual row is loaded in the buffer, that won't update. But the broken display of it was more my concern.

Code:

Grid:

Ext.define('appName.view.clients.ClientsGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.clients.grid',
requires: ['Ext.grid.plugin.DivRenderer', 'Ext.selection.RowModel', 'Ext.grid.Column', 'Ext.grid.plugin.RowEditing'],
border: false,
initComponent: function () {
var me = this;
me.store = me.buildStore(me);
me.columns = me.buildColumns();
me.plugins = [me.buildRowEditing(), 'bufferedrenderer'];
me.callParent();
me.store.load();
},
verticalScroller: {
numFromEdge: 10,
trailingBufferZone: 10,
leadingBufferZone: 10
},
verticalScrollerType: 'paginggridscroller',
invalidateScrollerOnRefresh: false,
disableSelection: true,

buildColumns: function () {
return [
{ text: 'Last Name', dataIndex: 'LastName', flex: 1, editor: { allowBlank: false} },
{ text: 'First Name', dataIndex: 'FirstName', flex: 1, editor: { allowBlank: false} },
{ text: 'User Name', dataIndex: 'UserName', flex: 1 },
{ text: 'Employee ID', dataIndex: 'EmployeeID', flex: 1 },
{ text: 'Site ID', dataIndex: 'Site_ID', flex: 1, editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, maxValue: 10} },
{ text: 'Deleted', dataIndex: 'Deleted', editor: { xtype: 'numberfield', allowBlank: false, minValue: 0, maxValue: 1} }
];
},

buildStore: function (gridRef) {
return Ext.create('appName.store.clients.Clients', {
grid: gridRef
});
},

buildRowEditing: function () {
return Ext.create('appName.plugin.clients.ClientsRowEditing');
}

});

Store:

Ext.define('appName.store.clients.Clients', {
extend: 'Ext.data.Store',
alias: 'store.clients',
model: 'appName.model.clients.Client',
idProperty: 'User_ID',
remoteFilter: true,
buffered: true,
leadingBufferedZone: 200,
purgePageCount: 0,
pageSize: 50,
remoteSort: true,
sorters: [{
property: 'LastName',
direction: 'ASC'
}],
grid: null,
proxy: {
type: 'ajax',
url: './data/clients/Users.asmx/loadUsers',
extraParams: {
total: 1541
},
headers: { 'Content-type': 'application/json' },
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
}
});

RowEditing Plugin:

Ext.define('appName.plugin.clients.ClientsRowEditing', {
extend: 'Ext.grid.plugin.RowEditing',
alias: 'plugin.clients.rowediting',
pluginId: "rowEditing",
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
edit: function (e) {
Ext.Ajax.request({
url: './data/clients/Users.asmx/saveUser',
method: 'GET',
params: { data: JSON.stringify(e.context.record.data) },
success: function (response, options) {
var data = Ext.decode(response.responseText);
Ext.Msg.alert('Save Successful!', data.message);
},
failure: function (response, options) {
var data = Ext.decode(response.responseText);
Ext.Msg.alert('Error!', data.message);
}
})
}
}
})

Adding

listeners: {
beforesort: function (store) {
store.grid.getPlugin("rowEditing").cancelEdit();
}
}
to the configuration of the store works just fine for automatically cancelling the editor when you sort, but having a verifying warning would be ideal.

Possible Solution 1:
I tried for several hours to make a confirm message box that would cancel the row editor and sort if you said yes, and do nothing if you said no. It worked fine at the top of the grid, but threw this error "Ext.Base.getRange(): PageMap asked for range which it does not have" for yes or no if lower down. Here was the code I ended with when I gave up trying to hack it and came here.

listeners: {
beforesort: function (store) {
if (this.grid.getPlugin("rowEditing").editor.isVisible()) {
var me = this;
Ext.MessageBox.confirm('Unsaved Changes', 'Sorting will cause you to lose unsaved changes! Continue anyway?', function (response) {
if (response == "yes") {
//necessary as cancelEdit causes error if it occurs before sort
me.grid.getPlugin("rowEditing").cancelEdit();
me.sort();
}
});

//hopefully will work
return false;
}
},
clear: function (store) {
if (this.grid.getPlugin("rowEditing").editor != undefined && this.grid.getPlugin("rowEditing").editor.isVisible()) {
return false;
}
},
beforeload: function (store) {
if (this.grid.getPlugin("rowEditing").editor != undefined && this.grid.getPlugin("rowEditing").editor.isVisible()) {
return false;
}
},
beforeprefetch: function (store) {
if (this.grid.getPlugin("rowEditing").editor != undefined && this.grid.getPlugin("rowEditing").editor.isVisible()) {
return false;
}
},
totalcountchange: function (store) {
if (this.grid.getPlugin("rowEditing").editor != undefined && this.grid.getPlugin("rowEditing").editor.isVisible()) {
return false;
}
},
prefetch: function (store) {
if (this.grid.getPlugin("rowEditing").editor != undefined && this.grid.getPlugin("rowEditing").editor.isVisible()) {
return false;
}
}
}

I'd figure I'm going to have to grab the mousedown event when over the header and the editor is up, but I am not super familiar with ExtJS yet, so I wasn't sure how to go about doing that, or if that is even the approach I should take.


Possible Solution 2:
Disable sorting while editor is open. Not really my ideal, but if it is the only doable option, I can live with it. It would be nice to have a message pop up when the user clicks to sort also, rather than having no feedback while it is disabled.


Possible Solution 3:
On sort, jump to the correct place in the grid with the editor associated with the correct row. I imagine this would be significantly harder than 1 or 2, but I figured I throw it out there in case I was wrong.


That was long-winded. Sorry about that.

Any help would be appreciated. Thanks.

Gary Schlosberg
6 Aug 2013, 9:37 AM
Thanks for the report! I have opened a bug in our bug tracker.