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);
Related
More or less the configuration looks like this:
{
xtype: 'widgetcolumn',
//text: "", //localize
dataIndex: "carStatusButton",
//disable action for the column
sortable: false,
filter: false,
menuDisabled: true,
widget: {
xtype: 'changeavailbutton',
//reference: "gridCarStatusButton", we cannot use reference because we get a duplicate reference warning
//text is being automatically generated from dataIndex of widgetcolumn
/*
//didn't work!
defaultBindProperty: "curCarStatus", //default is text
curCarStatus: "aaaaaaaa",
setCurCarStatus: function (value) {
this.curCarStatus = value;
},*/
/*
getCurCarStatus: function () {
return "aaaaaa"
},
setCurCarStatus: function (value) {
},*/
/*text: (function() {
return this.enableToggle;
})(),
bind: {
},*/
},
}
We have considered using the updater(cell, value, record, view) but it does not get called initially
We have considered using the renderer(value, metadata, record) but we can only affect the value, it does not give us any help with the widget
We considered to use a custom defaultBindProperty in the widget like this:
defaultBindProperty: "curCarStatus", //default is text
curCarStatus: "",
setCurCarStatus: function (value) {
this.curCarStatus = value;
}
The above helped to avoid creating an extra field in the model that would be necessary. In other words initially we had a field in the model, as a transient field to get the calculated value inside the dataIndex of the widgetcolumn but didn't bring any help on what we were trying to achieve.
The fact is that (from documentation) widgetcolumn binds the dataIndex to the defaultBindProperty of the widget. One problem is that there is a bind that happens in the background that we are not aware of its key value. It would look like that if it was a configuration:
bind: {
text: "{unknownProperty}"
}
If we knew how the property was called it could be helpful to use it in various properties because in our situation we need to bind more than one properties to the widget.
We are actually looking similar functionality provided by isDisabled provides to an ActionColumn to have it in a WidgetColumn.
In the widgetcolumn itself:
onWidgetAttach: function (column, widget) {
if (widget.getWidgetRecord().get('property')) {
widget.setDisabled(false)
} else {
widget.setDisabled(true)
}
}
And the grid can be updated with grid.getView().refresh() to reflect any changes
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);
}
});
Explain me important question, please!
I created a Label with list of options:
var labelCombo = Ext.create('Ext.form.Label', {
forId: 'hostT',
text: 'My Awesome Field',
margins: '0 20 0 20'
});
Now I need to change config options by event of other component:
xtype: 'button', text: 'Refresh', handler : function() {
//actions here
}
I tried to change config like so:
Ext.apply(labelCombo, {text: 'New text'})
But without success. Is there possibility to change config options by event?
Considering the you are trying to change the text value of the label..
if you specify "myLabel" as your label's itemId, then you could use
Ext.ComponentQuery.query('#myLabel')[0].setText("New text");
to update text of the label.
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)
When does initialConfig get called? What's the difference between it and initComponent?
initialConfig never gets called, because it is not a function.
It's the configuration object, that was used to configure the component when it was actually created.
For example when you do:
var textField = new Ext.form.TextField({
fieldLabel: 'A textfield',
itemId: 'textField'
});
the
{
fieldLabel: 'A textfield',
itemId: 'textField'
}
object becomes a read only property textField.initialConfig
initComponent() is a private function, that is responsible for configuring the component during creation.
Your initialConfig is what is used when the component fires it's constructor in initComponent().