Extending FornPanel

[aitch]

Hi, everyone.

I coded a class with which extends FormPanel:

Ext.define('ui.LoginForm',{
	
	extend:'Ext.form.FormPanel',
	alias: 'widget.ui.loginform',
	
	title:'Login Form',
	width:250,
	usernameTxt:null,
	passwordTxt:null,
	renderTarget:'container',
	usernameFL:'Username', //username field label
	usernameFN:'username', //username field name
	passwordFL:'Passowrd', //password field label
	passwordFN:'password', //password field name
	fieldWidth:200,
	labelAlign:'right',
	labelWidth:50,
	submitBtnText:'submit',
	cancelBtnText:'cancel',
	waitMsg:'Login...',
	waitTitle:'Sending...',
	style:'margin-left:auto;margin-right:auto',
	padding:'10px;',
	url:'',
	
	constructor:function(config){
		//Apply the configs 
		config =  Ext.apply(this, config);
		
		if(typeof config.url == 'undefined' ||
		   config.url == ''){
			throw "LoginForm must have URL to which submit the form";
		}
		
		this.callParent(arguments);
		
		return this;
	}, //eo constructor()
	
	initComponent:function(){
		
		//Username TextField
		var usernameTxt = { xtype:'textfield',
			name:this.usernameFN,
			fieldLabel:this.usernameFL,
			labelWidth:this.labelWidth,
			width:this.fieldWidth,
			labelAlign:this.labelAlign,
			allowBlank: false,
            blankText:'Required',
            minLength: 4,
            msgTarget:'under'
		};
		
		//Password TextField
		var passwordTxt = { xtype:'textfield',
			name:this.passwordFN,
			fieldLabel:this.passwordFL,
			labelWidth:this.labelWidth,
			width:this.fieldWidth,
			labelAlign:this.labelAlign,
			inputType:'password',
			allowBlank: false,
            blankText:'Required',
            minLength: 4,
            msgTarget:'under'
		};
		
		//Submit button
		var submitBtn = Ext.createWidget('button', {
			text:this.submitBtnText,
			scope:this,
			handler:this.onSubmitClickhandler,
			formBind:true
		});
		
		//Cancel button
		var cancelBtn = Ext.createWidget('button', {
			text:this.cancelBtnText,
			scope:this,
			handler:this.onCancelClickHandler
		});
		
		this.items = [  
		               usernameTxt,
		               passwordTxt];
		this.buttons =[
		               submitBtn,
		               cancelBtn
		               ];
		
		this.callParent();
		
		return this;
	},//eo initComponent()
	
	//Public methods
	renderForm:function(){
		this.render(this.renderTarget);
	},//eo renderForm()
	
	onSubmitClickhandler:function(btn, evt){
		var form = this.getForm();
		if(!form.isValid()){
			Ext.Msg.alert('Form Error', 'Correct the fields');
			return;
		}
		
		console.dir(this.getForm());
		
		
		form.submit({
			waitTitle:this.waitTitle,
			waitMsg:this.waitMsg,
			scope:this,
			success:function(form, action){
				var alertConfig = {
					title:'Success',
					icon: Ext.window.MessageBoxWindow.INFO,
					msg:'Login..'
				};
				Ext.Msg.show(alertConfig);
			},//eo success()
			failure:function(form, action){
				
				var alertConfig = {
					title:'Error',
					icon: Ext.window.MessageBoxWindow.ERROR,
					buttons: Ext.Msg.OK,
					msg:''
				};
				
				switch (action.failureType) {
					case Ext.form.action.Action.CLIENT_INVALID:
						alertConfig.msg = 'Form with wrong values';
		                break;
		            case Ext.form.action.Action.CONNECT_FAILURE:
		            	alertConfig.msg = 'Ajax Error';
		                break;
		            case Ext.form.action.Action.SERVER_INVALID:
		            	alertConfig.msg = 'Details：'+action.result.msg;
				}
				
				Ext.Msg.show(alertConfig);
				
			}//eo failure()
		});//eo submit()
		
	},//eo onSubmitClickhandler()
	
	onCancelClickHandler:function(btn, evt){
		evt.stopEvent();
		var form = this.getForm();
		form.reset();
	}//eo onCancelClickHandler()
});

Each time I clicked the submit button, and FireBug tells me that the this.form is undefined! What am I suppose to overwrite to make the submit() work?

[jay@moduscreate.com]

try this.submit instead of this.form.submit. for some reason the basic form instance submit method is identical to the formpanel submit method. :-\

[steffenk]

are you sure that you are in the right scope? From the examples they use this inside the handler:

this.up('form').getForm()