Disable Update button when using RowEditing

[gmn314]

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]

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.