how fix this extjs layout? - javascript

This is my ext code
Ext.create('Ext.panel.Panel', {
title: 'Customer Information',
width: 300,
bodyPadding: 5,
floating: true,
renderTo: document.body,
frame: true,
collapsible: true,
closable: true,
defaults: { labelWidth: 90 },
items: [{
xtype: 'image',
id: 'profile_pic',
name: 'profile_pic',
style: { display: 'block', margin: 'auto' },
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
},{
xtype: 'displayfield',
fieldLabel: 'ID',
name: 'viewer_id',
id: 'viewer_id',
padding: '5 0 0 0',
fieldCls: 'specialfield',
value: ''
},{
xtype: 'displayfield',
fieldLabel: 'Name',
name: 'viewer_name',
id: 'viewer_name',
fieldCls: 'fieldcolor',
value: '',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Member ID',
name: 'viewer_mem_id',
id: 'viewer_mem_id',
fieldCls: 'fieldcolor',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Address',
name: 'viewer_address',
id: 'viewer_address',
fieldCls: 'fieldcolor',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Phone [Home]',
name: 'viewer_phone_home',
id: 'viewer_phone_home',
fieldCls: 'fieldcolor',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Phone [Mobile]',
name: 'viewer_phone_mobile',
id: 'viewer_phone_mobile',
fieldCls: 'fieldcolor',
width: 280
},{
xtype: 'displayfield',
fieldLabel: 'Phone [Work]',
name: 'viewer_phone_work',
id: 'viewer_phone_work',
fieldCls: 'fieldcolor',
width: 280
}]
});
problem is first time it loads it shows like this
once the image loaded and then refresh it gives me the layout i needed
i guess the problem is happening due to image size. how to fix this issue?
sorry for the bad english
Regards


Found the correct way to do it by adding a listener and bind load event to element
var v_profile_image = Ext.widget('image', {
src: '',
style: { display: 'block', margin: 'auto' },
name: 'profile_pic'
});
v_profile_image.on('load', function(e) {
this.up('panel').doLayout();
}, v_profile_image, { element: 'el' });


From the comments above.
If the height of image is not changing you can set the height of image: height:90 inside the declaring the image: jsfiddle.net/6NK7n/
Anyway, the image will be resized to fit the height you set.

Related

The parameter Node is not a child of this Node error in IE

I have two tag K and F. Every K tag has some child F tag. I want to remove child F tag from the K tag. Here is my code. My code is working fine in Chrome Showing error in IE
Error : The parameter Node is not a child of this Node.
Here is my Code
if(KTagNode[j].getAttribute('pview') == 198) {
var fTagData = KTagNode[j].getElementsByTagName('F');
for(var k=0; k<fTagData.length;k++){
if(fTagData[k].getAttribute('N') == "USA"){
KTagNode[j].removeChild(fTagData[k]);
k--;
}
}
}
Can anyone help me with this.

