1. #1
    Ext User
    Join Date
    May 2007
    Posts
    6
    Vote Rating
    0
    qqeerr20012001 is on a distinguished road

      0  

    Default why 'afteredit' event can't fire in my editorgrid

    why 'afteredit' event can't fire in my editorgrid


    Hi:
    i have create a editorgrid like this :

    Code:
        // create the Grid
            var grid = new Ext.grid.EditorGrid('grid-menu', {
                ds: ds,
                cm: colModel,
                listeners:{
                	'afteredit':function(oe){
                		alert("after edit");
                		alert("field"+ oe.field + "   value: "+ oe.value+" originalValue:" + oe.originalValue);
                		// return true; 
                	},
                	'validateedit':function(){
                		return true;
                	}
                }
            });
    but i try many times ,the 'afteredit' event can't fire,please help me.Thanks.
    Last edited by Animal; 6 Jun 2007 at 3:08 AM. Reason: Please use [code][/code] tags

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    I just tested that syntax with the editor grid example and it works correctly. You'll have to post more of your code to determine what you might be doing wrong.

  3. #3
    Ext User
    Join Date
    May 2007
    Posts
    6
    Vote Rating
    0
    qqeerr20012001 is on a distinguished road

      0  

    Default ALL code

    ALL code


    1>I create one combox and when I select of it ,it will fire 'select' event.
    2>In 'select' event handler,I create editor grid.
    Code:
    //---use DWR to get data for comobx
    var Data4Como = function(){
     return{
     	callMethod:
     	 function callMethod(){
     		//alert("callmethod");
        	menuService.getMenus("",this.callBackMethod);
       },
     
       callBackMethod:
        function callBackMethod(data){
       		// alert("callBackMethod");
        	DWRUtil.removeAllOptions("menus");
       		DWRUtil.addOptions("menus",["please select"]);
        	DWRUtil.addOptions("menus",data,"menu","name");
        	setMenus();
       }
      
       
     }
    }
    //------------------grid--------------------------------//
    
    
    var tgrid;  //one reference to grid 
    
     function setMenus(){
        var converted = new Ext.form.ComboBox({
            typeAhead: true,
            triggerAction: 'all',
            transform:'menus',
            width:135,
            listeners:{
            	'select':function(combo,record,index){
            		
            		var value = combo.getValue();
    		       var ds = new Ext.data.Store({
    		        proxy: new Ext.data.HttpProxy(
                                                     {url:"http://localhost:8080/de/MenuManage?id="+value,
    		        							    extraParams:{test:'test'},
    		                                        params:{action:'new',id:value},//can't send to server ,what's reason?
    		                                        success: function (f,a) {alert('sucess'+a.result);},
                									failure: function()                                       {alert('invalid');},
                									method:'POST'
    		                            }),
    		        reader: new Ext.data.JsonReader( { totalProperty: "total",root: "rows"},
                          [ {name: 'text'},
                           { name: 'id'},
                           { name: 'hreftarget'}
                 		  ])
    		 });
    	
           
    
    		// example of custom renderer function
            function italic(value){
                return '<i>' + value + '</i>';
            }
    
    		// example of custom renderer function
            function change(val){
                if(val > 0){
                    return '<span style="color:green;">' + val + '</span>';
                }else if(val < 0){
                    return '<span style="color:red;">' + val + '</span>';
                }
                return val;
            }
    		// example of custom renderer function
            function pctChange(val){
    		
    		        return '<span style="color:green;">' + val + '</span>';
    		   
    		    return val;
    		}
    		var  fm = Ext.form,Ed = Ext.grid.GridEditor;
    		// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
            // custom or reusable ColumnModels
            var colModel = new Ext.grid.ColumnModel([
    			{header: "Name", width: 200, sortable: true, locked:false, dataIndex: 'text',
    				editor: new Ed(new fm.TextField({
                   			allowBlank: false
               			}))
               	},
    			{header: "ID", width: 85, sortable: true,  dataIndex: 'id',
    				editor: new Ed(new fm.TextField({
                   			allowBlank: false
               			}))
    			},
    			{header: "URL", width: 240, sortable: true, renderer: change, dataIndex: 'hreftarget',
    				editor: new Ed(new fm.TextField({
                   			allowBlank: false
               			}))
               	}
    		]);
    		
            
            // create the Grid
            var grid = new Ext.grid.EditorGrid('grid-menu', {
                ds: ds,
                cm: colModel,
                 selModel: new Ext.grid.RowSelectionModel(),
                listeners:{//I don't know why this can't fire 
                	'afteredit':function(oe){
                		alert("after edit");
                		alert("field"+ oe.field + "   value: "+ oe.value+" originalValue:" + oe.originalValue);
                		// return true; 
                	},
                	'validateedit':function(){
                		return true;
                	}
                }
            });
            
           // grid.on(, this, true); 
             ds.load({params:{start:0, limit:5}});
            //for reused grid,should destroy tgrid which is ref to grid
            if(tgrid!=null){
            	tgrid.destroy(true);
            }
            tgrid = grid;
           
            var layout = Ext.BorderLayout.create({
                center: {
                    margins:{left:3,top:3,right:3,bottom:3},
                    panels: [new Ext.GridPanel(grid)]
                }
            }, 'grid-panel');
            gridpanel=layout;
            grid.render();
            
            //grid.getSelectionModel().selectFirstRow();
            var gridFoot = grid.getView().getFooterPanel(true);
    
        	var paging = new Ext.PagingToolbar(gridFoot, ds, {
            	pageSize: 5,
            	displayInfo: true,
            	displayMsg: 'Displaying results {0} - {1} of {2}',
           		emptyMsg: "No results to display"
       		 });
            
           
    	    
            	}
            },
            forceSelection:true
        });
       }
       
    //----------start up -------
    Ext.onReady(
    	function(){
    		var tt = new Data4Como();
    		tt.callMethod();
    	
    	}
    );

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    I gotta say that's one ugly mess. You need to take a step back, simplify things, and get to a point where you can debug/test small chunks of what you're doing to verify that it works. The examples are meant to demonstrate bits of functionality - they're certainly not intended to exhibit best practices and continuing to shoehorn more functionality into them is going to make your life difficult. Also, while the ability to inline listeners is very powerful, using it as your doing makes your code that much more difficult to follow.

  5. #5
    Ext User
    Join Date
    May 2007
    Posts
    6
    Vote Rating
    0
    qqeerr20012001 is on a distinguished road

      0  

    Default refactor

    refactor


    thanks for your reply.
    Iwill try to refator my codes.

  6. #6
    Ext User
    Join Date
    May 2007
    Posts
    6
    Vote Rating
    0
    qqeerr20012001 is on a distinguished road

      0  

    Default refactored codes

    refactored codes


    Hi:
    I refactor my codes.hope you will like this style.
    and I find a thread about 'afteredit' event,it's link
    http://extjs.com/forum/showthread.ph...ight=afteredit
    Code:
    	//------------------grid--------------------------------//
       var grid4Menu=function(){
    		var ds;
    		var colModel;
    		
    		var tgrid;//reference to grid
    		var  fm = Ext.form,Ed = Ext.grid.GridEditor;
    	 
    		function createDataStore(value){
    		  ds = new Ext.data.Store({
    			        //proxy: new Ext.data.MemoryProxy(myData),
    			        //new Ext.data.HttpProxy({url:'http://localhost:8080/de/extpages/griddata.jsp',
    			        proxy: new Ext.data.HttpProxy(
    			        			       {url:"http://localhost:8080/de/MenuManage?id="+value,
    			        				extraParams:{test:'test'},
    			                                        params:{action:'new',id:value},//can't send to server ,what's reason?
    			                                        success: function (f,a) {alert('sucess'+a.result);},
    	            						failure: function() {alert('invalid');},
    	            						method:'POST'
    			                            }),
    			        reader: new Ext.data.JsonReader( { totalProperty: "total",root: "rows"},
    	                      [ {name: 'text'},
    	                       { name: 'id'},
    	                       { name: 'hreftarget'}
    	             		  ])
    			 });
    		  ds.load({params:{start:0, limit:5}});//start page and records of page
    		}
    		
    		function getDataStore(){
    			return ds;
    		}
    		
    		
    		function createColumnModel(){
    			colModel = new Ext.grid.ColumnModel([
    				{header: "NAME", width: 200, sortable: true, locked:false, dataIndex: 'text',
    					editor: new Ed(new fm.TextField({
    	               			allowBlank: false
    	           			}))
    	           	},
    				{header: "ID", width: 85, sortable: true,  dataIndex: 'id',
    					editor: new Ed(new fm.TextField({
    	               			allowBlank: false
    	           			}))
    				},
    				{header: "URL", width: 240, sortable: true, dataIndex: 'hreftarget',
    					editor: new Ed(new fm.TextField({
    	               			allowBlank: false
    	           			}))
    	           	}
    			]);
    		}
    		
    		
    		
    	//------------------- Render function for column--START-------------------
    	        function italic(value){
    	            return '<i>' + value + '</i>';
    	        }
    	
    			
    			
    	//------------------- Render function for column-END--------------------		
    		
    		
    		function createGrid(ds,colModel){
    		  grid = new Ext.grid.EditorGrid('grid-menu', {
    	            ds: ds,
    	            cm: colModel,
    	            selModel: new Ext.grid.RowSelectionModel(),
    	            listeners:{
    	            	'afteredit':function(oe){
    	            		alert("after edit");
    	            		alert("field"+ oe.field + "   value: "+ oe.value+" originalValue:" + oe.originalValue);
    	            		// return true; 
    	            	},
    	            	'validateedit':function(){
    	            		return true;
    	            	}
    	            }
    	        }); 
    	    
    		}
    		
    		
    	   function createPagintoolbar(grid,ds){
    		    var gridFoot = grid.getView().getFooterPanel(true);
    	
    	    	  var paging = new Ext.PagingToolbar(gridFoot, ds, {
    	        	pageSize: 5,
    	        	displayInfo: true,
    	        	displayMsg: 'Displaying results {0} - {1} of {2}',
    	       		emptyMsg: "No results to display"
    	   		 });
    		}
    		  
    		
    		function setMenus(){
    		 	var converted = new Ext.form.ComboBox({
    		        typeAhead: true,
    		        triggerAction: 'all',
    		    	transform:'menus',
    		    	width:135,
    		    	listeners:{
    		    		'select':function(combo,record,index){
    		    					var value = combo.getValue();
    								refreshGrid(value);
    		    		}
    		    	},
    		        forceSelection:true
    		  	  });
    		}
    		
    
    
    		function   refreshGrid(value){
    	 
    		       createDataStore(value);
    		      
    		       createColumnModel();
    		       
    		       createGrid(ds,colModel);
    		         
    		        //for reuse grid's DOM,so destroy reference of grid
    		        if(tgrid){
    		        	tgrid.destroy(true);
    		        }
    		        tgrid = grid;
    		       
    		        var layout = Ext.BorderLayout.create({
    		            center: {
    		                margins:{left:3,top:3,right:3,bottom:3},
    		                panels: [new Ext.GridPanel(grid)]
    		            }
    		        }, 'grid-panel');
    		        
    		       
    		        
    		        grid.render(); 
                    createPagintoolbar(grid,ds);
    		}
    		return {
    		callMethod:
    			 	 function callMethod(){
    						menuService.getMenus("",this.callBackMethod);
    			   	 },
    	 
    	   	callBackMethod:
    			    function callBackMethod(data){
    			   		// alert("callBackMethod");
    					DWRUtil.removeAllOptions("menus");
    					DWRUtil.addOptions("menus",["please select"]);
    					DWRUtil.addOptions("menus",data,"menu","name");
    			    	setMenus();
    			   }
    	   
    	}
     }();	
    	
    	//----------start up -----------------------------------------------//
    	Ext.onReady(
    		grid4Menu.callMethod,grid4Menu,true
    	);

  7. #7
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    I did not walk through your code. Anyway here an example that works. Hope it helps you...
    PHP Code:
                grid = new Ext.grid.EditorGrid(gridId, {
                    
    dsds,
                    
    cmcm,
                    
    selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
                    
    enableColLockfalse,
                    
    loadMasktrue
                
    });

                
    // render it
                
    grid.render();
                
    // TODO some validation
                
    function validateInput(record) {
                    
    console.log(record);
                }
                
    //grid.on('afteredit', validateInput, this);

                
    grid.on('validateedit'validateInputthis); 
    Regards

    Wolfgang

  8. #8
    Ext User
    Join Date
    Jul 2007
    Posts
    4
    Vote Rating
    0
    Eloy Vieira is on a distinguished road

      0  

    Default


    Quote Originally Posted by qqeerr20012001 View Post
    Hi:
    i have create a editorgrid like this :

    Code:
        // create the Grid
            var grid = new Ext.grid.EditorGrid('grid-menu', {
                ds: ds,
                cm: colModel,
                listeners:{
                	'afteredit':function(oe){
                		alert("after edit");
                		alert("field"+ oe.field + "   value: "+ oe.value+" originalValue:" + oe.originalValue);
                		// return true; 
                	},
                	'validateedit':function(){
                		return true;
                	}
                }
            });
    but i try many times ,the 'afteredit' event can't fire,please help me.Thanks.

    Hi, this function runs 100% in my aplication thanks! i just have 1 doubt..hope you can help me.
    when i get the data "oe.field" it's ok.. but if i have a datagrid with 2 columns (ID, name) and just field (name ) is editable.. how can i get the (ID) data of the same row .. i want to know this function cause i need to put in php to update in mysql ID=row etc..etc..

    Eloy

  9. #9
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    use the record object, so you have access to all data of this record.
    example:
    myfieldname1value = record.data.myfieldname1
    myfieldname2value = record.data.myfieldname2

    however i suggest that you use use the set/get methods for records instead accessing data directly.
    look to the docs for datastore for more details or use firebug, set a BP and inspect the record object.

    Regards

    Wolfgang