We Keep Coding

How to remove disabled attribute in Ext JS

I have a field which is by default set as disabled. But I want to change this attribute (enable it) on button click.
{
margin: '10 50 10 50',
padding: '10 20 10 20',
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
},
This is the button:
{
margin: '0 50 0 50',
padding: '10 20 10 20',
xtype: 'button',
text: "Create",
listeners: {
click: function() {
Ext.get('name').disabled = false;
}
}
}
When I click this nothing is happening. What is wrong here?

As you have provided id to your component so instead of getting by Ext.get() use Ext.getCmp().
Example
Ext.getCmp('name').setDisabled(false)
In this Fiddle, I have created a demo using same code.
Code snippet:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
xtype: 'panel',
title: 'Demo',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
id: 'name'
}, {
xtype: 'button',
text: "Create",
listeners: {
click: function () {
Ext.getCmp('name').setDisabled(false);
}
}
}]
})
}
});
Note: Instead of using id use the itemId or any other config of extjs component because id can't be duplicate. So you can also do like this
Code snippet:
Ext.create({
xtype: 'panel',
title: 'Enable component using ITEM ID',
renderTo: Ext.getBody(),
layout: 'hbox',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Survey Name',
allowBlank: false,
disabled: true,
itemId: 'name'
}, {
xtype: 'button',
text: "Create",
handler: function() {
this.up('panel').down('#name').setDisabled(false);
}
}]
})

ExtJS: textfield allowBlank with conditions

I have a panel with some textfield and fieldcontainer like this:
Ext.apply(this, {
items: [{
padding: '0 10 5 10',
xtype: 'textfield',
name: 'data',
id: 'data',
alType: 'data',
labelWidth: 130,
fieldLabel: i18n.get('label.data'),
allowBlank: false,
enforceMaxLength: true,
maxLength: 8,
minLength: 1,
allowDecimals: false,
allowExponential: false,
invalidText: i18n.get('error.bad.data'),
maskRe: /[0-9]/
}, {
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
items: [{
padding: '0 10 5 10',
width: 285,
xtype: 'datefield',
name: 'date',
id: 'date',
alType: 'date',
format: 'd/m/Y',
labelWidth: 130,
fieldLabel: i18n.get('label.date'),
allowBlank: false
}, {
xtype: 'timefield',
padding: '0 10 5 15',
width: 230,
name: 'hour',
id: 'hour',
labelWidth: 80,
fieldLabel: i18n.get('label.hour'),
minValue: '00:00',
maxValue: '23:00',
format: 'H:i',
increment: 60,
anchor: '100%',
allowBlank: false
}]
}]
});
this.callParent(arguments);
And I would like to add a condition for allowBlank :
By default all allowBlank are false
if there is a data => allowBlank for date and hour is true
if there are a date and a hour => allowBlank for data is true
How can I do this please ?
Sorry for my bad English.
Thank you

its very simple:
get data in config or init method:
allowBlank:(data.rec.hour)?'true':'false';
this will surely work.
if you want to use it in listeners like change or focus then,
onChangeCheckbox:function(cmp, newValue, oldvalue){ //it is recomended to use allowBlank in listners instead.
var me=this,
form=cmp.up('form'),
field=form.down('#foldername'),
field.allowBlank=!newValue;
//(please set condition accordingly Above.)
},

You can do it like below:-
field.allowBlank = YOUR_DATA.allowBlank; // data => allowBlank
field.validateValue(field.getValue());
Hope this help.

Try this
var yourField = Ext.getCmp('comboBoxID');
if(your_condition == true){
Ext.apply(yourField,{allowBlank:true});
}else {
Ext.apply(yourField,{allowBlank:false});
}

You can achieve this by using the ViewModel.
If you are using a standard MVC (Model View Controller), I will assume that you already know how to use a controller.
In your controller, the moment that you set your data:
Controller code snippet :
me.getViewModel().set('isThereData', data)
me.getViewModel().set('isThereDate', dateAndHour)
Note: It's not necessary to initiate this variables on your ViewModel.
In your View Code snippet:
{
xtype: 'textfield',
fieldLabel: 'data',
bind: {
allowBlank: '{isThereDate}'
}
}, {
xtype: 'textfield',
fieldLabel: 'Date and Hour',
bind: {
allowBlank: '{isThereData}'
}
}
Thru binding, the values you set on your ViewModel will be synchronized with the values on your View.
Extjs automatically translates '{isThereData}' true if it is not empty.

You can use a function like below.
function setAllowBlank(field, allowBlank) {
if (field.allowBlank != allowBlank) {
Ext.apply(field, { allowBlank });
}
}
Usage:
var field = Ext.getCmp('date');
setAllowBlank(field, true);

How to fix default tab key navigation in Extjs 5.1?

