PDA

View Full Version : Row Edit With ComboBox Cell Not Submitting Changes



bradlymathews
2 Oct 2013, 2:10 PM
I have a grid with row editing, taken directly from the RESTFul Store with GridPanel sample and modified for my data model.

I made one of the fields a ComboBox and hooked it to a new Store that looks up the values on the server using REST.

When I edit the row two undesirable things happen. First, the cell with the combobox goes blank. If I drop down the combobox, all of the values from my store are there and I can select one.

Then if I click Update, nothing happens. The original cell value is back and the Put never happens to the server. If I edit another field, all works as expected.

Code is below. listtype is the field I turned into a combo box.

Thanks,
Brad



Ext.require(['Ext.data.*', 'Ext.grid.*']);


Ext.Ajax.useDefaultXhrHeader = false;
Ext.Ajax.cors = true;


Ext.define('lists', {
extend: 'Ext.data.Model',
idProperty: 'listid',
fields: [{
name: 'listid',
type: 'int',
useNull: true
}, 'sourceid', 'listname','listtype','scriptname'],
validations: [{
type: 'length',
field: 'listname',
min: 1
}]
});


Ext.define('listtypes', {
extend: 'Ext.data.Model',
idProperty: 'listtype',
fields: [{
name: 'listtype',
type: 'text',
useNull: true
}, 'englishdesc', 'shorterdesc']
});


Ext.onReady(function(){


var store = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'lists',
proxy: {
type: 'rest',
url: 'http://localhost/AdminAPI/api/lists',
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;


if (name == 'Destroy') {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
}
}
});


var listtypesStore = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'listtypes',
proxy: {
type: 'rest',
url: 'http://localhost/AdminAPI/api/listtypes',
reader: {
type: 'json',
root: 'data'
}
}
});

var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
listeners: {
cancelEdit: function(rowEditing, context) {
// Canceling editing of a locally added, unsaved record: remove it
if (context.record.phantom) {
store.remove(context.record);
}
}
}
});

var grid = Ext.create('Ext.grid.Panel', {
renderTo: document.body,
plugins: [rowEditing],
width: 700,
height: 300,
frame: true,
title: 'Lists',
store: store,
iconCls: 'icon-user',
columns: [{
text: 'SourceID',
width: 40,
sortable: true,
dataIndex: 'sourceid'
}, {
text: 'List Name',
flex: 1,
sortable: true,
dataIndex: 'listname',
field: {
xtype: 'textfield'
}
}, {
text: 'ScriptName',
flex: 1,
sortable: true,
dataIndex: 'scriptname',
field: {
xtype: 'textfield'
}
}
, {
text: 'List Type',
flex: 1,
sortable: true,
dataIndex: 'listtype',
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
store: listtypesStore,
displayField: 'listtype',
valueField: 'listtype'
})
}
],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new lists());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
});

ettavolt
2 Oct 2013, 9:39 PM
Try to replace editor: instance with field: config - you may not have some defaults applied.

bradlymathews
3 Oct 2013, 9:23 AM
That did it, Thanks!

To be clear for posterity, here is what I changed:


{
text: 'List Type',
flex: 1,
sortable: true,
dataIndex: 'listtype',
field: {
xtype: "combobox",
typeAhead: true,
triggerAction: 'all',
store: listtypesStore,
displayField: 'listtype',
valueField: 'listtype'
}
}