Form <-> Model binding

[mitchellsimoens]

When you create the form, create a blank model instance. Then listen to the field's blur event and set that value to the field in the model instance. Then validate and getByField to see if it's valid.

Not sure if that will work but it should

[estesbubba]

You guys doing a Form.markInvalid and getting it to display errors on the form? Mine is not. Debugging shows there are errors but no red squigglies...

        this.deviceCoverage.getForm().updateRecord(this.deviceCoverageRecord);
        var errors = this.deviceCoverageRecord.validate();
        if (!errors.isValid()) {
            this.deviceCoverage.getForm().markInvalid(errors);
            return;
        } 

[mitchellsimoens]

I haven't tried it but your code could be cleaned up a bit, don't take this the wrong way...

var me    = this,
    form  = me.deviceCoverage,
    basic = form.getForm(),
    rec   = me.deviceCoverageRecord;

basic.updateRecord(rec);
var errors = rec.validate();
if (!errors.isValid()) {
    basic.markInvalid(errors);
    return;
}

[estesbubba]

I noticed that Ext JS 4 uses var me = this; What is the reason behind doing this?

[mitchellsimoens]

1. Cuts down 2 characters per reference after the length of the line that creates the 'me' variable
2. Minifies better

Sure there are other reasons. I have talked to Jay Garcia and Ed Spencer about it one day and this is what we decided. It's agreed that we don't like it. Only reason I don't is because the IDE (BBEdit) I use highlights 'this' as blue. May be able to do it with 'me' but I'm too lazy.

You don't always need to do

var me = this;

On listeners, you can do it.

listeners: {
    afterrender: function(grid) {
        var me = grid;
    }
}

[estesbubba]

So debugging the code shows markInvalid wants 'id' and 'msg' but errors.items contains 'field' and 'message'. It appears to be the same data just with different field names. So is the best solution to iterate over errors.items and build a new object with the desired names? Easy to do but will get repetitive for all form validation. I would think that if a form uses a model, it should be able to understand the model's errors.

Maybe I'm missing something?

[estesbubba]

I know this got a little off-topic but back to the "me" code style. Is what I did below:

var nextButton = me.nextButton = <object> taking it too far for object creation?

    index: function(options) {

		var	me = this,
			app = me.application;
			
		if (!options.back) {
			me.deviceCoverage = Ext.create('Prepaid.views.DeviceCoverage', {});
			me.deviceCoverageRecord = Ext.ModelMgr.create({}, 'DeviceCoverage');
			me.deviceCoverage.getForm().loadRecord(me.deviceCoverageRecord);
			
			me.wizard = Ext.create('CsgPrepaid.views.Wizard', {
				items: me.deviceCoverage
			});
			
			app.viewport.add(me.wizard);
			
			var nextButton = me.nextButton = me.wizard.wizardButtons.nextButton;
			me.backButton = me.wizard.wizardButtons.backButton;
			
			nextButton.setDisabled(true);
			
			nextButton.on('click', me.nextHandler, me);
			me.backButton.on('click', me.backHandler, me);
			
			me.deviceCoverage.viewCoverageButton.on('click', me.viewCoverageHandler, me);
		}

		me.backButton.setDisabled(true);
		nextButton.setText('[View Products]');
		
    },

[wizkid]

You guys doing a Form.markInvalid and getting it to display errors on the form? Mine is not. Debugging shows there are errors but no red squigglies...

        this.deviceCoverage.getForm().updateRecord(this.deviceCoverageRecord);
        var errors = this.deviceCoverageRecord.validate();
        if (!errors.isValid()) {
            this.deviceCoverage.getForm().markInvalid(errors);
            return;
        } 

There is definitely a bug going on here... See my post / fix here:http://www.sencha.com/forum/showthre...n-error-object

[skullbooks]

hey,

we have the same problem and want the form to validate by a given model and it's validations.

now i wrote my own ux.form.ModelValidatedPanel and ux.form.ModelValidatedBasic class that do this for me.

see here: http://www.diloc.de/blog/2011/05/05/...model-binding/

the main aim of the form is to hold a model-record what can validate by the model validations and give the error back to the form. and all this by behaving hopefully nearly the same like a normal Ext.form.Panel (validitychange etc.)

haven't tested it in our whole application context but my simple form example tests worked really fine.

[wizkid]

I did something similar but I like yours allot better! I will have to give it a try! Thanks!