PDA

View Full Version : Disable Update button when using RowEditing



gmn314
5 Jun 2012, 4:52 AM
I am using the RowEditing plugin with a Grid. I noticed the following behavior: The first time that you add (or edit) a row, the row editor shows up over the row, with the "Update" and "Cancel" buttons. The "Update" button is initially disabled until you type the first character in any field. It then becomes enabled, allowing you to save the record.

The problem is that it only happens the first time you add or edit a row. Once you press "update", then add (or double click a row to edit) it again, the Update button remains enabled even if you don't type any characters!

What do I have to do to ensure that the Update button is disabled each time you try to Add/Modify a row?

Here is a simple example:


Ext.define('peopleModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id'},
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
]
});

var peopleStore = Ext.create('Ext.data.Store', {
model: peopleModel,
data: [
{id: 1, firstName: 'George', lastName: 'Jetson'},
{id: 2, firstName: 'Elroy', lastName: 'Jetson'},
{id: 3, firstName: 'Jane', lastName: 'Jetson'}
]


});




var peopleEditor = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
removePhantomsOnCancel:true,
listeners: {
edit: function( editor, event, eOpts ) {
event.store.sync();
},
canceledit : function(editor, event, eOpts) {
if( event.record.phantom ) {
peopleStore.remove(event.record);
}
},
validateedit: function( editor, e) {
if( $.trim(e.newValues['firstName']).length == 0 || $.trim(e.newValues['lastName']).length == 0 ) {
return false;
}
return true;
}
}
});



var peopleGrid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: peopleStore,
columns: [{
text: 'id',
hidden: true,
dataIndex: 'id'
}, {
header: 'First Name',
width: 170,
sortable: true,
dataIndex: 'firstName',
editor: {
xtype: 'textfield',
allowBlank: true
}
}, {
header: 'Last Name',
width: 200,
sortable: true,
dataIndex: 'lastName',
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
title: 'My peeps',
height: 300,
width:300,
frame:true,
plugins: [peopleEditor],
tbar: [{
iconCls: 'icon-user-add',
text: 'Add Item',
handler: function(){
var e = new peopleModel({
firstName: 'Newie',
lastName: 'Newman'
});
peopleEditor.cancelEdit();
peopleStore.insert(0, e);
peopleGrid.getView().refresh();
peopleGrid.getSelectionModel().select(0);
peopleEditor.startEdit(0,0);
}
},{
iconCls: 'icon-user-save',
text: 'Save All Modifications',
handler: function(){
peopleStore.save();
}
}]
});

scottmartin
5 Jun 2012, 11:04 AM
You will have to look at the following and see what is going wrong:

Ext.grid.RowEditor :: loadRecord() and see why me.updateButton(isValid) is not behaving like you expect.

Do you have a debugger like FireBug or DeveloperTools in Chrome to step through the code?

Scott.

neelua9
23 Jan 2014, 6:52 AM
I have tried this too, mostly, i can change the name of the buttons, and it is getting no where when ever i try to disable the buttons, i wish some properties in detail could help.

mike1993
23 Jan 2014, 12:35 PM
I just cam across a problem w/ RowEditing plugin as well. My situation is opposite of yours: attempt to add record shows "Update" button as disabled even though I fill in required fields.

Although if I hit Enter (upon fill in), the new record is added to the grid.

P.S. and like in your case: once record has been added and later was attempted to be edited, "Update" button stays enabled even though the required field was blank

neelua9
23 Jan 2014, 12:37 PM
I think , you should say autoCancel:false , so our editor do not move to next row

mike1993
23 Jan 2014, 12:54 PM
That's the thing, record(s) added are valid (by hitting 'Enter'), they have all required fields filled up. So autoCancel does not play my role here.

neelua9
23 Jan 2014, 1:02 PM
I can able to update a record by clicking enter key frm keyboard , but this is an update not brand new row , and i am using event validateedit , and i can catch that update to database.

scottmartin
23 Jan 2014, 1:16 PM
Please create a working test case:
https://fiddle.sencha.com/#home

You can use the OP's code or create your own.

Please note that there was a bug on this in a older version of Ext4. What version are you using?

mike1993
23 Jan 2014, 1:36 PM
I use 'validateedit' event as well. I just cannot add record using 'Update' button. It stays disabled

mike1993
23 Jan 2014, 1:50 PM
https://fiddle.sencha.com/#fiddle/2tq

I am using ExtJs 4.2 (Build date: 2013-05-16 14:36:50)

scottmartin
23 Jan 2014, 1:57 PM
Mike, you should have access to 4.2.2 that corrects this, Download from Portal / Dashboard

See attached, where update enables after 1st field is populated
47692

mike1993
23 Jan 2014, 2:00 PM
Just tried w/ 4.2.2 on fiddle and all was good.

Thank you! Will do.

scottmartin
23 Jan 2014, 2:32 PM
Here is a quick-n-dirty override that hard codes the update button on on a new record. (if you cannot upgrade to 4.2.2)
It still validates field on click.

You can adjust it as needed:



Ext.define('Override.RowEditor', {
override: 'Ext.grid.RowEditor',

loadRecord: function(record) {
var me = this,
form = me.getForm(),
fields = form.getFields(),
items = fields.items,
length = items.length,
i, displayFields,
isValid;

for (i = 0; i < length; i++) {
items[i].suspendEvents();
}

form.loadRecord(record);

for (i = 0; i < length; i++) {
items[i].resumeEvents();
}

isValid = form.isValid();
if (me.errorSummary) {
if (isValid) {
me.hideToolTip();
} else {
me.showToolTip();
}
}

// overcome issue with form.valid returning false on new record
if (record.phantom === true){
me.updateButton(true);
} else {
me.updateButton(isValid);
}

displayFields = me.query('>displayfield');
length = displayFields.length;

for (i = 0; i < length; i++) {
me.renderColumnData(displayFields[i], record);
}
}

});

mike1993
23 Jan 2014, 3:06 PM
Thank you. I've got the 4.2.2 from subsription portal.