PDA

View Full Version : formBind and datefields - formBind: true not working



qt4x11
16 Jan 2012, 4:51 PM
I have a form with two inputs which are datefields. I have formBind set on my form buttons so that the 'Submit' button is greyed out until the form is valid. It looks like formBind: true is not working. The 'Submit' button is never greyed out, even if I manually delete the selected dates for both fields. My form looks like



Ext.define('Ext.reports.CompanyCustomerSummaryForm', {
extend : 'Ext.form.Panel',
alias : 'widget.reports-companyCustomerSummaryForm',
buttonAlign : 'center',
title : 'Search',
collapsible : true,


layout : {
type : 'vbox',
align : 'center'
},
frame : true,


// The fields
defaultType : 'textfield',
items : [{
xtype : 'datefield',
fieldLabel : 'From',
labelAlign : 'left',
name : 'from_date',
itemId : 'from_date',
maxValue : new Date(), // limited to the current date
flex : 1
}, {
xtype : 'datefield',
fieldLabel : 'To',
labelAlign : 'left',
name : 'to_date',
itemId : 'to_date',
value : new Date(), // defaults to today
flex : 1
}],


// Reset and Submit buttons
buttons : [{
text : 'Reset',
handler : function() {
this.up('form').getForm().reset();
}
}, {
text : 'Submit',
formBind : true, // only enabled once the form is
// valid
disabled : true,
handler : function() {
var form = this.up('form').getForm();
if (form.isValid()) {
var grid = Ext.ComponentQuery.query('#ccsGrid')[0];
var from_date = Ext.ComponentQuery.query('#from_date')[0];
var to_date = Ext.ComponentQuery.query('#to_date')[0];
// converts Date object value to a string of
// 'yyyy-mm-dd'.
var startDateString = Ext.util.Format.date(from_date
.getValue(), 'Y-m-d');
var endDateString = Ext.util.Format.date(to_date
.getValue(), 'Y-m-d');
grid.getStore().load({
params : {
startDate : startDateString,
endDate : endDateString
}
});


/*form.submit({
waitMsg : 'Searching',
success : function(form, action) {
Ext.Msg.alert('Success',
action.result.msg);
},
failure : function(form, action) {
Ext.Msg.alert('Failed',
action.result.msg);
}
});*/
}
}
}]
});




--I'm not sure why formBind is not working, maybe I'm misunderstanding how formBind: true works with datefields. Any suggestions are appreciated. Thank yoU!.

mitchellsimoens
16 Jan 2012, 9:00 PM
You should put allowBlank to false on a field to set the formBind work. Right now you don't have any validations to disable the submit button. I put allowBlank : false on the From datefield and it worked for me.

qt4x11
17 Jan 2012, 6:55 AM
Thank you! worked like a charm.