I need spellcheck in an extjs textfield. A textarea doesn't work because I need it to only allow a user to enter a single line of input - no enter key. Any way to enable spellcheck for the textfield?
I found a way to get around the single line requirement and use a textarea, which by default uses spellcheck. To force the textarea to be a single line add this to your textarea:
xtype: 'textarea',
grow: true,
growMax: 32,
enableKeyEvents: true,
listeneters: {
keydown: 'disableNewLine'
}
And in your controller, add the function to disable the new line.
disableNewLine: function(textarea, e, eOpt) {
if(e.keyCode == 13) {
e.stopEvent();
}
}
This prevents the user from adding a new line to their input just like a textfield would, but utilizes spellcheck. Also, 32 is the default height of a textfield, so it looks the exact same. Just setting the height doesn't work, the default seems to override that.
You can add it after the component is rendered.
Also make sure the browser you are using supports spell check.
http://caniuse.com/#search=spellcheck
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
listeners: {
afterrender: function(cmp) {
cmp.getEl().set({
"spellcheck": 'true'
});
}
}
}
see api
inputAttrTpl: 'autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"'
It works fine under safari!
This override worked fine for me with ExtJS6 & Chrome:
Ext.define('Ext.overrides.form.field.Text',{
override: 'Ext.form.field.Base',
/**
* Ensure all text fields have spell check disabled
*/
inputAttrTpl: [
'spellcheck=false'
],
constructor: function () {
this.callParent(arguments);
}
});
Related
When maximizing/restoring a dialog that contains some form fields with names, like:
Ext.create('Ext.Dialog', {
maximizable: true,
items: {
xtype: 'textfield',
name: 'id',
bind: '{record.id}'
},
buttons: [{
text: 'Save',
bind: {
disabled: '{!record.valid}'
}
}]
}).show();
we're getting an error:
Ext.mixin.Container.attachNameRef(): Duplicate name: "id" on ext-viewport between ext-textfield-1 and ext-textfield-5
Two found workarounds :
Disable animation
Ext.define('Override.Dialog', {
override: 'Ext.Dialog',
config: {
maximizeAnimation: false,
restoreAnimation: false
}
});
Make the proxy used for animation have no items (nor buttons since button disable state may not reflect the bounded value
Ext.define('Override.Dialog', {
override: 'Ext.Dialog',
config: {
maximizeProxy: {
items: null,
buttons: null
}
}
});
Background Information
During maximize and minimize ExtJS creates a shadow clone.
This will create a clone of the window, while you still have the original item.
Using an ID means, there can only be one identical one at any given time.
The clone tries to create the your textfield with the same ID, which does not work.
Typically you want to
for forms you usually do not need to grab each item as you can work with validator and getValues on the form
otherwise you might want to work with references in the view and lookupReference in the controller.
not use animation (because that does not create a clone)
write your own maximize animation and do the animation part yourself (write your own maximize function)
I'am trying to display Sencha Touch 2 selectfield with very long option text but text gets truncated with Ellipsis, like Very long option t....
How to display couple lines in one option?
Code:
{
xtype: 'selectfield',
options:[
{
text: 'Very long option I wish to splint into two separate lines',
value: 0
},
{
text: 'Another very long option I wish to splint into two separate lines',
value: 1
}
]
}
I've tried using \n and <br/> but is not working.
There are 3 two ways to do this.
use labelWrap config option set to true.
This will avoid truncating text that appears on selectfield initially. Later when you tap on selectfield; you've two choices. Using picker or list. picker will be used only if you set it to true in usePicker config. If you are on tablet, desktop or mobile default list will be shown containing options. Using labelWrap config will not be usefull if options are displayed in list after tap on selectfield.
Use following CSS override to avoid truncating.
.x-list-item-label{
height: 100% !important;
}
.x-list-label{
white-space: pre-wrap !important;
}
This override along with above mentioned labelWrap config set to true will make both list and selectfield display whole text neatly. But this will override styles that may affect appearance of other lists in your app.
Third approach that can be is to override Ext.field.Select and create custom select field. In this style, you need to just override following method - getTabletPicker that generated the list displayed on tap of selectfield. Code from ST source is as fallows -
getTabletPicker: function() {
var config = this.getDefaultTabletPickerConfig();
if (!this.listPanel) {
this.listPanel = Ext.create('Ext.Panel', Ext.apply({
centered: true,
modal: true,
cls: Ext.baseCSSPrefix + 'select-overlay',
layout: 'fit',
hideOnMaskTap: true,
items: {
xtype: 'list',
store: this.getStore(),
itemTpl: '<span class="x-list-label">{' + this.getDisplayField() + ':htmlEncode}</span>',
listeners: {
select : this.onListSelect,
itemtap: this.onListTap,
scope : this
}
}
}, config));
}
return this.listPanel;
}
Check out the line itemTpl and cls config. Here both options set styles that are defined for list. These will decide the appearance of list displayed on tap of selectfield. This approach might sound dirty. But it's useful, if you want to make some drastic changes in appearance and behaviour.
I'm using ExtJS 3 and I need to enable/disable a specific text field when I select/de-select a checkbox, like in the example showed below:
{
fieldLabel: 'myCheckBox'
xtype: 'checkbox',
name: 'myCheckBox'
},{
fieldLabel: 'myTextField'
xtype: 'textfield',
name: 'myTextField',
disabled: true
}
As I understand it I have to use a listener in 'myCheckBox' like this:
listeners: {
change: function() {
}
}
But I don't know what parameters to pass to my function and how to target 'myTextField' and .enable() .disable() it. Can you please help me? Thank you very much.
Solution based on answers (thank you):
listeners: {
change: function(cb, checked) {
Ext.getCmp('myTextField').setDisabled(!checked);
}
}
and added the id tag to the textfield component like this:
id: 'myTextField'
If you are not sure what to pass as a parameter than Ext.getCmp() gives you the component. It takes id of the component as a parameter. In your case you have to assign id to textfield and can get it on change event as Ext.getCmp('myTextField'). Where myTextField is an id of textfield. Name and Id of a component can be same.
listeners: {
change: function() {
Ext.getCmp('myTextField').disable();
//or
Ext.getCmp('myTextField').enable();
}
}
There are a few ways to reference myTextField. The easiest is probably to give the field a ref (note that this approach does not work in ExtJS 4, where you are better off with a component query):
{
fieldLabel: 'myTextField'
xtype: 'textfield',
name: 'myTextField',
ref: '../myTextField'
disabled: true
}
Setting the ref will cause the textfield component to be referenced in a property of its owner or one of its ancestors. So then your listener can simply be something like this (the parameters passed to this function are listed in the doc):
change: function(cb, checked) {
me.myTextField.setDisabled(!checked);
}
You might need to tweak the ref path depending on your component hierarchy.
Example:
Using setDisabled API:
theStudentForm.findField('stud_name').setDisabled(true);
Using setOpacity API:
theStudentForm.findField('stud_name').labelEl.setOpacity(1);
Using readOnly API:
theStudentForm.findField('stud_name').setReadOnly(true);
I have created a form that displays values in plain displayfields.
There is an "edit" button next to the form and once clicked by the user, the displayfields should switch to being textfields and will, therefore, make the data editable.
This, I am guessing, would be achieved by having two identical forms, one editable and one not and one or the other would be visible, based on the user having clicked the button. Another way, perhaps, is to have the xtype dynamically selected upon clicking the button.
Can anybody point me towards a certain direction in order to do this? I am a complete newbie to ExtJS and only just started learning ExtJS4.
Thank you in advance.
M.
Start by rendering all fields as input fields with disabled:true. Then use this for the Edit button handler:
...
form.getForm().getFields().each(function(field) {
field.setDisabled( false); //use this to enable/disable
// field.setVisible( true); use this to show/hide
}, form );//to use form in scope if needed
Ext.getCmp('yourfieldid').setFieldStyle('{color:black; border:0; background-color:yourcolor; background-image:none; padding-left:0}');
Ext.getCmp('yourfieldid').setReadOnly(true);
You can toggle based on a property isEditable. Then when you click the button you change the property and just remove and add the form. It makes it cleaner if you are switching back and forth.
Ext.define('E.view.profile.information.Form', {
extend: 'Ext.form.Panel',
xtype: 'form',
title: 'Form',
layout: 'fit',
initComponent: function () {
this.items = this.buildItems();
this.callParent();
},
buildItems: function () {
return [this.buildInvestmentPhilosophy()];
},
buildInvestmentPhilosophy: function () {
var field = {
name: 'investmentPhilosophy',
xtype: 'displayfield',
editableType: 'textarea',
grow: true,
maxLength: 6000,
value: '---',
renderer: E.Format.textFormatter
};
this.toggleEditingForForm(field);
return field;
},
toggleEditingForForm: function (form) {
if (this.isEditable) {
Ext.Array.each(form, this.configureFieldForEditing, this);
}
},
configureFieldForEditing: function (field) {
if (field.editableType) {
field.xtype = field.editableType;
}
}
});
You can also try to have two items : a displayfield and a textfield with the same data source and you could hide/show the right item with your button handler.
You should not have any CSS problems
(If you did not have CSS problems I would enjoy to see you code)
We are creating an application using ExtJS 4 which has a requirement that entry in a form textfield should always be in UPPERCASE.
For this, I found that I can call a function on change event and convert the current value to uppercase and set it back to the field in following way:
change: function(field, newValue){
field.setValue(newValue.toUpperCase());
}
What this does is that if a user enters a letter in lowercase, then it converts it to uppercase and puts it back in the field. During this, there is a slight transition displayed to the user from lower to upper case. That is, the user is able to see the letter in lower case and after a millisecond may be, the letter becomes uppercase.
The question is: Is there a way to avoid this 'transition/transformation' from lower to upper case and show letters in uppercase directly to the user as soon as he types something?
I tried using - style=text-transform:uppercase - but no luck.
Any help would be really appreciated.
Thanks in advance.
I tried using - style=text-transform:uppercase - but no luck.
You should have used fieldStyle instead. Here is demo.
Cheers!
The given answer works only for DISPLAYING the text in uppercase, but the value remains the same. I've extended the textfield to override the getValue() method to return the value in uppercase, not only for displaying, with an optional config flag:
Ext.define('Dev.ux.UpperTextField', {
extend: 'Ext.form.field.Text',
alias: 'widget.uppertextfield',
//configuration
config: {
uppercaseValue: true //defaults to true
},
constructor: function (config) {
this.initConfig(config);
this.callParent([config]);
},
initComponent: function () {
var me = this;
Ext.apply(me, {
fieldStyle: 'text-transform:uppercase',
});
me.callParent();
},
//overriden function
getValue: function () {
var val = this.callParent();
return this.getUppercaseValue() ? val.toUpperCase() : val;
}
});
Then I can easily add several textfields to a form:
{
xtype: 'uppertextfield',
uppercaseValue: false, //custom cfg available (default is true)
name: 'Descricao',
fieldLabel: 'Nome da Cidade',
allowBlank: false,
enforceMaxLength: true,
maxLength: 80
},
Works in EXT 4.2.1.
You can do it with a plugin too.
{
xtype: 'textfield',
plugins: ['uppertextfield']
}
Using this as the plugin in ExtJS 4.2.1
Ext.define('App.plugin.UpperTextField', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.uppertextfield',
init: function (cmp) {
Ext.apply(cmp, {
fieldStyle: (cmp.fieldStyle ? cmp.fieldStyle + ';' : '') + 'text-transform:uppercase',
getValue: function() {
var val = cmp.__proto__.getValue.apply(cmp, arguments);
return val && val.toUpperCase ? val.toUpperCase() : val;
}
});
}
});
Inspired by: https://www.sencha.com/forum/showthread.php?94599-Uppercase-TextField-plugin&p=522068&viewfull=1#post522068
PS: I had to call getValue on the prototype. If I would have called getValue on the cmp it would recursively continue to do that and never exit. I'm open to suggestions on how to change the component's getValue method through the plugin.
It Works for ExtJS 4.2
If you want only uppercase input for your text field then extend the base text field to change the field style to uppercase and also attach a listener to update the raw value on any text change to uppercase.
//define a new custom text field
Ext.define('IN.view.item.UpperCaseTextField', {
extend: 'Ext.form.field.Text',
alias : 'widget.myUpperCaseTextField',
fieldStyle: {
textTransform: "uppercase"
},
initComponent: function() {
this.callParent(arguments);
},
listeners: {
change: function (obj, newValue) {
console.log(newValue);
obj.setRawValue(newValue.toUpperCase());
}
}
});
//use the newly created custom text field in your view definition using the alias
xtype: 'form',
items: [
{
xtype: 'myUpperCaseTextField',
itemId: 'itemNumber',
name : 'item',
allowBlank: false,
msgTarget: 'side',
fieldLabel: 'Item Number',
size: 11,
maxLength: 10
},
]