CODEWITHSUNDEEP
javascriptextjsextjs4
Bartac
Bartac

Reputation: 21

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 :

How can I do this please ?

Sorry for my bad English.

Thank you

Upvotes: 2

Views: 5685

Answers (5)

vahissan
vahissan

Reputation: 2332

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);

Upvotes: 0

Leroy
Leroy

Reputation: 472

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.

Upvotes: 0

Nishant Bajracharya
Nishant Bajracharya

Reputation: 361

Try this

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

Upvotes: 0

shubham1js
shubham1js

Reputation: 280

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.)
        },

Upvotes: 1

Rohit Sharma
Rohit Sharma

Reputation: 1410

You can do it like below:-

field.allowBlank = YOUR_DATA.allowBlank; // data => allowBlank
field.validateValue(field.getValue());

Hope this help.

Upvotes: 0

Related Questions