1. #1
    Sencha User
    Join Date
    Jan 2011
    Posts
    7
    Vote Rating
    0
    aitch is on a distinguished road

      0  

    Question Extending FornPanel

    Extending FornPanel


    Hi, everyone.

    I coded a class with which extends FormPanel:

    Code:
    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?

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  3. #3
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    are you sure that you are in the right scope? From the examples they use this inside the handler:
    Code:
    this.up('form').getForm()
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

Similar Threads

  1. Error when extending
    By paulharv in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 7 May 2010, 6:35 AM
  2. FornPanel Button Layout
    By RyanZec in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 29 Oct 2008, 5:47 AM
  3. Extending DatePicker
    By Eldhelrim in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 9 Apr 2008, 9:05 PM
  4. Extending Myself and Ext
    By zombeerose in forum Community Discussion
    Replies: 2
    Last Post: 4 Apr 2008, 7:55 AM
  5. Extending
    By JohnT in forum Community Discussion
    Replies: 5
    Last Post: 23 Oct 2006, 7:42 PM

Thread Participants: 2

Tags for this Thread