Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    315
    Vote Rating
    0
    josh803316 is on a distinguished road

      0  

    Default [OPEN-764]ed is null (ed.completeEdit) for Editor grid and Tabbing

    [OPEN-764]ed is null (ed.completeEdit) for Editor grid and Tabbing


    Version: Ext3.2 beta or Ext 3.1.1

    I have a 2 column edit grid with each column being an editable text field. If I start editing a row and then tab to the last row in the grid, the TAB attempt at the end of the grid produces the ed is null error. I'm assuming this has to do with what Condor is talking about here:
    http://www.extjs.com/forum/showthread.php?p=377984

    I tried the tip but it didn't work for me, just wondering if there were any other solutions or workarounds out there.


    Code:
    (JS Error)
    ed is null (ed.completeEdit();)
    http://localhost/lib/ext/ext-all-debug.js
    Line 70105
    (Sidenote)For some reason the editor doesn't drop down row by row as I tab but I do see the fields changing.....

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    The above post is about Ext 2.2 version so I don't know if it still applies. I've tried tabbing in http://www.extjs.com/deploy/dev/exam...edit-grid.html and it works as expected. Could you post a working showcase so that we can analyze the problem?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    One note more, there were some bugs fixed between 3.1.1 and 3.1.2 so you can try if 3.1.2 has the same problem.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    315
    Vote Rating
    0
    josh803316 is on a distinguished road

      0  

    Default


    Saki,

    Here is a working showcase: (works from the ext/examples/problems/ directory structure)

    Steps to reproduce:
    1)Add a couple rows with text in each column
    2)Click on the first row as if you are editing again
    3)Just hit tab for a while, it will tab through the existing rows and if you keep hitting tab you will see the issue. (If I have 2 rows it usually takes me 6 tab clicks to reproduce)

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id='title'>Title</title>
     
            <!-- ** CSS ** -->
            <!-- base library -->
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     
            <!-- overrides to base library -->
     
     
            <!-- ** Javascript ** -->
            <!-- base library -->
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
     		<script type="text/javascript" src="../../examples/ux/RowEditor.js"></script>
     
            <!-- overrides to base library -->
     
            <!-- extensions -->
     		<script type="text/javascript">
    		Ext.namespace('jnms');
    		Ext.namespace('jnms.xtypes.stores');
    		Ext.namespace('jnms.xtypes.forms');
    		Ext.namespace('jnms.xtypes.forms.textareas');
    		Ext.namespace('jnms.xtypes.grids');
    		Ext.namespace('jnms.xtypes.toolbars');
    		Ext.namespace('jnms.xtypes.panels');
    		Ext.namespace('jnms.viewport');
    		
    		jnms.xtypes.toolbars.topEditGridToolbar =  Ext.extend(Ext.Toolbar, {
    				 initComponent:function() {
    						var config = {
    						 	autoDestroy: true,
    							closable: true
    							
    						}; // eo config object
    						  
    						// apply config
    						Ext.apply(this, Ext.apply(this.initialConfig, config));
    				  		
    						
    				 		// call parent
    				 		jnms.xtypes.toolbars.topEditGridToolbar.superclass.initComponent.apply(this, arguments);
    		
    		 		}, // eo function initComponent
    		 		afterRender: function(){
    					jnms.xtypes.toolbars.topEditGridToolbar.superclass.afterRender.call(this);
    					
    					//this.findByType('button')[0].on('click', this.onAdd, this);
    					//this.findByType('button')[1].on('click', this.onDelete, this);
    				},
    		 		onRender: function(){
    		 			jnms.xtypes.toolbars.topEditGridToolbar.superclass.onRender.apply(this, arguments);
    		 		}
    		});
    		  
    		Ext.reg('topeditgridtoolbar', jnms.xtypes.toolbars.topEditGridToolbar); 
    		
    		
    		jnms.xtypes.stores.manageStore   = Ext.extend(Ext.data.JsonStore, {
    			constructor: function(config) {
    		        jnms.xtypes.stores.manageStore.superclass.constructor.call(this, Ext.apply({
    		            url: config.url,
    					id: config.id,
    					reader: new Ext.data.JsonReader({
    		        		totalProperty: 'total', 
    		        		fields: config.fields,
    						root: config.root
    		    		}),
    					baseParams: config.baseParams
    					//autoLoad: {params:{start: 0, limit: 25}}
    					//scope: this
    					
    		        }, config));
    				this.on('load', this.showSuccess, {
    					scope: this
    				});
    				//this.on('beforeload', this.beforeLoad, {
    				//	scope: this
    				//});
    				this.on('exception', this.showError, this);
    		    },
    			/**
    			* Shows Message Box with error
    			* @param {String} msg Message to show
    			* @param {String} title Optional. Title for message box (defaults to Error)
    			* @private
    			*/
    			showError:function(store,options,response,e) {
    				 //console.dir(response);
    				 title = 'Error';
    				 Ext.Msg.show({
    					 title:title
    					 ,msg:"Load exception for JSON store " + response.responseText 
    					 ,modal:true
    					 ,icon:Ext.Msg.ERROR
    					 ,buttons:Ext.Msg.OK
    				 }); //eo Msg.show
    			},
    			/**
    			* Shows Message Box with error
    			* @param {String} msg Message to show
    			* @param {String} title Optional. Title for message box (defaults to Error)
    			* @private
    			*/
    			beforeLoad:function(store,options,response,e) {
    				 
    				 
    			},
    		    /**
    			* Shows Message Box with error
    			* @param {String} msg Message to show
    			* @param {String} title Optional. Title for message box (defaults to Error)
    			* @private
    			*/
    			showSuccess:function(store, records, options) {
    				 //var obj = Ext.decode(response.responseText);
    				 var jsonData = store.reader.jsonData.data;
    				 //console.info(records);
    				 if (jsonData.failure === 'true') {
    				 	Ext.dropDownMessage.msg('Error','{0}','Request Failed:<br />' + jsonData.result,5);
    				 	//Ext.Msg.alert('Error', jsonData.result);
    				 }
    				 
    			}
    		    // }}}
    		    // any other added/overrided methods
    		}); // eo extend
    		 
    		// register an xtype with this class
    		Ext.reg('managestore', jnms.xtypes.stores.manageStore);
    		
    		jnms.xtypes.forms.textareas.editArea = Ext.extend(Ext.form.TextArea, {
    
    		    height: 100,
    		    initComponent:function() {
    		    	var config = {
    					selectOnFocus: true
    				    ,enableKeyEvents:true
    					
    		    	};	
    		        Ext.apply(this, Ext.apply(this.initialConfig, config));
    		        
    		        jnms.xtypes.forms.textareas.editArea.superclass.initComponent.apply(this, arguments);
    		
    		    } 
    			,initEvents: function(){
    				jnms.xtypes.forms.textareas.editArea.superclass.initEvents.call(this);
    				
    			}
    		    ,onRender:function() {
    		        jnms.xtypes.forms.textareas.editArea.superclass.onRender.apply(this, arguments);
    				//this.on('keyup',this.onFilter, this, {buffer: 500});
    		    }
    		   
    		}); // end of extend
    		
    		Ext.reg('texteditarea', jnms.xtypes.forms.textareas.editArea);
    		
    
    		// Edit grid 
    		jnms.xtypes.grids.editGrid =  Ext.extend(Ext.grid.EditorGridPanel, {
    				 
    				 initComponent:function() {
    						var config = {
    							 //closable: true,
    						 	 sm: new Ext.grid.RowSelectionModel({
    							 	singleSelect: true
    							 }),
    							 header:false,
    						     stripeRows: true
    							 
    						}; // eo config object
    						  
    						// apply config
    						Ext.apply(this, Ext.apply(this.initialConfig, config));
    				  		
    						
    				 		// call parent
    				 		jnms.xtypes.grids.editGrid.superclass.initComponent.apply(this, arguments);
    		
    		 		}, // eo function initComponent
    		 		initEvents: function(){
    					jnms.xtypes.grids.editGrid.superclass.initEvents.call(this);
    				},
    		 		onRender: function(){
    		 			this.store.baseParams.CLASS = this.Class;
    		 			jnms.xtypes.grids.editGrid.superclass.onRender.apply(this, arguments);
    					
    					//this.dz = new jnms.xtypes.grids.GridDropZone(this, {ddGroup:this.ddGroup || 'GridDD'});
    		 		},
    				/**
    				* Called when records are dropped on this grid
    		 		* @param {Ext.grid.GridPanel} srcGrid The source grid
    		 		* @param {Array} records Array of dropped records
    		 		*/
    				onRecordsDrop:Ext.emptyFn,
    				onSave: function(e){
    					
    				},
    				validateEdit: function(e){
    					//console.dir(e);
    					//console.log("Something was validated");
    				},
    				addBlankRecord: function() {
    			        var store = this.getStore();
    					//console.dir(store);
    			        var orec, row;
    			        if(store.recordType) {
    						//console.log("There is a record type");
    			            orec = new store.recordType();
    			            orec.data = {};
    			            orec.fields.each(function(field) {
    			                orec.data[field.name] = field.defaultValue;
    			            });
    			            orec.data.newRecord = true;
    			            orec.commit();
    			            store.add(orec);
    			
    			            row = store.indexOf(orec);
    			            if(row && undefined !== this.editOnAddCol) {
    			                this.startEditing(row, this.editOnAddCol);
    			            }
    			        }
    			    }
    		 		
    		 });
    		 
    		 Ext.reg('editgrid', jnms.xtypes.grids.editGrid); 
    		
    		
    		 
    		 jnms.xtypes.panels.managePanel   = Ext.extend(Ext.Panel, {
    		 
    			//id: 'managePanel',
    			title: this.title,
    			
    		    initComponent:function() {
    		        // {{{
    		        // hard coded (cannot be changed from outside)
    				
    		        var config = {
    					frame: true,
    					//id: this.id,
    					width: this.width,
    					height: this.height,
    					layout: 'border',
    					region: 'center',
    					items: [{
    							region: 'center',
    							xtype: 'editgrid',
    						 	header: true,
    						 	title: "Create/Update Command Templates",
    						 	height: 600,
    						 	store: {
    						 		xtype: 'managestore',
    						 		url: '/jnms/jnms/cgi/admin/control_comm.cgi',
    						 		root: 'data',
    						 		fields: ['mtCommandTemplate', 'mtResultTemplate', 'fk_ConnectionType_iConnectionTypeId', 'fk_Version_biVersionId', 'fk_TemplateType_biTemplateTypeId', 'mtTemplateAttributes'],
    						 		baseParams: {
    						 			CLASS: 'Jnms::Database::CommandResultTemplate',
    						 			TASK: 'statement',
    						 			TASKTYPE: 'immediate',
    						 			ACTION: 'list_all',
    						 			PREFIX: 'Database',
    						 			ROOT: 'data',
    						 			TYPE: 'standard'
    						 		}
    						 	},
    						 	Class: 'Jnms::Database::CommandResultTemplate',
    							viewConfig: {
    								forceFit: true
    							},
    							loadMask: true,
    							plugins: [new Ext.ux.grid.RowEditor({
    								saveText: 'Save',
    								listeners: {
    									'afteredit': function(e){
    										var editgrid = this.findParentByType('editgrid');
    										
    									},
    									'beforeedit': function(e){
    										var panel = e.findParentByType('managepanel');
    										var editgrid = panel.findByType('editgrid')[0];
    										var columnModel = editgrid.getColumnModel();
    										var selectionModel = editgrid.getSelectionModel();
    										
    									}
    								}
    							})],
    							
    							columns: [{
    								header: "Commands",
    								width: 100,
    								height: 50,
    								dataIndex: 'mtCommandTemplate',
    								editor: {
    									xtype: 'texteditarea',
    									listeners: {
    										focus: function(){
    											this.ownerCt.ownerCt.activeId = this.id;
    										},
    										blur: function(area){
    											this.ownerCt.ownerCt.activeId = this.id;
    										}
    									},
    									height: 50
    								}
    							}, {
    								header: "Results",
    								width: 100,
    								height: 50,
    								dataIndex: 'mtResultTemplate',
    								editor: {
    									xtype: 'texteditarea',
    									listeners: {
    										focus: function(){
    											this.ownerCt.ownerCt.activeId = this.id;
    										},
    										blur: function(area){
    											this.ownerCt.ownerCt.activeId = this.id;
    										}
    									},
    									height: 50
    								}
    							}],
    							
    							tbar: { 
    									xtype: 'topeditgridtoolbar',
    									items: [
    												{
    													text: 'Save Template',
    													xtype: 'button',
    													iconCls: 'icon-save',
    													listeners: {
    													'click': function(){	
    													}
    												}
    												},				
    												'->',				
    												{
    													text:'Add'
    													,xtype: 'button'
    													,iconCls:'add'
    													,listeners: {
    														'click': function(){
    															var grid = this.findParentByType('editgrid');
    															
    															if (grid) {
    																var u = new grid.store.recordType({
    																	mtCommandTemplate: '',
    																	mtResultTemplate: ''
    																});
    																grid.plugins[0].stopEditing();
    																var index = grid.store.getCount();
    																grid.store.insert(index, u);
    																grid.getView().refresh();
    																grid.getSelectionModel().selectRow(index);
    																//
    																grid.plugins[0].startEditing(index,index);
    																
    																
    															}
    															//grid.addBlankRecord();
    														}
    													}
    												},
    												'-',{
    													text:'Remove'
    													,xtype: 'button'
    													,iconCls:'del'
    													,listeners: {
    														'click': function(){
    															
    															var grid = this.findParentByType('editgrid');
    															
    															grid.plugins[0].stopEditing();
    													        var rec = grid.getSelectionModel().getSelected();
    													        if (!rec) {
    													            return false;
    													        }
    													        grid.store.remove(rec);
    															grid.getView().refresh();
    															grid.plugins[0].fireEvent('afteredit',this);
    															
    														}
    													}
    												}
    											]
    									}
    						}]
    				};
    		        
    		        // apply config
    		        Ext.apply(this, config);
    		        Ext.apply(this.initialConfig, config);
    		
    		        // }}}
    		 
    		        // call parent
    		        jnms.xtypes.panels.managePanel.superclass.initComponent.apply(this, arguments);
    		        // after parent code here, e.g. install event handlers
    		 
    		    }, // eo function initComponent
    			initEvents: function(){
    				jnms.xtypes.panels.managePanel.superclass.initEvents.call(this);
    			},
    			
    		    onRender:function() {
    		        // before parent code
    		        // call parent
    		        jnms.xtypes.panels.managePanel.superclass.onRender.apply(this, arguments);
    		        
    		 
    		    } // eo function onRender
    		    // }}}
    		    // any other added/overrided methods
    		}); // eo extend
    		 
    		// register an xtype with this class
    		Ext.reg('managepanel', jnms.xtypes.panels.managePanel);
    		
    		jnms.xtypes.viewport = Ext.extend(Ext.Viewport, {
      
    			 // configurables
    			 // anything that is here can be configured from outside
    			 layout:'border'
    			 
    			 ,style:'padding:5px;'
    			 ,initComponent:function() {
    			 
    				 var config = {
    				 	 id: 'jnmsViewport',
    				 	 layout: 'border',
    				 	 style: { 'padding-top' : '10px','padding-bottom' : '10px' },
    					 
    					 items: [{
    					 	xtype: 'managepanel'
    					 }]
    				 };
    			 
    			 
    				 // apply config
    				 Ext.apply(this, Ext.apply(this.initialConfig, config));
    				  
    				 // call parent
    				 jnms.xtypes.viewport.superclass.initComponent.apply(this, arguments);
    			 
    			 /* add handler to the links in the "JNMS CONTROL" menu on left */
    			
    			 } // e/o function initComponent
    			
    		     ,afterRender: function(){
    				jnms.xtypes.viewport.superclass.afterRender.apply(this, arguments);
    	
    			 }
    		  
    		}); // e/o extend
    		
    		
    		Ext.reg('jnmsviewport', jnms.xtypes.viewport);
    
    		</script>
            <!-- page specific -->
     
            <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
    
                Ext.namespace('jnms');
    
    			// create application
    			jnms.app = function() {
    			      // do NOT access DOM from here; elements don't exist yet
    			      // private variables
    			      // private functions
    			      // public space
    			      return {
    			      // public properties, e.g. strings to translate
    			      // public methods
    			            init: function() {
    			                      
    								   var jnmsViewport = new jnms.xtypes.viewport({});
    			         				
    			         	}
    			        }
          
    			}(); // end of app
            </script>
     
        </head>
        <body>
        	<script type="text/javascript">
            	Ext.onReady(jnms.app.init, jnms.app);
        	</script>
        </body>
    </html>

  5. #5
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    315
    Vote Rating
    0
    josh803316 is on a distinguished road

      0  

    Default


    Working showcase (from examples/problems/ directory):
    Steps to reproduce:
    1)Add two rows of text in each column
    2)Click the first column of the first row to edit again and then hit tab more than 5 times.

    Code:
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title id='title'>Title</title>
     
            <!-- ** CSS ** -->
            <!-- base library -->
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     
            <!-- overrides to base library -->
     
     
            <!-- ** Javascript ** -->
            <!-- base library -->
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all-debug.js"></script>
     		<script type="text/javascript" src="../../examples/ux/RowEditor.js"></script>
     
            <!-- overrides to base library -->
     
            <!-- extensions -->
     		<script type="text/javascript">
    		Ext.namespace('jnms');
    		Ext.namespace('jnms.xtypes.stores');
    		Ext.namespace('jnms.xtypes.forms');
    		Ext.namespace('jnms.xtypes.forms.textareas');
    		Ext.namespace('jnms.xtypes.grids');
    		Ext.namespace('jnms.xtypes.toolbars');
    		Ext.namespace('jnms.xtypes.panels');
    		Ext.namespace('jnms.viewport');
    		
    		jnms.xtypes.toolbars.topEditGridToolbar =  Ext.extend(Ext.Toolbar, {
    				 initComponent:function() {
    						var config = {
    						 	autoDestroy: true,
    							closable: true
    							
    						}; // eo config object
    						  
    						// apply config
    						Ext.apply(this, Ext.apply(this.initialConfig, config));
    				  		
    						
    				 		// call parent
    				 		jnms.xtypes.toolbars.topEditGridToolbar.superclass.initComponent.apply(this, arguments);
    		
    		 		}, // eo function initComponent
    		 		afterRender: function(){
    					jnms.xtypes.toolbars.topEditGridToolbar.superclass.afterRender.call(this);
    					
    					//this.findByType('button')[0].on('click', this.onAdd, this);
    					//this.findByType('button')[1].on('click', this.onDelete, this);
    				},
    		 		onRender: function(){
    		 			jnms.xtypes.toolbars.topEditGridToolbar.superclass.onRender.apply(this, arguments);
    		 		}
    		});
    		  
    		Ext.reg('topeditgridtoolbar', jnms.xtypes.toolbars.topEditGridToolbar); 
    		
    		
    		jnms.xtypes.stores.manageStore   = Ext.extend(Ext.data.JsonStore, {
    			constructor: function(config) {
    		        jnms.xtypes.stores.manageStore.superclass.constructor.call(this, Ext.apply({
    		            url: config.url,
    					id: config.id,
    					reader: new Ext.data.JsonReader({
    		        		totalProperty: 'total', 
    		        		fields: config.fields,
    						root: config.root
    		    		}),
    					baseParams: config.baseParams
    					//autoLoad: {params:{start: 0, limit: 25}}
    					//scope: this
    					
    		        }, config));
    				this.on('load', this.showSuccess, {
    					scope: this
    				});
    				//this.on('beforeload', this.beforeLoad, {
    				//	scope: this
    				//});
    				this.on('exception', this.showError, this);
    		    },
    			/**
    			* Shows Message Box with error
    			* @param {String} msg Message to show
    			* @param {String} title Optional. Title for message box (defaults to Error)
    			* @private
    			*/
    			showError:function(store,options,response,e) {
    				 //console.dir(response);
    				 title = 'Error';
    				 Ext.Msg.show({
    					 title:title
    					 ,msg:"Load exception for JSON store " + response.responseText 
    					 ,modal:true
    					 ,icon:Ext.Msg.ERROR
    					 ,buttons:Ext.Msg.OK
    				 }); //eo Msg.show
    			},
    			/**
    			* Shows Message Box with error
    			* @param {String} msg Message to show
    			* @param {String} title Optional. Title for message box (defaults to Error)
    			* @private
    			*/
    			beforeLoad:function(store,options,response,e) {
    				 
    				 
    			},
    		    /**
    			* Shows Message Box with error
    			* @param {String} msg Message to show
    			* @param {String} title Optional. Title for message box (defaults to Error)
    			* @private
    			*/
    			showSuccess:function(store, records, options) {
    				 //var obj = Ext.decode(response.responseText);
    				 var jsonData = store.reader.jsonData.data;
    				 //console.info(records);
    				 if (jsonData.failure === 'true') {
    				 	Ext.dropDownMessage.msg('Error','{0}','Request Failed:<br />' + jsonData.result,5);
    				 	//Ext.Msg.alert('Error', jsonData.result);
    				 }
    				 
    			}
    		    // }}}
    		    // any other added/overrided methods
    		}); // eo extend
    		 
    		// register an xtype with this class
    		Ext.reg('managestore', jnms.xtypes.stores.manageStore);
    		
    		jnms.xtypes.forms.textareas.editArea = Ext.extend(Ext.form.TextArea, {
    
    		    height: 100,
    		    initComponent:function() {
    		    	var config = {
    					selectOnFocus: true
    				    ,enableKeyEvents:true
    					
    		    	};	
    		        Ext.apply(this, Ext.apply(this.initialConfig, config));
    		        
    		        jnms.xtypes.forms.textareas.editArea.superclass.initComponent.apply(this, arguments);
    		
    		    } 
    			,initEvents: function(){
    				jnms.xtypes.forms.textareas.editArea.superclass.initEvents.call(this);
    				
    			}
    		    ,onRender:function() {
    		        jnms.xtypes.forms.textareas.editArea.superclass.onRender.apply(this, arguments);
    				//this.on('keyup',this.onFilter, this, {buffer: 500});
    		    }
    		   
    		}); // end of extend
    		
    		Ext.reg('texteditarea', jnms.xtypes.forms.textareas.editArea);
    		
    
    		// Edit grid 
    		jnms.xtypes.grids.editGrid =  Ext.extend(Ext.grid.EditorGridPanel, {
    				 
    				 initComponent:function() {
    						var config = {
    							 //closable: true,
    						 	 sm: new Ext.grid.RowSelectionModel({
    							 	singleSelect: true
    							 }),
    							 header:false,
    						     stripeRows: true
    							 
    						}; // eo config object
    						  
    						// apply config
    						Ext.apply(this, Ext.apply(this.initialConfig, config));
    				  		
    						
    				 		// call parent
    				 		jnms.xtypes.grids.editGrid.superclass.initComponent.apply(this, arguments);
    		
    		 		}, // eo function initComponent
    		 		initEvents: function(){
    					jnms.xtypes.grids.editGrid.superclass.initEvents.call(this);
    				},
    		 		onRender: function(){
    		 			this.store.baseParams.CLASS = this.Class;
    		 			jnms.xtypes.grids.editGrid.superclass.onRender.apply(this, arguments);
    					
    					//this.dz = new jnms.xtypes.grids.GridDropZone(this, {ddGroup:this.ddGroup || 'GridDD'});
    		 		},
    				/**
    				* Called when records are dropped on this grid
    		 		* @param {Ext.grid.GridPanel} srcGrid The source grid
    		 		* @param {Array} records Array of dropped records
    		 		*/
    				onRecordsDrop:Ext.emptyFn,
    				onSave: function(e){
    					
    				},
    				validateEdit: function(e){
    					//console.dir(e);
    					//console.log("Something was validated");
    				},
    				addBlankRecord: function() {
    			        var store = this.getStore();
    					//console.dir(store);
    			        var orec, row;
    			        if(store.recordType) {
    						//console.log("There is a record type");
    			            orec = new store.recordType();
    			            orec.data = {};
    			            orec.fields.each(function(field) {
    			                orec.data[field.name] = field.defaultValue;
    			            });
    			            orec.data.newRecord = true;
    			            orec.commit();
    			            store.add(orec);
    			
    			            row = store.indexOf(orec);
    			            if(row && undefined !== this.editOnAddCol) {
    			                this.startEditing(row, this.editOnAddCol);
    			            }
    			        }
    			    }
    		 		
    		 });
    		 
    		 Ext.reg('editgrid', jnms.xtypes.grids.editGrid); 
    		
    		
    		 
    		 jnms.xtypes.panels.managePanel   = Ext.extend(Ext.Panel, {
    		 
    			//id: 'managePanel',
    			title: this.title,
    			
    		    initComponent:function() {
    		        // {{{
    		        // hard coded (cannot be changed from outside)
    				
    		        var config = {
    					frame: true,
    					//id: this.id,
    					width: this.width,
    					height: this.height,
    					layout: 'border',
    					region: 'center',
    					items: [{
    							region: 'center',
    							xtype: 'editgrid',
    						 	header: true,
    						 	title: "Create/Update Command Templates",
    						 	height: 600,
    						 	store: {
    						 		xtype: 'managestore',
    						 		url: '/jnms/jnms/cgi/admin/control_comm.cgi',
    						 		root: 'data',
    						 		fields: ['mtCommandTemplate', 'mtResultTemplate', 'fk_ConnectionType_iConnectionTypeId', 'fk_Version_biVersionId', 'fk_TemplateType_biTemplateTypeId', 'mtTemplateAttributes'],
    						 		baseParams: {
    						 			CLASS: 'Jnms::Database::CommandResultTemplate',
    						 			TASK: 'statement',
    						 			TASKTYPE: 'immediate',
    						 			ACTION: 'list_all',
    						 			PREFIX: 'Database',
    						 			ROOT: 'data',
    						 			TYPE: 'standard'
    						 		}
    						 	},
    						 	Class: 'Jnms::Database::CommandResultTemplate',
    							viewConfig: {
    								forceFit: true
    							},
    							loadMask: true,
    							plugins: [new Ext.ux.grid.RowEditor({
    								saveText: 'Save',
    								listeners: {
    									'afteredit': function(e){
    										var editgrid = this.findParentByType('editgrid');
    										
    									},
    									'beforeedit': function(e){
    										var panel = e.findParentByType('managepanel');
    										var editgrid = panel.findByType('editgrid')[0];
    										var columnModel = editgrid.getColumnModel();
    										var selectionModel = editgrid.getSelectionModel();
    										
    									}
    								}
    							})],
    							
    							columns: [{
    								header: "Commands",
    								width: 100,
    								height: 50,
    								dataIndex: 'mtCommandTemplate',
    								editor: {
    									xtype: 'texteditarea',
    									listeners: {
    										focus: function(){
    											this.ownerCt.ownerCt.activeId = this.id;
    										},
    										blur: function(area){
    											this.ownerCt.ownerCt.activeId = this.id;
    										}
    									},
    									height: 50
    								}
    							}, {
    								header: "Results",
    								width: 100,
    								height: 50,
    								dataIndex: 'mtResultTemplate',
    								editor: {
    									xtype: 'texteditarea',
    									listeners: {
    										focus: function(){
    											this.ownerCt.ownerCt.activeId = this.id;
    										},
    										blur: function(area){
    											this.ownerCt.ownerCt.activeId = this.id;
    										}
    									},
    									height: 50
    								}
    							}],
    							
    							tbar: { 
    									xtype: 'topeditgridtoolbar',
    									items: [
    												{
    													text: 'Save Template',
    													xtype: 'button',
    													iconCls: 'icon-save',
    													listeners: {
    													'click': function(){	
    													}
    												}
    												},				
    												'->',				
    												{
    													text:'Add'
    													,xtype: 'button'
    													,iconCls:'add'
    													,listeners: {
    														'click': function(){
    															var grid = this.findParentByType('editgrid');
    															
    															if (grid) {
    																var u = new grid.store.recordType({
    																	mtCommandTemplate: '',
    																	mtResultTemplate: ''
    																});
    																grid.plugins[0].stopEditing();
    																var index = grid.store.getCount();
    																grid.store.insert(index, u);
    																grid.getView().refresh();
    																grid.getSelectionModel().selectRow(index);
    																//
    																grid.plugins[0].startEditing(index,index);
    																
    																
    															}
    															//grid.addBlankRecord();
    														}
    													}
    												},
    												'-',{
    													text:'Remove'
    													,xtype: 'button'
    													,iconCls:'del'
    													,listeners: {
    														'click': function(){
    															
    															var grid = this.findParentByType('editgrid');
    															
    															grid.plugins[0].stopEditing();
    													        var rec = grid.getSelectionModel().getSelected();
    													        if (!rec) {
    													            return false;
    													        }
    													        grid.store.remove(rec);
    															grid.getView().refresh();
    															grid.plugins[0].fireEvent('afteredit',this);
    															
    														}
    													}
    												}
    											]
    									}
    						}]
    				};
    		        
    		        // apply config
    		        Ext.apply(this, config);
    		        Ext.apply(this.initialConfig, config);
    		
    		        // }}}
    		 
    		        // call parent
    		        jnms.xtypes.panels.managePanel.superclass.initComponent.apply(this, arguments);
    		        // after parent code here, e.g. install event handlers
    		 
    		    }, // eo function initComponent
    			initEvents: function(){
    				jnms.xtypes.panels.managePanel.superclass.initEvents.call(this);
    			},
    			
    		    onRender:function() {
    		        // before parent code
    		        // call parent
    		        jnms.xtypes.panels.managePanel.superclass.onRender.apply(this, arguments);
    		        
    		 
    		    } // eo function onRender
    		    // }}}
    		    // any other added/overrided methods
    		}); // eo extend
    		 
    		// register an xtype with this class
    		Ext.reg('managepanel', jnms.xtypes.panels.managePanel);
    		
    		jnms.xtypes.viewport = Ext.extend(Ext.Viewport, {
      
    			 // configurables
    			 // anything that is here can be configured from outside
    			 layout:'border'
    			 
    			 ,style:'padding:5px;'
    			 ,initComponent:function() {
    			 
    				 var config = {
    				 	 id: 'jnmsViewport',
    				 	 layout: 'border',
    				 	 style: { 'padding-top' : '10px','padding-bottom' : '10px' },
    					 
    					 items: [{
    					 	xtype: 'managepanel'
    					 }]
    				 };
    			 
    			 
    				 // apply config
    				 Ext.apply(this, Ext.apply(this.initialConfig, config));
    				  
    				 // call parent
    				 jnms.xtypes.viewport.superclass.initComponent.apply(this, arguments);
    			 
    			 /* add handler to the links in the "JNMS CONTROL" menu on left */
    			
    			 } // e/o function initComponent
    			
    		     ,afterRender: function(){
    				jnms.xtypes.viewport.superclass.afterRender.apply(this, arguments);
    	
    			 }
    		  
    		}); // e/o extend
    		
    		
    		Ext.reg('jnmsviewport', jnms.xtypes.viewport);
    
    		</script>
            <!-- page specific -->
     
            <script type="text/javascript">
            Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
    
                Ext.namespace('jnms');
    
    			// create application
    			jnms.app = function() {
    			      // do NOT access DOM from here; elements don't exist yet
    			      // private variables
    			      // private functions
    			      // public space
    			      return {
    			      // public properties, e.g. strings to translate
    			      // public methods
    			            init: function() {
    			                      
    								   var jnmsViewport = new jnms.xtypes.viewport({});
    			         				
    			         	}
    			        }
          
    			}(); // end of app
            </script>
     
        </head>
        <body>
        	<script type="text/javascript">
            	Ext.onReady(jnms.app.init, jnms.app);
        	</script>
        </body>
    </html>

  6. #6
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    315
    Vote Rating
    0
    josh803316 is on a distinguished road

      0  

    Default


    I tried posting a working showcase and I'm waiting for it to be approved

  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,509
    Vote Rating
    374
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    It looks like a bug in RowEditor. Normally the focus should not leave the row editor so only tabbing through fields, save and cancel button should be allowed. Focus erroneously leaves the row editor and the whole thing breaks.

    Moving the thread to bugs.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    315
    Vote Rating
    0
    josh803316 is on a distinguished road

      0  

    Default


    Let me know if I can be of help testing out potential fixes.

  9. #9
    Ext User
    Join Date
    Nov 2007
    Posts
    3
    Vote Rating
    0
    andrejdo is on a distinguished road

      0  

    Default


    this code fix TAB only on row field. Aditional chek id field is readOnly focus next.
    PHP Code:
        onKey: function(fe){
         if(
    e.getKey() === e.ENTER){
          
    this.stopEditing(true);
          
    e.stopPropagation();
         }
         if(
    e.getKey() === e.TAB){
          
    e.stopEvent();
          var 
    form f.ownerCt;
          var 
    form.items.indexOf(f);
          var 
    last form.items.indexOf(form.items.last());
          do{
           
    i++;
           if( 
    >last-1i=0
           
    var field form.items.itemAt(i);
          }while(
    field.readOnly);
          
    field.focus(true,true);
         }
        } 

  10. #10
    Sencha User
    Join Date
    Jan 2010
    Posts
    168
    Vote Rating
    0
    Tumac is on a distinguished road

      0  

    Default


    Is this still an open issue? I am having this exact problem. Is the above code the fix. If so, does that go into overrides.js?