In the process of developing a web application, I have decided to include a password strength meter feature. While there are numerous examples available, such as this one, I am encountering difficulties implementing the solution using Sencha Architect. My aim is to incorporate this version of the solution.
Up to this point, I have integrated the password meter code into my resources folder as follows:
Located within my resources/scripts folder is the
Ext.ux.form.field.PasswordMeter.jsExt.define('Ext.ux.form.field.PasswordMeter', {
extend: 'Ext.form.field.Text',
alias: 'widget.ux.passwordmeterfield',
inputType: 'password',
// More code here...
});
However, I am struggling with the implementation of the following section:
Ext.onReady(function() {
var form = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 400,
margin: 20,
items: [{
xtype: 'ux.passwordmeterfield',
labelAlign: 'left',
fieldLabel: 'Password',
name: 'foo',
anchor: '100%',
margin: '0 0 20 0',
}]
});
form.render(document.body);
});
The critical aspect involves adding the items block. However, in Sencha Architect, I am facing constraints in directly entering values in the code section of my view. Additionally, I am unable to specify the reserved xtype value.
How can I effectively integrate user extensions/plugins using Sencha Architect without resorting to creating a user extension (.aux) file?
PS. I prefer to avoid converting it into a user extension file if possible.