PDA

View Full Version : RowEditing Plugin - row does not become editable when double clicking



bradlymathews
14 Mar 2014, 4:03 PM
I have this one grid on which the RowEditing plugin does not seem to work correctly.

What happens when you double click the row is the row highlights and the Update and Cancel buttons display as expected. But the fields are not editable. If I click one of the buttons, the RowEditing UI goes away as expected.

As far as I can tell, I am setting up the plugin the same way on this grid. The grid is a bit more complex than the others - more fields and a paging toolbar - but I don't see anything that should be killing the editing. I am not getting any errors and I have resolved all other problems with my grid implementation - this is the last one.

Any clues as to what I am doing wrong?

Thanks!
Brad

Code snippets:



rowEditing: Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function (rowEditing, context) {
if (context.record.phantom) {
this.store.remove(context.record);
}
}
}
}),

this.store = getStore({
model: this.model,
proxy: {
pageParam: 'page',
limitParam: 'limit',
url: this.url,
// Capture the ID of the newly added record
afterRequest: function (request, success) {
if (request.action === 'create') {
var data = Ext.decode(request.operation.response.responseText);
if (request.records.length > 1) {
alert("More than one Create result has been returned. You need to figure out how to link them to the Store records to batch update them.");
}
request.records[0].data[this.recordIDField] = data[this.recordIDField];
}
},
reader: {
type: 'json',
root: 'rows',
totalProperty: 'totalCount',
}
},
listeners: {
scope: this,
'beforeload': function (store, options) {
options.params || (options.params = {}); //assert params
Ext.apply(options.params, {
sortField: reportsSetup.sortField,
sortOrder: reportsSetup.sortOrder,
searchField: reportsSetup.searchField,
searchValue: reportsSetup.searchValue
});
}
}
}, this);

this.paging_toolbar = new Ext.PagingToolbar({
displayInfo: true,
refreshText: 'One moment while we get more data...',
emptyMsg: 'No data found',
store: this.store,
items: [
'-',
'# Page: ',
pageSizeCombo,
'-',
'Field to Search: ',
searchTypeCombo,
'Search Value: ',
{
xtype: 'textfield',
name: 'searchValue',
id: 'searchValue'
}, {
xtype: 'button',
text: 'Search',
listeners: {
click: function () {
reportsSetup.searchValue = Ext.getCmp('searchValue').getValue();
reportsSetup.paging_toolbar.moveFirst();
//reportsSetup.paging_toolbar.doRefresh();
},
scope: this
}
}, {
xtype: 'button',
text: 'Clear Search',
listeners: {
click: function () {
Ext.getCmp('searchValue').setValue('');
reportsSetup.searchValue = '';
reportsSetup.paging_toolbar.doRefresh();
},
scope: this
}
}
],
listeners: {
scope: this,
'change': function () {
if (this.paging_toolbar.cursor > this.paging_toolbar.store.totalLength) {
this.paging_toolbar.moveFirst();
}
}
}


});

this.grid = Ext.create('Ext.grid.Panel', {
renderTo: this.renderToDIV,
plugins: [this.rowEditing],
width: 1200,
height: 600,
frame: true,
title: this.formTitle,
store: this.store,
iconCls: 'icon-user',
stateful: true,
columns: [
{ id: 'reportid', header: "Report ID", width: 100, sortable: true, dataIndex: 'reportid' },
{ header: "Reference", width: 125, sortable: true, dataIndex: 'reference' },
{ header: "Address", width: 250, sortable: true, dataIndex: 'address' },
{ header: "Display Address", width: 250, sortable: true, dataIndex: 'displayaddress' },
{ header: "Template", width: 75, sortable: true, dataIndex: 'template' },
{ header: "Report Complete Date", width: 150, sortable: true, dataIndex: 'datetimecompleted' },
{ header: "UserName", width: 75, sortable: true, hidden: false, dataIndex: 'username' },
{ header: "Status", width: 150, sortable: true, hidden: false, dataIndex: 'status' },
{ header: "Lat", width: 75, sortable: false, dataIndex: 'lat' },
{ header: "Lng", width: 75, sortable: false, dataIndex: 'lng' }
],
listeners: {
'sortchange': {
fn: function (grid, sortInfo) {
this.sortField = sortInfo.dataIndex;
this.sortOrder = sortInfo.sortState;
this.paging_toolbar.doRefresh();
},
scope: this
}
},
bbar: this.paging_toolbar,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: [{
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function () {
var selection = this.grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
this.store.remove(selection);
}
},
scope: this
}, {
id: 'view',
text: 'View Report',
cls: 'x-btn-text',
handler: function () {


},
scope: this
}]
}]
});

ssamayoa
16 Mar 2014, 7:01 AM
You have to add "editor" config to the editable columns, for example:



{
xtype: 'gridcolumn',
dataIndex: 'name',
text: 'Name',
editor: {
xtype: 'textfield'
}
},

bradlymathews
17 Mar 2014, 10:06 AM
ssamayoa,

That worked. I looked and saw that my previous grids had:



field: {
xtype: 'textfield'
}


And that seems to work as well, I just though it was for a different purpose.

I will use editor as that is clearer.

Thanks!
Brad