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);
I want to reduce space between label and text box, you can see in bellow image,
I used Ext.form.field.Text control of ext JS. Please see bellow code for this control.
this.temp1min = new Ext.form.field.Text({
xtype: 'textfield',
/* *///labelAlign: 'left',
//labelWidth: 60,
//width: '7%',
//labelStyle: 'padding: 10px 10px;',
//padding:'0 '
fieldLabel: 'T1 Min',
blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
//allowBlank: false,
name: 'temp1min'
});
this.temp1max = new Ext.form.field.Text({
xtype: 'textfield',
//labelAlign: 'left',
//labelWidth: 30,
//width: '6%',
fieldLabel: 'T1 Max',
blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
// allowBlank: false,
name: 'temp1max'
});
And UI, Please see below image.
You can use labelWidth:'auto';
The labelWidth of the fieldLabel in pixels. Only applicable if the labelAlign is set to "left" or "right".
Here I have created an sencha fiddle demo. Hope this will help you to solve your problem.
Ext.create('Ext.form.Panel', {
title: 'Label width example',
width: '100%',
bodyPadding: 10,
renderTo: Ext.getBody(),
defaults: {
xtype: 'textfield',
labelWidth: 'auto',
margin: '0 5',
allowBlank: false // requires a non-empty value
},
layout: 'hbox',
items: [{
fieldLabel: 'T1 Min',
name: 'temp1min'
},{
fieldLabel: 'T1 Max',
name: 'temp1min'
}, {
name: 'name',
fieldLabel: 'Name',
}, {
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email' // requires value to be a valid email address format
}]
});
Labelwidth: 'auto'
does not work in extjs 6.0.x, it only accepts numbers.
edit: Found the answer.
To adjust the space between the label and the textfield, in extjs 6.0.x, you have to use the following code.
labelStyle: 'width: 30px'
So I have this small Extjs application which consists of a grid with users. Each user has a field where I send from the server the date when he subscribed as a timestamp value (unix).
Ext.define('AP.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int', persist : false },
{ name: 'date_added', type: 'date', dateFormat: 'timestamp'},
{ name: 'username', type: 'string', persist : false }
]
});
The grid has a renderer so I can render that timestamp into a human readable format such as 29-Oct-2011 04:00 am:
...
{
header: 'Date added',
align: 'center',
sortable: true,
dataIndex: 'date_added',
width: 140,
fixed: true,
renderer: Ext.util.Format.dateRenderer('d-M-Y h:i a')
}
...
Now, everything works as intended, the values are displayed correctly but, I also have a form to edit each record in part. In my form, I can edit the date added field by providing a field xtype: 'datefield' which lets me chose the date. When I chose a new date for my record it shows something like 11/29/2011 (from my date above) but when I submit that form to update the record it posts something like this in the request payload: {"date_added": "NaN-NaN-NaNTNaN:NaN:NaN"}.
Can anybody shed a light on how do I go about saving dates in Extjs on fields that are retrieved as timestamps?
I did this with a gridpanel recently.
Even though the data returns from the database as a timestamp, using type: date worked fine for me...
// DATA MODEL
Ext.define('Particle', {
extend: 'Ext.data.Model',
fields: [
{ name: 'particle_id', type: 'long' },
{ name: 'name', type: 'string' },
{ name: 'type', type: 'string' },
{ name: 'start_date', type: 'date' },
{ name: 'sched_date', type: 'date' },
{ name: 'sched_time', type: 'date' },
{ name: 'notes', type: 'string' }
]
});
I rendered the date values in the column model as follows, note the renderer: config option. (I am using the field: config option because I used the grideditor extension in this to allow data to be edited in-line on the grid itself - you wouldn't need this if you are editing the values in a seperate form.)
// GRID COLUMN MODEL
var columns = [
{text: "Name", flex: 1, sortable: true, dataIndex: 'name', renderer: function(data,meta,record){meta.attr = 'ext:qtitle="Notes:"ext:qtip="' + record.get('notes') + '"'; return data;}},
{text: "Type", width: 55, sortable: true, dataIndex: 'case_lvl'},
{text: "RF Started", width: 80, sortable: true, dataIndex: 'start_date', renderer: Ext.util.Format.dateRenderer('j-M-Y')},
{text: "Sched Date", width: 80, sortable: true, dataIndex: 'sched_date', field: 'datefield', renderer: Ext.util.Format.dateRenderer('j-M-Y')},
{text: "Sched Time", width: 80, sortable: true, dataIndex: 'sched_time', field: 'timefield', renderer: Ext.util.Format.dateRenderer('g:i A')}
];
To answer your question specifically, I returned the date value to the database as a timestamp string by picking it out of the field using Ext.Date.format(). You could add this before submitting the form.
schedDate = Ext.Date.format(Ext.getCmp('schedDate').getValue(),'Y-m-d') + Ext.Date.format(Ext.getCmp('schedTime').getValue(),' H:i:s')
try like this in your data field:
{xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Date',
name: 'date',
format: 'm d Y'}
and change the format to 'd-M-Y h:i a'
I have seen examples that use built-in vTypes and custom ones for a field, but never a custom and built-in vType together. For example, here is one I am currently using in my code which I have found from the Sencha examples and forums (many thanks):
//Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return false;
}
if (field.startDateField) {
var start = Ext.getCmp(field.startDateField);
if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
start.setMaxValue(date);
start.validate();
}
}
else if (field.endDateField) {
var end = Ext.getCmp(field.endDateField);
if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
end.setMinValue(date);
end.validate();
}
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
}
});
Although this prevents the users from picking start and end dates that are not chronologically correct and quite nicely I might add, it overrides the default which checks that the user entered a date in correct format. Any way to have both the advanced vType and the default working at the same time? Now users can simply put letters in these fields or incorrect date formats and there answers will be submitted with no error checking! If something already exists for me to have multiple vTypes, I don't want to have to rewrite what is already written and reinvent the wheel.
Thanks for your time,
elshae
EDIT
I am adding more of the form code by request. It's very long, so I have cut some of it out. I hope this will be enough...
this.captchaURL = "captcha/CaptchaSecurityImages.php?width=160&height=80&characters=4&t=";
var boxCaptcha = new Ext.BoxComponent({
columnWidth:.35,
autoEl: {
tag:'img'
,id: 'activateCodeImg'
,src:this.captchaURL+new Date().getTime()
}
});
boxCaptcha.on('render',function (){
var curr = Ext.get('activateCodeImg');
curr.on('click',this.onCapthaChange,this);
},this);
function onCapthaChange(){
var captchaURL = this.captchaURL;
var curr = Ext.get('activateCodeImg');
curr.slideOut('b', {callback: function(){
Ext.get( 'activateCodeImg' ).dom.src= captchaURL+new Date().getTime();
curr.slideIn('t');
}},this);
}
function getLang(){
// decode language passed in url
var locale = window.location.search
? Ext.urlDecode(window.location.search.substring(1))
: '';
return locale['lang'];
}//end getLang()
var form;
var lang = getLang();
var languageFile;
var localeFile;
if (lang == 'chn'){
languageFile = 'chinese.json';
localeFile = '../ext-3.3.1/src/locale/ext-lang-zh_CN.js';
}
else if (lang == 'eng'){
languageFile = 'english.json';
}
else if (lang == 'tib'){
languageFile = 'tibetan.json';
localeFile = '../ext-3.3.1/src/locale/ext-lang-zh_CN.js';
}
$.getScript(localeFile, function(){
var i18n = {};
$.getJSON(languageFile, i18n, function(data) { i18n = data.i18n;
Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif';
//Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return false;
}
if (field.startDateField) {
var start = Ext.getCmp(field.startDateField);
if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
start.setMaxValue(date);
start.validate();
}
}
else if (field.endDateField) {
var end = Ext.getCmp(field.endDateField);
if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
end.setMinValue(date);
end.validate();
}
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
}
});
Ext.onReady(function(){
Ext.QuickTips.init();
form = new Ext.form.FormPanel({
id: 'scholarshipForm',
//labelWidth: 200, // label settings here cascade unless overridden
url:'scholarshipSubmit.php',
method: 'POST',
frame:true,
layout: 'form',
title: i18n.Apply,
bodyStyle:'padding:10px 10px 0',
width: 610,
itemCls: 'formStyle',
items: [{
xtype:'fieldset',
checkboxToggle:false,
labelWidth: 200,
title: i18n.Student_Information,
autoHeight:true,
layout: 'form',
defaults: {width: 210},
collapsed: false,
items :[{
xtype: 'textfield',
fieldLabel: i18n.First_Name,
allowBlank:false,
name: 'first',
maskRe: /([a-zA-Z\s]+)$/,
msgTarget: 'side'
},{
xtype: 'textfield',
fieldLabel: i18n.Last_Name,
allowBlank:false,
msgTarget: 'side',
name: 'last',
maskRe: /([a-zA-Z\s]+)$/
},{
xtype: 'radiogroup',
fieldLabel: i18n.Gender,
name: 'gender',
columns: 1,
rows: 2,
allowBlank:false,
msgTarget: 'side',
items: [
{boxLabel: i18n.Male, name: 'sex', inputValue: i18n.Male},
{boxLabel: i18n.Female, name: 'sex', inputValue: i18n.Female}
]
},{
xtype: 'datefield',
fieldLabel: i18n.Date_of_Birth,
name: 'birthdate',
id: 'birthdate',
allowBlank:false,
msgTarget: 'side',
minValue: '02/24/1950',
maxValue: '02/24/1990',
//width: 210
},{
xtype: 'textfield',
fieldLabel: i18n.Place_of_Birth,
allowBlank:false,
name: 'pob',
msgTarget: 'side'
},/*{
xtype: 'compositefield',
fieldLabel: 'Phone',
// anchor : '-20',
// anchor : null,
msgTarget: 'under',
items: [
{xtype: 'displayfield', value: '('},
{xtype: 'textfield', name: 'phone1', width: 29, allowBlank: false},
{xtype: 'displayfield', value: ')'},
{xtype: 'textfield', name: 'phone2', width: 29, allowBlank: false, margins: '0 5 0 0'},
{xtype: 'textfield', name: 'phone3', width: 48, allowBlank: false}
]
}*/{
xtype: 'textfield',
fieldLabel: i18n.Phone,
msgTarget: 'under',
name: 'phone',
allowBlank: false,
maskRe: /[0-9]/,
msgTarget: 'side'
},{
xtype: 'textfield',
fieldLabel: i18n.Email,
name: 'email',
vtype:'email',
msgTarget: 'under',
allowBlank: false
},{
xtype: 'fieldset',
fieldLabel: i18n.Instant_Messaging + '1 '.sup(),
name: 'IM',
labelWidth: 50,
defaults: {width: 120},
items:[{
xtype: 'textfield',
fieldLabel: 'MSN',
name: 'msn'
},{
xtype: 'textfield',
fieldLabel: 'Skype',
name: 'skype'
}]}
]
},{
xtype:'fieldset',
title: i18n.Previous_Schooling + '2 '.sup(),
collapsible: false,
autoHeight:true,
labelWidth: 150,
// defaultType: 'textfield',
items :[{xtype: 'tabpanel',
activeTab: 0,
width: 550,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
title:'Previous Schooling',
items :[{
title: i18n.School + ' 1',
layout:'form',
defaults: {width: 250},
items: [{
xtype: 'textfield',
fieldLabel: i18n.School_Name,
allowBlank:false,
//width: 250,
name: 'nos1',
msgTarget: 'side',
maskRe: /([a-zA-Z0-9\s]+)$/
},{
xtype:'fieldset',
title: i18n.Language_Medium + '3 '.sup(),
collapsible: false,
width: 400,
autoHeight:true,
labelWidth: 50,
items :[{
xtype: 'radiogroup',
fieldLabel: i18n.Tibetan,
name: 'Tibetan1',
labelWidth: 100,
columns: [110, 60, 70, 50],
rows: 1,
itemCls: 'x-check-group-alt',
width: 300,
//defaults: {width: 200},
allowBlank:false,
msgTarget: 'side',
//vertical: true,
// cls: 'languages',
items: [
{boxLabel: i18n.Mother_Tongue, name: 'tibetan1', inputValue: i18n.Mother_Tongue},
{boxLabel: i18n.Fluent, name: 'tibetan1', inputValue: i18n.Fluent},
{boxLabel: i18n.Scholar, name: 'tibetan1', inputValue: i18n.Scholar},
{boxLabel: i18n.None, name: 'tibetan1', inputValue: i18n.None}
]
},{
xtype: 'radiogroup',
fieldLabel: i18n.Chinese,
name: 'Chinese1',
columns: [110, 60, 70, 50],
rows: 1,
width: 300,
itemCls: 'x-check-group-alt',
allowBlank:false,
msgTarget: 'side',
items: [
{boxLabel: i18n.Mother_Tongue, name: 'chinese1', inputValue: i18n.Mother_Tongue},
{boxLabel: i18n.Fluent, name: 'chinese1', inputValue: i18n.Fluent},
{boxLabel: i18n.Scholar, name: 'chinese1', inputValue: i18n.Scholar},
{boxLabel: i18n.None, name: 'chinese1', inputValue: i18n.None}
]
},{
xtype: 'radiogroup',
fieldLabel: i18n.English,
name: 'English1',
width: 300,
columns: [110, 60, 70, 50],
rows: 1,
itemCls: 'x-check-group-alt',
allowBlank:false,
msgTarget: 'side',
items: [
{boxLabel: i18n.Mother_Tongue, name: 'english1', inputValue: i18n.Mother_Tongue},
{boxLabel: i18n.Fluent, name: 'english1', inputValue: i18n.Fluent},
{boxLabel: i18n.Scholar, name: 'english1', inputValue: i18n.Scholar},
{boxLabel: i18n.None, name: 'english1', inputValue: i18n.None}
]
},{
xtype: 'textfield',
fieldLabel: i18n.Other,
width: 250,
emptyText: i18n.Type_Lang,
itemCls: 'x-check-group-alt',
name: 'other1text',
id: 'other1text',
maskRe: /([a-zA-Z\s]+)$/
},{
xtype: 'radiogroup',
name: 'Other1',
columns: [110, 60, 70, 50],
rows: 1,
width: 300,
itemCls: 'x-check-group-alt',
msgTarget: 'side',
items: [
{boxLabel: i18n.Mother_Tongue, name: 'other1', inputValue: i18n.Mother_Tongue},
{boxLabel: i18n.Fluent, name: 'other1', inputValue: i18n.Fluent},
{boxLabel: i18n.Scholar, name: 'other1', inputValue: i18n.Scholar},
{boxLabel: i18n.None, name: 'other1', inputValue: i18n.None}
]
}]},{
xtype: 'datefield',
fieldLabel: i18n.Enrollment_Start,
allowBlank:false,
msgTarget: 'side',
name: 'enrollStart1',
id: 'enrollStart1',
vtype: 'daterange',
//width: 250,
endDateField: 'enrollEnd1'
// minValue: '02/24/1950'
},{
xtype: 'datefield',
fieldLabel: i18n.Enrollment_End,
allowBlank:false,
msgTarget: 'side',
name: 'enrollEnd1',
id: 'enrollEnd1',
vtype: 'daterange',
// width: 250,
startDateField: 'enrollStart1'
},{
xtype: 'textfield',
fieldLabel: i18n.Degree,
allowBlank:false,
name: 'degree1',
msgTarget: 'side',
//width: 250,
maskRe: /([a-zA-Z0-9\s]+)$/
}]},{
title: i18n.School + ' 2',
layout:'form',
defaults: {width: 250},
items: [{
xtype: 'textfield',
fieldLabel: i18n.School_Name,
// allowBlank:false,
name: 'nos2',
msgTarget: 'side',
maskRe: /([a-zA-Z0-9\s]+)$/
},{
...
...
...
buttons: [{
text: i18n.Submit,
handler: function(){
form.getForm().submit({
params:{lang: lang},
success: function(form, action) {
Ext.Msg.alert(i18n.Success, action.result.msg);
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert(i18n.Failure, i18n.Client_Error);
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert(i18n.Failure, i18n.Ajax_Error);
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert(i18n.Failure, action.result.msg);
}//end switch
}
});
}
},{
text: i18n.Reset,
handler: function(){
form.getForm().reset();
}
}]
});
form.render(document.body);
}); //End Ext.onReady
});//End $.getJSON
});//End $.getScript
If you look at the Ext JS source code, you will see that vType is additional validation to the fields and the default validations are executed. So, even if you have 'daterange' as a new vType, the existing date check is executed.
Now, regarding the user keying in the right format.. are you talking about the date format m/d/y and d/m/y ? the format property should take care of this. You can have format: 'm/d/Y' set to both of your datefields.
Regarding user keying in simple text instead of date, I was not able to replicate that! May you should show your form code along with your question.
Have a look at this:
i looked for an similar issue.
I found a solution, maybe it is also helpful for your issue.
You can give your field ann additional parameter (e.g. vTypes), declare this field as Array.
Than you are able to use it everywhere like this:
field.vtypes.forEach(function(vType)
{
vErrors[vType] = Ext.data.validations[vType]('', val);
});
You recive an array with Vtype and a boolean for error state ;)