PDA

View Full Version : RowEditing issues



phamtranquocviet
16 Aug 2013, 6:14 AM
Hi,

I am using rowediting plugin in my grid. The grid has two columns, and both are custom combos. Here are couple of issue I run into and need you help:

1) I use the rowediting editor to add new record to the grid (similar to clicking "Add Employee" button in this example: http://docs.sencha.com/extjs/4.2.1/#!/example/grid/row-editing.html). Both combos have "allowBlank: false". So, the editor would come up with two combos whose border are red because of "allowBlank: false". How do I make it not to automatically do the validation and give users a chance to enter input first?

2) After I provided input for the both fields with no validation errors, the "Update" button is still greyed out. Isn't it supposed to automatically enable when all input are provided with no validation errors? How do I fix this?

3) When I double click on rows, only the top one show the editor to allow me to edit. The rest does not show the editor at all.

Here is my code for view


Ext.define('Iip.view.giips.schedule.AddCourseTab', {
extend: 'Ext.panel.Panel',
alias:'widget.course-provisioning-tab-add-course-tab',
title: 'Add a Course',
autoScroll: true,
id: 'course-provisioning-tab-add-course-tab',

listeners: {
afterrender: function() {
Iip.app.getController('Iip.controller.giips.schedule.AddCourseTabs');
}
},

getAidUi: function() {
return Ext.create('Ext.grid.Panel', {
//store: Ext.data.StoreManager.lookup('simpsonsStore'),
width: 580,
height: 200,
colspan: 4,
margin: '10 0 0 0',
sortableColumns: false,
enableColumnHide: false,
id: 'aids-grid',

columns: [{
header: 'Aid Type',
dataIndex: 'roleId',
flex: 0.5,
renderer: function(value) {
var idx, record, aidTypeStore;

aidTypeStore = Ext.data.StoreManager.lookup('aid-types-store');
idx = aidTypeStore.find('roleId', value);
record = aidTypeStore.getAt(idx);
return record.get('role');
},
editor: {
xtype: 'combo',
store: Ext.create('Iip.store.giips.schedule.AidTypes').load({params: {c: 'get_aid_types'}}),
colspan: 2,
queryMode: 'local',
displayField: 'role',
valueField: 'roleId',
itemId: 'aidType',
name: 'aidType',
forceSelection: true,
lastQuery: '',
triggerAction: 'all',
allowBlank: false,
autoSelect: true,
listConfig: {
getInnerTpl: function(displayField) {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" />{role}</div>';
}
}
}
},{
header: 'Aid Name',
dataIndex: 'userInfoId',
flex: 0.5,
renderer: function(value) {
var idx, record, aidsStore;

aidsStore = Ext.data.StoreManager.lookup('aids-store');
idx = aidsStore.find('userInfoId', value);
record = aidsStore.getAt(idx);
return record.get('aidName');
},
editor: {
xtype: 'combo',
store: Ext.create('Iip.store.giips.schedule.Aids').load({params: {c: 'get_aids'}}),
colspan: 2,
queryMode: 'local',
displayField: 'aidName',
valueField: 'userInfoId',
itemId: 'aidUserInfoId',
name: 'aidUserInfoId',
forceSelection: true,
lastQuery: '',
triggerAction: 'all',
allowBlank: false,
listConfig: {
getInnerTpl: function(displayField) {
return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" />{aidName}</div>';
}
}
}
}],
selType: 'rowmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
clicksToEdit: 2,
autoCancel: true,
pluginId: 'aids-plugin',
errorSummary: false
})
],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [
{xtype: 'button', text: 'Add', id: 'course-provisioning-tab-add-course-tab-add-course-button'},
{xtype: 'button', text: 'Edit', id: 'course-provisioning-tab-add-course-tab-edit-course-button'},
{xtype: 'button', text: 'Delete', id: 'course-provisioning-tab-add-course-tab-delete-course-button'}
]
}]
});
},

initComponent: function() {
this.items = Ext.create('Ext.form.Panel', {
url: 'indexes/schedule_index.php',
bodyPadding: 5,
margin: '5 5 5 5',
border: 0,
layout: {
type: 'table',
columns: '4'
},
defaults: {
labelWidth: 120
},

items: [
this.getAidUi()
]
});
this.callParent(arguments);
}
});


Here is my code for controller:


Ext.define("Iip.controller.giips.schedule.AddCourseTabs", {
extend: "Ext.app.Controller",
refs: [
{ref: 'aidsGrid',selector: '#aids-grid'}
],

handleAddAid: function(addButton, event) {
var aidsGrid, rowEditingPlugin, aid, role, userInfo;

aidsGrid = this.getAidsGrid();
rowEditingPlugin = aidsGrid.getPlugin('aids-plugin');
rowEditingPlugin.cancelEdit();

role = Ext.data.StoreManager.lookup('aid-types-store').getAt(0);
userInfo = Ext.data.StoreManager.lookup('aids-store').getAt(0);
var aid = Ext.create('Iip.model.giips.schedule.Aid', {
roleId: role.data.roleId,
userInfoId: userInfo.data.userInfoId
});

aidsGrid.getStore().insert(0, aid);
rowEditingPlugin.startEdit(0, 0);
},

init: function() {
this.control({
"#course-provisioning-tab-add-course-tab-add-course-button": {click: this.handleAddAid},
});
}
});

slemmon
19 Aug 2013, 4:37 PM
There's not a public config / method to keep the fields in the editors from validating on startEdit, but you can do something like:



plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
clicksToEdit: 2,
autoCancel: true,
pluginId: 'aids-plugin',
errorSummary: false,
listeners: {
beforeedit: function (editor, context) {
editor.getEditor().items.each(function (field) {
field.clearInvalid();
});
},
delay: 10
}
})
]


As for the update button being grayed out that's a bug in 4.2.1 that is fixed in the next release.

And I wasn't able to reproduce the issue you were seeing with the editor not showing up for any rows other than the top-most row.

phamtranquocviet
20 Aug 2013, 5:12 AM
Thanks for your answer. I had to move on and switched to using a pop-up form instead. Will modify to use rowediting in the future when I have time.

thanks again.