I come out with idea of this. Please check.
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa#simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart#simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer#simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge#simpsons.com', phone: '555-222-1254' }
]
});
var root = {
expanded: true,
children: [{
text: "Configure Application",
expanded: true,
children: [{
text: "Manage Application",
leaf: true
}, {
text: "Scenario",
leaf: true
}]
}, {
text: "User Configuration",
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}, {
text: "Test Configuration",
//leaf: true,
expanded: true,
children: [{
text: "Manage User",
leaf: true
}, {
text: "User rights",
leaf: true
}]
}]
};
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'north Region is resizable',
region: 'north', // position for region
xtype: 'panel',
height: 50,
split: true, // enable resizing
margin: '0 5 5 5',
layout: {
type: "hbox",
align: "stretch"
},
items:[
{
xtype: 'combobox',
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width : 200,
store: states,
},{
xtype: 'combobox',
label: 'Choose State2',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width : 200,
store: states
}]
},{
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margin: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: {
type: "vbox",
align: "stretch"
},
items:[{
xtype: 'panel',
width : 200,
margin: '5 0 0 5',
layout: {
type: "vbox",
align: "stretch"
},
items:[{
xtype: 'combobox',
label: 'Choose State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
width : 50,
store: states,
},{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: new Date()
},{
xtype: 'toolbar',
width : 150,
items:[{
text: 'Button1'
},{
text: 'Button2'
}]
}]
},{
xtype: 'treepanel',
useArrows: true,
autoScroll: false,
animate: true,
enableDD: false,
title: 'Configuration',
width: 200,
height: 400,
rootVisible: false,
store: Ext.create('Ext.data.TreeStore', {
root: root
}),
listeners: {
itemclick: function(s, r) {
alert(r.data.text);
}
}
}]
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
margin: '5 5 0 0',
layout: {
type: "vbox",
align: "stretch"
},
items:[{
xtype: 'grid',
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 150,
width: 400,
},{
xtype: 'toolbar',
width : 150,
items:[{
text: 'Button1'
},{
text: 'Button2'
}]
},{
xtype : 'panel',
width: 175,
height: 150,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}],
}]
},{
title: 'South Region is resizable',
region: 'south', // position for region
split: true, // enable resizing
margin: '0 5 5 5',
xtype: 'toolbar',
items:[{
text: 'Button1'
},{
text: 'Button2'
}]
}],
renderTo: Ext.getBody()
});

How to reduce space between label and text box in extjs?

I want to reduce space between label and text box, you can see in bellow image,
I used Ext.form.field.Text control of ext JS. Please see bellow code for this control.
this.temp1min = new Ext.form.field.Text({
xtype: 'textfield',
/* *///labelAlign: 'left',
//labelWidth: 60,
//width: '7%',
//labelStyle: 'padding: 10px 10px;',
//padding:'0 '
fieldLabel: 'T1 Min',
blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
//allowBlank: false,
name: 'temp1min'
});
this.temp1max = new Ext.form.field.Text({
xtype: 'textfield',
//labelAlign: 'left',
//labelWidth: 30,
//width: '6%',
fieldLabel: 'T1 Max',
blankText: fleet.Language.get('_FLEET_REQUIRED_ERROR_'),
// allowBlank: false,
name: 'temp1max'
});
And UI, Please see below image.

You can use labelWidth:'auto';
The labelWidth of the fieldLabel in pixels. Only applicable if the labelAlign is set to "left" or "right".
Here I have created an sencha fiddle demo. Hope this will help you to solve your problem.
Ext.create('Ext.form.Panel', {
title: 'Label width example',
width: '100%',
bodyPadding: 10,
renderTo: Ext.getBody(),
defaults: {
xtype: 'textfield',
labelWidth: 'auto',
margin: '0 5',
allowBlank: false // requires a non-empty value
},
layout: 'hbox',
items: [{
fieldLabel: 'T1 Min',
name: 'temp1min'
},{
fieldLabel: 'T1 Max',
name: 'temp1min'
}, {
name: 'name',
fieldLabel: 'Name',
}, {
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email' // requires value to be a valid email address format
}]
});

Labelwidth: 'auto'
does not work in extjs 6.0.x, it only accepts numbers.
edit: Found the answer.
To adjust the space between the label and the textfield, in extjs 6.0.x, you have to use the following code.
labelStyle: 'width: 30px'

How to reduce the padding of the labels in an ExtJS FormPanel?

