1. #1
    Sencha User
    Join Date
    May 2008
    Posts
    3
    Vote Rating
    0
    gmn314 is on a distinguished road

      0  

    Default Unanswered: Disable Update button when using RowEditing

    Unanswered: Disable Update button when using RowEditing


    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:

    Code:
    	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();
    	        }
    	    }]
    	});

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Answers
    667
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Location
    USA
    Posts
    7
    Vote Rating
    0
    neelua9 is on a distinguished road

      0  

    Default


    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.
    Neilu

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    171
    Answers
    3
    Vote Rating
    1
    mike1993 is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha User
    Join Date
    Apr 2013
    Location
    USA
    Posts
    7
    Vote Rating
    0
    neelua9 is on a distinguished road

      0  

    Default


    I think , you should say autoCancel:false , so our editor do not move to next row
    Neilu

  6. #6
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    171
    Answers
    3
    Vote Rating
    1
    mike1993 is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Apr 2013
    Location
    USA
    Posts
    7
    Vote Rating
    0
    neelua9 is on a distinguished road

      0  

    Default


    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.
    Last edited by neelua9; 23 Jan 2014 at 1:07 PM. Reason: typos
    Neilu

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,010
    Answers
    667
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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?

  9. #9
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    171
    Answers
    3
    Vote Rating
    1
    mike1993 is on a distinguished road

      0  

    Default


    I use 'validateedit' event as well. I just cannot add record using 'Update' button. It stays disabled

  10. #10
    Sencha Premium Member
    Join Date
    Mar 2007
    Posts
    171
    Answers
    3
    Vote Rating
    1
    mike1993 is on a distinguished road

      0  

    Default


    https://fiddle.sencha.com/#fiddle/2tq

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