In extjs when trying to add xtype:'passwordfield' i'm getting this following error
Unrecognized class name / alias: widget.passwordfield
Synchronously loading 'widget.passwordfield'; consider adding Ext.require('widget.passwordfield') above Ext.onReady
According to your tag, you are using ExtJS 4. passwordfield is for ExtJS 6+ modern. So, in ExtJS 4 you would use:
{
allowBlank: false,
fieldLabel: 'User ID',
name: 'user',
emptyText: 'user id'
},
{
allowBlank: false,
fieldLabel: 'Password',
name: 'pass',
emptyText: 'password',
inputType: 'password'
}
Check the Login Form in the examples (and bookmark that page :-) ).
Related
description:when I create a formPanel,the console gives me an err:http://localhost:1841/ext/packages/core/src/field/Email.js?_dc=1599031706496 net::ERR_ABORTED 404 (Not Found). so I look up my app Items, there is no file of "Email.js", I think I shoud import the file to my app context,where shoud I get the Email.js enter image description here
question: I can't find the estjs's SDK of version 7 ,but the cmd.how could I down the SDK 7
Ext.define("MyApp.view.formpanel",{
extend:Ext.form.Panel,
xtype: 'formpanel',
renderTo: document.body,
buttons: {
submit: 'onSubmit'
},
requires:[
"Ext.field.Email"
],
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name'
}, {
xtype: 'emailfield',
name: 'email',
label: 'Email'
}, {
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}]
});
I am reading the extjs offical tutorial to create a login form, so I create following login form window:
Ext.define('MyApp.view.login.Login', {
extend: 'Ext.window.Window',
xtype: 'login',
requires: [
'Ext.form.Panel',
'Ext.form.field.Display',
'Ext.form.field.Text'
],
bodyPadding: 10,
title: 'Login Window',
closable: false,
autoShow: true,
items: {
xtype: 'form',
reference: 'form',
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}, {
xtype: 'textfield',
name: 'password',
inputType: 'password',
fieldLabel: 'Password',
allowBlank: false
}, {
xtype: 'displayfield',
hideEmptyLabel: false,
value: 'Enter any non-blank password'
}],
buttons: [{
text: 'Login',
formBind: true,
listeners: {
click: 'onLoginClick'
}
}]
}
});
here is the screenshot:
Please notice the "Login" button, it was wrapped by a gray background, but it was padding 10px white space with window.
How can bodyPadding do not padding the bottom button withou white space with the parent window? Just Like following picture:
I am using extjs6
Move the bodyPadding from the window down to the form. The body doesn't include docked items.
Fiddle.
I can't find a way to on/off check box in runtime in my fieldset definition:
{
xtype: 'fieldset',
title: 'Do you want to add text file?',
itemId: 'chorFileCheck',
checkboxToggle: true,
items: [
{
xtype: 'filefield',
name: 'document',
fieldLabel: 'File',
labelWidth: 50,
allowBlank: false,
anchor: '100%',
regex: Portal.Const.DOC_ACCEPTED,
buttonText: 'Choose ...'
}
],
listeners: {
I can handle this check box by hand but can't find a way to do it in my code (make it in runtime). Prompt me please how to do it.
You need to use collapse() and expand() methods of fieldset to uncheck & check the checkbox respectively.
For Unchecking the checkbox:
Ext.ComponentQuery.query("#chorFileCheck")[0].collapse();
For Checking the checkbox:
Ext.ComponentQuery.query("#chorFileCheck")[0].expand();
I have a form panel in http://jsfiddle.net/7CLWy/
here is my important code
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
allowBlank: false,
msgTarget: 'under',
name: 'firstName'
}, {
xtype: 'datefield',
allowBlank: false,
fieldLabel: 'Start date',
msgTarget: 'under'
}],
I want change default message error in field
How to change that. Thanks
The blankText property is the validation message when a field is required, and invalidText is the text when the field generically fails validation. You can add your own custom messages in these properties. Similarly, if you happened to be doing regex-based validation with the regex property, you could use the regexText field to provide a custom validation message.
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
allowBlank: false,
msgTarget: 'under',
name: 'firstName',
blankText: 'This should not be blank!'
}, {
xtype: 'datefield',
allowBlank: false,
fieldLabel: 'Start date',
msgTarget: 'under',
invalidText: 'This value is not a valid date!'
}, {
xtype: 'textfield',
fieldLabel: 'Digits followed by A,B,or C',
msgTarget: 'under',
name: 'someText',
regex: /^\d+[ABC]$/,
regexText: 'This must be a string of digits followed by A, B, or C!'
}]
msgTarget: 'side' will Add an error icon to the right of the field, displaying the message in a popup on hover only.
if you read the documentation carefully, one more option is there for msgTarget http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text-cfg-msgTarget
[element id] Add the error message directly to the innerHTML of the specified element. you have to add a "td" to the right side of the control dynamically with the id. then if you specify msgTarget: 'element id' it will work.
reference ->ExtJS4: How to show validation error message next to textbox, combobox etc
we can use validator method and return the custom message.
{
xtype: 'textfield',
fieldLabel: 'Digits followed by A,B,or C',
msgTarget: 'under',
name: 'someText',
validator : function(value){
var regex= /^\d+[ABC]$/;
if(!regex.test(value)){
return "'This must be a string of digits followed by A, B, or C!'"
}
return true;
}
}
To change the default active error message we use setActiveError( msg ).you see the following code.
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
allowBlank: false,
id:'fn',
msgTarget: 'under',
name: 'firstName',
}, {
xtype: 'datefield',
allowBlank: false,
fieldLabel: 'Start date',
msgTarget: 'under',
}
],
renderTo: Ext.getBody()
});
var m = Ext.getCmp('fn');
m.setActiveError("important"); //can change the text
This is something that I found in the tutorials
items: [{
anchor: '100%',
xtype: 'multiselect',
msgTarget: 'side',
fieldLabel: 'Multiselect',
name: 'multiselect',
id: 'multiselect-field',
allowBlank: false,
store: {
fields: ['number', 'numberName'],
proxy: {
type: 'ajax',
url: 'Numbers',
reader: 'array'
},
autoLoad: true
},
valueField: 'number',
displayField: 'numberName',
value: ['3', '4', '6'],
ddReorder: true
}];
But when I tried it in my code error occurred. Is there something else that needs to be done additional to just changing xtype from combo to multiselect to make it a mutiselect?
{
xtype: 'combo',
fieldLabel: 'Reporting Manager',
labelWidth: '130px',
store: 'LeaveRequest',
displayField: 'reportingmanager',
afterLabelTextTpl: required,
name: 'reportingmanager',
allowBlank: false,
//dockedItems: 'multiselect-field',
afterLabelTextTp1: required
}
Multiselect is an user extended class, If you look at the begining of the code in the tutorials the ux files are included.
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.form.Panel',
'Ext.ux.form.MultiSelect',
'Ext.ux.form.ItemSelector'
]);
You need to include those files in order for the multiselect to work
<script type="text/javascript" src="extjs/examples/ux/form/MultiSelect.js"></script>
<script type="text/javascript" src="extjs/examples/ux/form/ItemSelector.js"></script>
Check in your firebug/developer tools if this files are loaded , and then you can use xtype multiselect;