1. #1
    Ext User gmoney's Avatar
    Join Date
    Mar 2007
    Posts
    42
    Vote Rating
    0
    gmoney is on a distinguished road

      0  

    Default Complex Forms in 2.0

    Complex Forms in 2.0


    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:
    Code:
        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);
    Attached Images

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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?

  4. #4
    Ext User gmoney's Avatar
    Join Date
    Mar 2007
    Posts
    42
    Vote Rating
    0
    gmoney is on a distinguished road

      0  

    Default


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

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    2
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    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.

Thread Participants: 2