Extjs 4 中，表單的回車事件

可以提交，可以執行其它函數。

代碼節選如下：

       // 監聽回車
        listeners: {
            afterRender: function(thisForm, options){
                this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
                    enter: function(){

                		// 篩選表格
            			var btn = Ext.getCmp('filter_button');
            			btn.handler() ;
            			console.log( this );
                	},
                    scope: this
                });
            }
        },

完整的代碼如下：

    // 篩選表單
    // ============================
    var filterForm = Ext.widget({
        xtype: 'form',
        layout: 'form',
        collapsible: true,
        id: 'filterForm',
        url: '',
        frame: true,
        title: '篩選條件',
        bodyPadding: '5 5 0',
        margin: 5,
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        defaultType: 'textfield',
        
        // 監聽回車
        listeners: {
            afterRender: function(thisForm, options){
                this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
                    enter: function(){

                		// 篩選表格
            			var btn = Ext.getCmp('filter_button');
            			btn.handler() ;
            			console.log( this );
                	},
                    scope: this
                });
            }
        },
        
        items: [{
            fieldLabel: 'Parent id',
            id: 'parent_id',
            name: 'parent_id',
            allowBlank: true
        },{
            fieldLabel: 'code',
            id: 'code',
            name: 'code',
            allowBlank: true,
            listeners : {
	            specialkey : function(field, e) {
        	
        			console.log( e.getKey() );
        			
            		var btn = Ext.getCmp('filter_button');

            		console.log( btn );
            		
	                if (e.getKey() == Ext.EventObject.ENTER) {
	                  //doLogin();
	            		
	            		//btn.handler() ; // 回車篩選數據。
	            		
	                }
	            } // end of specialkey
        	} // end of listeners
            
            
            
            
        },{
            fieldLabel: 'name',
            id: 'name',
            name: 'name',
            allowBlank: true
        }],

        buttons: [{
        	id: 'filter_button' ,
            text: 'Filter',
            handler: function(){
        	
        	console.log( 'doFilter() function start.' );

        	
        	// 表單有效
            this.up('form').getForm().isValid();
        	//filterForm.isValid();
            
            //console.log( this.up('form').getForm() );
            
            // 輸入值
        	var parent_id = Ext.getCmp('parent_id').getValue();
            console.log( parent_id );
            
        	var code = Ext.getCmp('code').getValue();
            console.log( code );
            
        	var name = Ext.getCmp('name').getValue();
            console.log( name );

        	// 加載數據
        	store.load({
        		params:
        		{ 
        			 start:0
        			,limit:25
        		}
        	});
        }
        },{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }]
    });