Complex Forms in 2.0

[gmoney]

It seems that forms were so much easier to create before 2.0. Maybe I am just not used to the new syntax. Can someone help get this form to work in 2.0?

Old way:

    var setupContactForm = function() {
        contactForm = new Ext.form.Form({
            labelAlign: "right"
        });
        
        //### start General Information fieldset
        contactForm.fieldset({legend: 'General Information'});
        
        contactForm.container({ width: 800 });
        contactForm.column({width: 300, labelWidth: 75},
            new Ext.form.ComboBox({
                fieldLabel: 'Salutation',
                hiddenName: 'salutation',
                store: new Ext.data.SimpleStore({
                    fields: ['salutation_id', 'salutation_name'],
                    data : createContactLocale.salutation
                }),
                displayField: 'salutation_name',
                valueField: 'salutation_id',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus: true,
                editable: false,
                width: 100
            }), new Ext.form.TextField({
                fieldLabel: 'First Name',
                name: 'firstName',
                allowBlank: false,
                width: 150
            }), new Ext.form.TextField({
                fieldLabel: 'Last Name',
                name: 'lastName',
                width: 150
            }), new Ext.form.TextField({
                fieldLabel: 'Nickname',
                name: 'nickname',
                width: 150
            }), new Ext.form.TextField({
                fieldLabel: 'Alias Name',
                name: 'aliasName',
                width: 150
            })
        );
        contactForm.column({id: 'photo', width: 250, style:'margin-left:10px'});
        contactForm.end();
        contactForm.end();
        
        //$$$Start gender, birthday, education container
        contactForm.container({ width: 800 });
        contactForm.column({width: 150, labelWidth: 75},
            new Ext.form.ComboBox({
                fieldLabel: 'Gender',
                hiddenName: 'gender',
                store: new Ext.data.SimpleStore({
                    fields: ['gender_id', 'gender_name'],
                    data : createContactLocale.gender
                }),
                displayField: 'gender_name',
                valueField: 'gender_id',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus: true,
                editable: false,
                width: 70
            })
        );
        contactForm.column({width: 185, labelWidth: 75, style: 'margin-left: 50px;'},
            new Ext.form.DateField({
                fieldLabel: 'Date of Birth',
                name: 'birthday',
                width: 100,
                format:'Y-m-d'
            })
        );
        contactForm.column({width: 250, labelWidth: 75, style: 'margin-left: 10px;'},
            new Ext.form.ComboBox({
                fieldLabel: 'Education',
                hiddenName: 'education',
                store: new Ext.data.SimpleStore({
                    fields: ['education_id', 'education_name'],
                    data : createContactLocale.education
                }),
                displayField: 'education_name',
                valueField: 'education_id',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                selectOnFocus: true,
                editable: false,
                width: 165
            })
        );
        //contactForm.end();
        //$$$End gender, birthday, education container
        contactForm.end();
        //$$$Startcompany, department, job title container
        contactForm.container({ width: 800 });
        contactForm.column({width: 200, labelWidth: 75},
            new Ext.form.TextField({
                fieldLabel: 'Job Title',
                name: 'jobTitle',
                width: 100
            })
        );
        contactForm.column({width: 195, labelWidth: 75},
            new Ext.form.TextField({
                fieldLabel: 'Department',
                name: 'department',
                width: 100
            })
        );
        contactForm.column({width: 250, labelWidth: 75},
            new Ext.form.TextField({
                fieldLabel: 'Company',
                name: 'Company',
                width: 165
            })
        );
        //$$$End company, department, job title container
        contactForm.end();
        //###End General Information fieldset
        
        contactForm.render('form-contact');

        var photo = Ext.get('photo');
        var photoImg = photo.createChild({
            tag: 'center',
            cn: {
                tag: 'img',
                src: '../../resources/images/photo/photo.jpg',
                style: 'margin-bottom: 5px;'
            }
        });
        new Ext.Button(photoImg, {
            text: 'Change Photo'
        });
    };
    
    return {
        init: function() {
            Ext.QuickTips.init();
            // turn on validation errors beside the field globally
            Ext.form.Field.prototype.msgTarget = 'side';
            
            setupContactForm();
        }
    }
}());

Ext.EventManager.onDocumentReady(createContact.init, createContact, true);

[Animal]

So, are you even attempting to debug it? I mean does Firebug show you any errors in your code? Firebug?

[Animal]

And did you read any of the example code in examples/form? At all?

Or any of the documentation?

Or the (draft, because it's in beta test) Ext 2.0 upgrade guide?

[gmoney]

Thanks for the reply. Sorry for being to general. I will read through those docs and come back with specific questions.

[brian.moeskau]

Please see the forms section in the upgrade guide:

http://extjs.com/learn/Ext_1_to_2_Mi..._Forms_for_2.0

If it is missing anything that you need, please let me know.