I'm trying to reduce the padding between the fields of my ExtJS form.
I am able to change the style of the field data with the style tag in the Items collection like this:
//form right
var simple_form_right = new Ext.FormPanel({
frame:true,
labelWidth: 90,
labelAlign: 'right',
title: 'Orderer Information',
bodyStyle:'padding:5px 5px 0 0',
width: 300,
height: 600,
autoScroll: true,
itemCls: 'form_row',
defaultType: 'displayfield',
items: [{
fieldLabel: 'Customer Type',
name: 'customerType',
style: 'padding:0px;font-size:7pt',
labelStyle: 'padding:0px',
allowBlank: false,
value: 'Company'
},{
fieldLabel: 'Company',
name: 'company',
value: 'The Ordering Company Inc.'
},{
fieldLabel: 'Last Name',
name: 'lastName',
value: 'Smith'
}, {
...
But how do I access the style of the label as well, something like styleLabel or labelStyle, etc.?

There's labelPad which defaults to 5px apparently, and labelStyle if you need more than that.

You can make use of the labelStyle property available for form fields.
Here is an example:
items: [{
fieldLabel: 'Company',
name: 'company',
labelStyle: 'padding: 10px 10px;'
}]

ExtJS Having More Than One vType Applied To A Field

I have seen examples that use built-in vTypes and custom ones for a field, but never a custom and built-in vType together. For example, here is one I am currently using in my code which I have found from the Sencha examples and forums (many thanks):
//Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return false;
}
if (field.startDateField) {
var start = Ext.getCmp(field.startDateField);
if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
start.setMaxValue(date);
start.validate();
}
}
else if (field.endDateField) {
var end = Ext.getCmp(field.endDateField);
if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
end.setMinValue(date);
end.validate();
}
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
}
});
Although this prevents the users from picking start and end dates that are not chronologically correct and quite nicely I might add, it overrides the default which checks that the user entered a date in correct format. Any way to have both the advanced vType and the default working at the same time? Now users can simply put letters in these fields or incorrect date formats and there answers will be submitted with no error checking! If something already exists for me to have multiple vTypes, I don't want to have to rewrite what is already written and reinvent the wheel.
Thanks for your time,
elshae
EDIT
I am adding more of the form code by request. It's very long, so I have cut some of it out. I hope this will be enough...
this.captchaURL = "captcha/CaptchaSecurityImages.php?width=160&height=80&characters=4&t=";
var boxCaptcha = new Ext.BoxComponent({
columnWidth:.35,
autoEl: {
tag:'img'
,id: 'activateCodeImg'
,src:this.captchaURL+new Date().getTime()
}
});
boxCaptcha.on('render',function (){
var curr = Ext.get('activateCodeImg');
curr.on('click',this.onCapthaChange,this);
},this);
function onCapthaChange(){
var captchaURL = this.captchaURL;
var curr = Ext.get('activateCodeImg');
curr.slideOut('b', {callback: function(){
Ext.get( 'activateCodeImg' ).dom.src= captchaURL+new Date().getTime();
curr.slideIn('t');
}},this);
}
function getLang(){
// decode language passed in url
var locale = window.location.search
? Ext.urlDecode(window.location.search.substring(1))
: '';
return locale['lang'];
}//end getLang()
var form;
var lang = getLang();
var languageFile;
var localeFile;
if (lang == 'chn'){
languageFile = 'chinese.json';
localeFile = '../ext-3.3.1/src/locale/ext-lang-zh_CN.js';
}
else if (lang == 'eng'){
languageFile = 'english.json';
}
else if (lang == 'tib'){
languageFile = 'tibetan.json';
localeFile = '../ext-3.3.1/src/locale/ext-lang-zh_CN.js';
}
$.getScript(localeFile, function(){
var i18n = {};
$.getJSON(languageFile, i18n, function(data) { i18n = data.i18n;
Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif';
//Add the additional 'advanced' VTypes
Ext.apply(Ext.form.VTypes, {
daterange : function(val, field) {
var date = field.parseDate(val);
if(!date){
return false;
}
if (field.startDateField) {
var start = Ext.getCmp(field.startDateField);
if (!start.maxValue || (date.getTime() != start.maxValue.getTime())) {
start.setMaxValue(date);
start.validate();
}
}
else if (field.endDateField) {
var end = Ext.getCmp(field.endDateField);
if (!end.minValue || (date.getTime() != end.minValue.getTime())) {
end.setMinValue(date);
end.validate();
}
}
/*
* Always return true since we're only using this vtype to set the
* min/max allowed values (these are tested for after the vtype test)
*/
return true;
}
});
Ext.onReady(function(){
Ext.QuickTips.init();
form = new Ext.form.FormPanel({
id: 'scholarshipForm',
//labelWidth: 200, // label settings here cascade unless overridden
url:'scholarshipSubmit.php',
method: 'POST',
frame:true,
layout: 'form',
title: i18n.Apply,
bodyStyle:'padding:10px 10px 0',
width: 610,
itemCls: 'formStyle',
items: [{
xtype:'fieldset',
checkboxToggle:false,
labelWidth: 200,
title: i18n.Student_Information,
autoHeight:true,
layout: 'form',
defaults: {width: 210},
collapsed: false,
items :[{
xtype: 'textfield',
fieldLabel: i18n.First_Name,
allowBlank:false,
name: 'first',
maskRe: /([a-zA-Z\s]+)$/,
msgTarget: 'side'
},{
xtype: 'textfield',
fieldLabel: i18n.Last_Name,
allowBlank:false,
msgTarget: 'side',
name: 'last',
maskRe: /([a-zA-Z\s]+)$/
},{
xtype: 'radiogroup',
fieldLabel: i18n.Gender,
name: 'gender',
columns: 1,
rows: 2,
allowBlank:false,
msgTarget: 'side',
items: [
{boxLabel: i18n.Male, name: 'sex', inputValue: i18n.Male},
{boxLabel: i18n.Female, name: 'sex', inputValue: i18n.Female}
]
},{
xtype: 'datefield',
fieldLabel: i18n.Date_of_Birth,
name: 'birthdate',
id: 'birthdate',
allowBlank:false,
msgTarget: 'side',
minValue: '02/24/1950',
maxValue: '02/24/1990',
//width: 210
},{
xtype: 'textfield',
fieldLabel: i18n.Place_of_Birth,
allowBlank:false,
name: 'pob',
msgTarget: 'side'
},/*{
xtype: 'compositefield',
fieldLabel: 'Phone',
// anchor : '-20',
// anchor : null,
msgTarget: 'under',
items: [
{xtype: 'displayfield', value: '('},
{xtype: 'textfield', name: 'phone1', width: 29, allowBlank: false},
{xtype: 'displayfield', value: ')'},
{xtype: 'textfield', name: 'phone2', width: 29, allowBlank: false, margins: '0 5 0 0'},
{xtype: 'textfield', name: 'phone3', width: 48, allowBlank: false}
]
}*/{
xtype: 'textfield',
fieldLabel: i18n.Phone,
msgTarget: 'under',
name: 'phone',
allowBlank: false,
maskRe: /[0-9]/,
msgTarget: 'side'
},{
xtype: 'textfield',
fieldLabel: i18n.Email,
name: 'email',
vtype:'email',
msgTarget: 'under',
allowBlank: false
},{
xtype: 'fieldset',
fieldLabel: i18n.Instant_Messaging + '1 '.sup(),
name: 'IM',
labelWidth: 50,
defaults: {width: 120},
items:[{
xtype: 'textfield',
fieldLabel: 'MSN',
name: 'msn'
},{
xtype: 'textfield',
fieldLabel: 'Skype',
name: 'skype'
}]}
]
},{
xtype:'fieldset',
title: i18n.Previous_Schooling + '2 '.sup(),
collapsible: false,
autoHeight:true,
labelWidth: 150,
// defaultType: 'textfield',
items :[{xtype: 'tabpanel',
activeTab: 0,
width: 550,
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
title:'Previous Schooling',
items :[{
title: i18n.School + ' 1',
layout:'form',
defaults: {width: 250},
items: [{
xtype: 'textfield',
fieldLabel: i18n.School_Name,
allowBlank:false,
//width: 250,
name: 'nos1',
msgTarget: 'side',
maskRe: /([a-zA-Z0-9\s]+)$/
},{
xtype:'fieldset',
title: i18n.Language_Medium + '3 '.sup(),
collapsible: false,
width: 400,
autoHeight:true,
labelWidth: 50,
items :[{
xtype: 'radiogroup',
fieldLabel: i18n.Tibetan,
name: 'Tibetan1',
labelWidth: 100,
columns: [110, 60, 70, 50],
rows: 1,
itemCls: 'x-check-group-alt',
width: 300,
//defaults: {width: 200},
allowBlank:false,
msgTarget: 'side',
//vertical: true,
// cls: 'languages',
items: [
{boxLabel: i18n.Mother_Tongue, name: 'tibetan1', inputValue: i18n.Mother_Tongue},
{boxLabel: i18n.Fluent, name: 'tibetan1', inputValue: i18n.Fluent},
{boxLabel: i18n.Scholar, name: 'tibetan1', inputValue: i18n.Scholar},
{boxLabel: i18n.None, name: 'tibetan1', inputValue: i18n.None}
]
},{
xtype: 'radiogroup',
fieldLabel: i18n.Chinese,
name: 'Chinese1',
columns: [110, 60, 70, 50],
rows: 1,
width: 300,
itemCls: 'x-check-group-alt',
allowBlank:false,
msgTarget: 'side',
items: [
{boxLabel: i18n.Mother_Tongue, name: 'chinese1', inputValue: i18n.Mother_Tongue},
{boxLabel: i18n.Fluent, name: 'chinese1', inputValue: i18n.Fluent},
{boxLabel: i18n.Scholar, name: 'chinese1', inputValue: i18n.Scholar},
{boxLabel: i18n.None, name: 'chinese1', inputValue: i18n.None}
]
},{
xtype: 'radiogroup',
fieldLabel: i18n.English,
name: 'English1',
width: 300,
columns: [110, 60, 70, 50],
rows: 1,
itemCls: 'x-check-group-alt',
allowBlank:false,
msgTarget: 'side',
items: [
{boxLabel: i18n.Mother_Tongue, name: 'english1', inputValue: i18n.Mother_Tongue},
{boxLabel: i18n.Fluent, name: 'english1', inputValue: i18n.Fluent},
{boxLabel: i18n.Scholar, name: 'english1', inputValue: i18n.Scholar},
{boxLabel: i18n.None, name: 'english1', inputValue: i18n.None}
]
},{
xtype: 'textfield',
fieldLabel: i18n.Other,
width: 250,
emptyText: i18n.Type_Lang,
itemCls: 'x-check-group-alt',
name: 'other1text',
id: 'other1text',
maskRe: /([a-zA-Z\s]+)$/
},{
xtype: 'radiogroup',
name: 'Other1',
columns: [110, 60, 70, 50],
rows: 1,
width: 300,
itemCls: 'x-check-group-alt',
msgTarget: 'side',
items: [
{boxLabel: i18n.Mother_Tongue, name: 'other1', inputValue: i18n.Mother_Tongue},
{boxLabel: i18n.Fluent, name: 'other1', inputValue: i18n.Fluent},
{boxLabel: i18n.Scholar, name: 'other1', inputValue: i18n.Scholar},
{boxLabel: i18n.None, name: 'other1', inputValue: i18n.None}
]
}]},{
xtype: 'datefield',
fieldLabel: i18n.Enrollment_Start,
allowBlank:false,
msgTarget: 'side',
name: 'enrollStart1',
id: 'enrollStart1',
vtype: 'daterange',
//width: 250,
endDateField: 'enrollEnd1'
// minValue: '02/24/1950'
},{
xtype: 'datefield',
fieldLabel: i18n.Enrollment_End,
allowBlank:false,
msgTarget: 'side',
name: 'enrollEnd1',
id: 'enrollEnd1',
vtype: 'daterange',
// width: 250,
startDateField: 'enrollStart1'
},{
xtype: 'textfield',
fieldLabel: i18n.Degree,
allowBlank:false,
name: 'degree1',
msgTarget: 'side',
//width: 250,
maskRe: /([a-zA-Z0-9\s]+)$/
}]},{
title: i18n.School + ' 2',
layout:'form',
defaults: {width: 250},
items: [{
xtype: 'textfield',
fieldLabel: i18n.School_Name,
// allowBlank:false,
name: 'nos2',
msgTarget: 'side',
maskRe: /([a-zA-Z0-9\s]+)$/
},{
...
...
...
buttons: [{
text: i18n.Submit,
handler: function(){
form.getForm().submit({
params:{lang: lang},
success: function(form, action) {
Ext.Msg.alert(i18n.Success, action.result.msg);
},
failure: function(form, action) {
switch (action.failureType) {
case Ext.form.Action.CLIENT_INVALID:
Ext.Msg.alert(i18n.Failure, i18n.Client_Error);
break;
case Ext.form.Action.CONNECT_FAILURE:
Ext.Msg.alert(i18n.Failure, i18n.Ajax_Error);
break;
case Ext.form.Action.SERVER_INVALID:
Ext.Msg.alert(i18n.Failure, action.result.msg);
}//end switch
}
});
}
},{
text: i18n.Reset,
handler: function(){
form.getForm().reset();
}
}]
});
form.render(document.body);
}); //End Ext.onReady
});//End $.getJSON
});//End $.getScript

If you look at the Ext JS source code, you will see that vType is additional validation to the fields and the default validations are executed. So, even if you have 'daterange' as a new vType, the existing date check is executed.
Now, regarding the user keying in the right format.. are you talking about the date format m/d/y and d/m/y ? the format property should take care of this. You can have format: 'm/d/Y' set to both of your datefields.
Regarding user keying in simple text instead of date, I was not able to replicate that! May you should show your form code along with your question.
Have a look at this:

i looked for an similar issue.
I found a solution, maybe it is also helpful for your issue.
You can give your field ann additional parameter (e.g. vTypes), declare this field as Array.
Than you are able to use it everywhere like this:
field.vtypes.forEach(function(vType)
{
vErrors[vType] = Ext.data.validations[vType]('', val);
});
You recive an array with Vtype and a boolean for error state ;)

Set form field values in ExtJS

I'm using ExtJS to create a formPanel:
new Ext.FormPanel({
labelAlign: 'top',
title: 'Loading Contact...',
bodyStyle:'padding:5px',
width: 600,
autoScroll: true,
closable: true,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first_name',
id: 'first_name',
anchor:'95%'
}, {
xtype:'datefield',
fieldLabel: 'Birthdate',
name: 'birthdate',
width: 150,
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last_name',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:300,
/*
* By turning off deferred rendering we are guaranteeing that the
* form fields within tabs that are not activated will still be
* rendered. This is often important when creating multi-tabbed
* forms.
*/
deferredRender: false,
defaults:{bodyStyle:'padding:10px'},
items:[{
title:'Address',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Line1',
name: 'line1',
allowBlank:false,
},{
fieldLabel: 'Line2',
name: 'line2',
},{
fieldLabel: 'City',
name: 'city',
allowBlank: false,
},{
xtype:"combo",
fieldLabel:"State",
name:"state",
hiddenName:"combovalue"
}, {
fieldLabel: 'Zipcode',
name: 'zipcode',
allowBlank: false,
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home_phone',
},{
fieldLabel: 'Cell',
name: 'cell_phone'
},{
fieldLabel: 'Emergency',
name: 'emergency_phone'
}]
},{
cls:'x-plain',
title:'Notes',
layout:'fit',
items: {
xtype:'htmleditor',
name:'notes',
fieldLabel:'Notes'
}
}]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
})
How do I access the form fields by the name to set their value manually? Thanks

It's quite easy:
get hands on the form-panel (by the way it's Ext.form.FormPanel and not just Ext.FormPanel):
var formPanel = new Ext.form.FormPanel({...});
get the underlying Ext.form.BasicForm
var form = formPanel.getForm();
you then can use findField(name) to retrieve your form fields by their names:
var cellField = form.findField('cell_phone');

You can also set them in bulk by using the setValues() method.
eg:
Ext.getCmp('formname').getForm().setValues({
fielda: 'value1',
fieldb: 'value2'
})

Nice! worked for me :D
But you can set default value:
...
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first_name',
id: 'first_name',
value: 'somevalue',
anchor:'95%'
},
...

Categories