Currently I'm working on a code migration from ExtJS 4.2 to ExtJS 5.1. And I noticed MANY changes on default behavior of many components.
One of the things I noticed is that the default tab key navigation between components has changed and in this case is not quite predictable.
To reproduce go to the 4.2 fiddle here, and then click on the first text field, hit tab and then it would change focus to state combo box; hit tab again and it would go to "Next" button, hit tab again and it would go to "Second option" radio button, and so on in a predictable order.
Then repeat the same thing on 5.1 fiddle here. First thing you'll notice is that "My First Option" radio is unchecked (that's another issue), but the main issue I would like to fix is the odd order it follows on tab key press.
How can I make tab key navigation behave as it did on 4.2 version?
Including sample code here:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'My Navigable Panel',
items: [
{
xtype: 'radiogroup',
layout: 'vbox',
items: [
{
xtype: 'radiofield',
boxLabel: 'My First Option',
name: 'radio',
value: true,
checked: true,
listeners: {
change: function(group, newValue, oldValue) {
if(newValue) {
group.up('form').down('fieldcontainer[name=containerA]').show();
group.up('form').down('fieldcontainer[name=containerB]').hide();
} else {
group.up('form').down('fieldcontainer[name=containerA]').hide();
group.up('form').down('fieldcontainer[name=containerB]').show();
}
}
},
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
name: 'containerA',
fieldDefaults: {
labelAlign: 'top',
margin: '0 5 0 5'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'First field',
allowBlank: false
},
{
xtype: 'combo',
fieldLabel: 'State',
width: 50,
store : states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
},
{
xtype: 'button',
text: 'Next'
}
]
},
{
xtype: 'radiofield',
boxLabel: 'My Second Option',
name: 'radio',
value: false
}
]
},
{
xtype: 'fieldcontainer',
padding: '0 0 0 25',
name: 'containerB',
hidden: true,
items: [{
xtype: 'radiogroup',
layout: 'vbox',
items: [
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button A',
name: 'subradio'
},
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button B',
name: 'subradio'
}
]
}]
}
],
renderTo: Ext.getBody()
}).show();
}
});

Well, I did not find a way to tell ExtJS 5.1 to navigate through the form as it did on 4.2, but I managed to get the desired behavior by modifying my form composition (although it looks the same) in a way that ExtJS 5.1 was able to orderly follow.
To make that happen I removed the radiogroup component but kept all that was inside of it (which was pretty much the whole form content). It seems that structure didn't feel quite natural to the updated framework.
Here is a fiddle with the mentioned changes.
Including code here:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'My Navigable Panel',
items: [
{
xtype: 'radiofield',
boxLabel: 'My First Option',
name: 'radio',
value: true,
checked: true,
listeners: {
change: function(group, newValue, oldValue) {
if(newValue) {
group.up('form').down('fieldcontainer[name=containerA]').show();
group.up('form').down('fieldcontainer[name=containerB]').hide();
} else {
group.up('form').down('fieldcontainer[name=containerA]').hide();
group.up('form').down('fieldcontainer[name=containerB]').show();
}
}
},
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
name: 'containerA',
fieldDefaults: {
labelAlign: 'top',
margin: '0 5 0 5'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'First field',
allowBlank: false
},
{
xtype: 'combo',
fieldLabel: 'State',
width: 50,
store : states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
},
{
xtype: 'button',
text: 'Next'
}
]
},
{
xtype: 'radiofield',
boxLabel: 'My Second Option',
name: 'radio',
value: false
},
{
xtype: 'fieldcontainer',
padding: '0 0 0 25',
name: 'containerB',
hidden: true,
items: [{
xtype: 'radiogroup',
layout: 'vbox',
items: [
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button A',
name: 'subradio'
},
{
xtype: 'radiofield',
fieldLabel: 'My nested radio button B',
name: 'subradio'
}
]
}]
}
],
renderTo: Ext.getBody()
}).show();
}
});

File upload ExtJS 4

I have this field:
{
xtype: 'filefield',
labelAlign: 'top',
id: 'fileAllegato',
hidden: true,
margin: '0 15 5 10',
fieldLabel: 'Allegato',
allowBlank: false,
blankText:'Il campo &egrave obbligatorio!',
typeAhead: true,
selectOnFocus: true,
anchor: '100%',
buttonText: 'Allega'
}
When I load the file, I want to save it in db. The field does not belong to a form and, therefore, I can not do the submit. How can I do?

You can create a dummy form (without even displaying it). Something like
var f = Ext.create('Ext.form.Panel', {
items: [ your filefield item ]
})
And then do submit.

items: [{
xtype: 'filefield',
name: 'file',
fieldLabel: 'File',
labelWidth: 50,
anchor: '100%',
buttonText: 'Select File...'
}],
Live demo is here

Reset does not work a form in Sencha Touch

All I want to do is when I click the reset button on my form it resets all fields. And I have tried everything but it does not seem to work. Here is the class that has the button in it:
App.views.HomeIndex = Ext.extend(Ext.form.FormPanel,{
floating: true,
scroll: 'vertical',
itemId: 'jobSearch',
centered: true,
modal: true,
hideOnMaskTap: false,
items: [{
xtype: 'textfield',
itemId: 'keywords',
label: 'Keywords',
labelAlign: 'top',
labelWidth: '100%',
name: 'keywords'
},{
xtype: 'textfield',
label: 'Job Title',
itemId: 'jtitle',
labelAlign: 'top',
labelWidth: '100%',
name: 'jtitle'
},{
.... //more xtypes here
,
dockedItems: [{
xtype: 'toolbar',
itemId: 'toolbar',
dock: 'bottom',
height: '36',
items: [
{ xtype: 'button', text: 'Reset',itemId: 'resetBtn',
},
{ xtype: 'spacer'},
{ xtype: 'button', text: 'Submit',itemId:'submitBtn',ui: 'action',
}
]
}]
In my App.js I have the code to handle the reset method:
//this is one way I thought of doing it. But obviously it does not work. I have tried googling all over but couldnt find a solution.
this.homeView.query('#resetBtn')[0].setHandler(function(){
var form = this.el.up('.x-panel');
//form.down('.x-input-text[name=keywords]').setValue(' ');
form.query('#jobSearch').getComponent('keywords').reset();
});
});
Ext.reg('HomeIndex', App.views.HomeIndex);

Your form's ID is "jobSearch", the name is "keyboards". You're trying to combine both.
Try:
form.query('#jobSearch').reset();
or:
document.forms['keywords'].reset();

Try this. It's a bit more ExtJS like.
var form = Ext.ComponentQuery.query('#jobSearch .form')[0];
form.reset();