About create complex form

[greco]

Picture 1:
http://www.blogjava.net/images/blogjava_net/dorian/4207/o_1.JPG

Picture 2:
http://www.blogjava.net/images/blogjava_net/dorian/4207/o_2.jpg

I alrady create one form like picture 1

I want to add photo panel (picture 2) to this form, how can i do it.

Sorry, i'm engilsh is bad.

--Greco, from Shanghai , China

My existed code:



var setupContactForm = function() {
contactForm = new Ext.form.Form({
labelAlign: "right"
});

contactForm.fieldset({legend: 'General Information'});

contactForm.column({width: 600, 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:40px'});
//contactForm.fieldset({id: 'photo', legend: 'Photo'});
//contactForm.end();


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();

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
})
);
//contactForm.end();
//$$$End company, department, job title container
contactForm.end();
//###End General Information fieldset

contactForm.render('form-contact');
// var photo = Ext.get('photo');
// var photoChild = photo.createChild({
// tag:'center',
// cn: {
// tag:'img',
// src: '../../resources/images/photo/photo.jpg',
// style:'margin-bottom:5px;'
// }
// });
// new Ext.Button(photoChild, {
// text: 'Change Photo'
// });

};

[greco]

I understand how to do it.
just added container,

This is my final 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);