PDA

View Full Version : Using ref property with vtype in a pre-configured component?



cef_chall
20 Jun 2010, 11:48 AM
Hi,

As a tutorial exercise, I am attempting to build a simple Registration form component by extending FormPanel, and using a vtype to handle the password confirmation. Since I want this component to be reusable, I wish to use either the ref or itemId config option to pass as the initialPasswordField of my vtype (see highlighted code below). Normally, I would access the ref via the form panel. However, since I am constructing the component (so the items property does not yet exist) I cannot find a way to get to the ref other than through the initialConfig property. Is my understanding correct?

My vtype function

Ext.apply(Ext.form.VTypes, {
password: function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField); //this will need to be changed once using ref property
return (val == pwd.getValue());
}
return true;
},
passwordText: 'Incorrect password<br/>The passwords entered do not match!'
});My registration form


MyApplication.RegistrationForm = Ext.extend(Ext.FormPanel, {
//configurable props
border:false,
frame: true,
title:'Register New User',
labelAlign: 'right',
labelWidth: 85,
height: 200,
width: 420,
waitMsgTarget: true,
defaults: { msgTarget: 'side'}

,initComponent:function() {

var config = {
url: '/register'
,bodyStyle:'padding:5px 5px 0,'
,method: 'post'
,items: [{
xtype: 'textfield',
name: 'userId',
ref: 'userId',
fieldLabel: 'User id',
emptyText: 'User ID',
blankText: 'Enter your user ID',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
ref: 'password', //this should be used in the vtype rather than id below
id : ' password', //this needs to be removed before this component will be reusable
inputType: 'password',
fieldLabel: 'Password',
minLength: 8,
maxLength: 32,
minLengthText: 'Password must be at least 8 characters long.',
regex: '^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$',
regexText: 'Passwords must have at least one digit (0-9), one uppercase (A-Z),and one lowercase (a-z)',
allowBlank: false
}, {
xtype: 'textfield',
name: 'confirmPwd',
ref: 'confirmPwd',
inputType: 'password',
fieldLabel: 'Confirm Password',
minLength: 8,
maxLength: 32,
minLengthText: 'Password must be at least 8 characters long.',
vtype: 'password', initialPassField: password,
allowBlank: false
}, {
xtype: 'textfield',
name: 'firstName',
ref: 'firstName',
fieldLabel: 'First Name',
allowBlank: false
}, {
xtype: 'textfield',
name: 'lastName',
ref: 'lastName',
fieldLabel: 'Last Name',
allowBlank: false
}]
,buttons:[{
text: 'Reset',
scope: this,
handler: this.onResetClick
}, {
text: 'Register',
scope: this,
handler: this.submit
}]
}; // end config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

MyApplication.RegistrationForm.superclass.initComponent.apply(this, arguments);

// add listeners
}

/**
* Submits the form. Called after Submit buttons is clicked
* @private
*/
,submit:function(submitAction) {

var form = this.getForm();

if (form.isValid()) {
this.getForm().submit({
url:this.url
,scope:this
,success:this.onSuccess
,failure:this.onFailure
,params:{cmd:'save'}
,submitEmptyText: false
,waitMsg:'Sending data...'
});
} else {
Ext.MessageBox.alert('Login Error', 'Please fix the errors noted.');
}
} // eo function submit

,onResetClick:function() {
this.getForm().reset();
} //End onResetClick()

/**
* Success handler
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
* @private
*/
,onSuccess:function(form, action) {
Ext.Msg.show({
title:'Success'
,msg:'Registration Completed'
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});

//go to application

} // eo function onSuccess

/**
* Failure handler
* @param {Ext.form.BasicForm} form
* @param {Ext.form.Action} action
* @private
*/
,onFailure:function(form, action) {

switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
this.showError("Form fields may not be submitted with invalid values", "Failure");
break;
case Ext.form.Action.CONNECT_FAILURE:
this.showError("Ajax communication failed" + action.response.responseText, "Failure");
break;
case Ext.form.Action.SERVER_INVALID:
this.showError("Server validation failure", "Failure");
break;
case Ext.form.Action.LOAD_FAILURE:
this.showError("Ajax load failed", "Failure");
break;
default:
this.showError(action.result.error || action.response.responseText);
}
} // end onFailure()

/**
* 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(msg, title) {
title = title || 'Error';
Ext.Msg.show({
title:title
,msg:msg
,modal:true
,icon:Ext.Msg.ERROR
,buttons:Ext.Msg.OK
});
} //End showError()
});
Ext.reg('registrationformpanel', MyApplication.RegistrationForm);