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);
Related
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);
}
}]
})
I have this datefield in my form :
{
xtype: 'datefield',
fieldLabel: 'Date commence travel',
name: 'tgl_awal',
id: 'tgl_awal',
vtype: 'daterange',
endDateField: 'tgl_akhir', // id of the end date field
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y'
}, {
xtype: 'datefield',
fieldLabel: 'Date end travel',
name: 'tgl_akhir',
id: 'tgl_akhir',
vtype: 'daterange',
startDateField: 'tgl_awal',
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y'
}
I want to set start date field in tgl_awal 3 months prior of today. I've tried to set it with Javascript variable that I defined outside but no effect. Any help appreciated.
Ext.Date#add is the method to use to add or subtract time interval to/from a given date.
Your datefield should have value set to :
value: Ext.Date.add(new Date, Ext.Date.MONTH, -3)
I think minValue is the attribute you are looking for.All dates prior to minValue are disabled. Or are you having trouble to get logic for 3 months prior to today ?
function beginDate(){
//put real logic for getting date prior to 3 months here
return new Date(2017,04,20);
}
Ext.create('Ext.container.Viewport', {
title: 'Historical',
layout : 'fit',
items : [
{
xtype: 'container',
autoScroll : true,
defaults : {
labelAlign : 'right'
},
layout: {
type: 'hbox',
align: 'top',
pack: 'center'
},
items: [
{
xtype: 'datefield',
fieldLabel: 'Date commence travel',
name: 'tgl_awal',
id: 'tgl_awal',
vtype: 'daterange',
endDateField: 'tgl_akhir', // id of the end date field
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y',
minValue : beginDate()
}, {
xtype: 'datefield',
fieldLabel: 'Date end travel',
name: 'tgl_akhir',
id: 'tgl_akhir',
vtype: 'daterange',
startDateField: 'tgl_awal',
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y'
}
]
}
]
});
I'm trying to use the ExtJs filefield control to upload a file.
I use it as follows:
xtype: 'container',
margin: '15 0 0 25',
layout: 'vbox',
defaults: {
width: 400
},
items: [{
xtype: 'filefield',
itemId: 'fileChooser',
fieldLabel: 'CSV file',
labelWidth: 50,
buttonText: 'Select CSV file...'
}]
But, after I use it to choose a file (which I manage to do correctly), The fieldfile dissappears!
Did someone have the same problem?
Please try it in this way
{
xtype: 'form',
type: 'fileUploadForm',
items: [{
xtype: 'filefield',
cls:'upload-btn',
height:40,
type:'uploadButton',
name: 'file',
buttonText:'Upload New Version',
listeners: {
scope: this,
change: this.handleIconChange
}
}]
}
I have this field:
{
xtype: 'filefield',
labelAlign: 'top',
id: 'fileAllegato',
hidden: true,
margin: '0 15 5 10',
fieldLabel: 'Allegato',
allowBlank: false,
blankText:'Il campo è 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
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();