1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Answers
    1
    Vote Rating
    0
    qt4x11 is on a distinguished road

      0  

    Default Answered: formBind and datefields - formBind: true not working

    Answered: formBind and datefields - formBind: true not working


    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


    Code:
    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!.

  2. 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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,346
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    48
    Answers
    1
    Vote Rating
    0
    qt4x11 is on a distinguished road

      0  

    Default


    Thank you! worked like a charm.

Thread Participants: 1

Tags for this Thread