Develop Reference

How to get Displayfields in different lines

I can see here in my code i am getting only vertical display field.
I want two of my display field in one line and other two in next line. How to get this.
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 450,
height: 450,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10'
},{
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
},{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}],
buttons: [{
text: 'Update'
}]
});

It is possible to group displayfields in fieldcontainers, like the example below:
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 450,
height: 450,
bodyPadding: 10,
title: 'Final Score',
layout: 'vbox',
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [
{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10'
},
{
xtype: 'displayfield',
width: 5
},
{
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}
]
},
{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [
{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10'
},
{
xtype: 'displayfield',
width: 5
},
{
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}
]
}
],
buttons: [{
text: 'Update'
}]
});
The example is tested with ExtJS 4.2.

How to get this
You can achieve your required result using hbox and column layout.
Column is the layout style of choice for creating structural layouts in a multi-column format where the width of each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This class is intended to be extended or created via the layout:'column' Ext.container.Container#layout config, and should generally not need to be created directly via the new keyword.
hbox layout that arranges items horizontally across a Ext.container.Container. This layout optionally divides available horizontal space between child items containing a numeric flex configuration.
In this FIDDLE, I have created a demo using both layout. I hope this will help/guide your to achieve your requirement.
COLUMN LAYOUT CODE SNIPPET
//Usng column layout
Ext.create('Ext.form.Panel', {
layout: 'column',
bodyPadding: 10,
title: 'Final Score',
renderTo: Ext.getBody(),
defaults: {
columnWidth: '.5',
xtype: 'displayfield',
},
items: [{
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}, {
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}],
buttons: [{
text: 'Update'
}]
});
HBOX LAYOUT CODE SNIPPET
//Usng hbox layout
Ext.create('Ext.form.Panel', {
title: 'Final Score',
renderTo: Ext.getBody(),
bodyPadding: 10,
defaults: {
layout: 'hbox',
flex: 1,
defaults: {
xtype: 'displayfield',
flex: 1
}
},
items: [{
items: [{
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}]
}, {
items: [{
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}]
}],
buttons: [{
text: 'Update'
}]
});

Form Validation isn't working in ExtJS

I tried to add validation to my form using formBind: true
The validation isn't occuring though (the save button is not greyed out). The validation that the text field is not blank is occuring, but binding it to the Save button seems to do nothing.
If you double click a record it will show the form in question. This can be seen here:
http://jsfiddle.net/byronaltice/7yz9oxf6/32/
Code below in case anyone can't access jsfiddle:
Ext.application({
name: 'MyApp',
launch: function () {
//Popup form for items in grid panel
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
padding: 5,
width: 600,
title: 'Edit Sessions',
model: 'true',
items: [{
xtype: 'form',
bodyPadding: 10,
title: '',
items: [{
xtype: 'textfield',
name: 'title',
fieldLabel: 'Title',
labelWidth: 90,
defaults: {
labelWidth: 90,
margin: '0 0 10 0',
anchor: '90%'
},
allowBlank: false
}, {
xtype: 'checkboxfield',
name: 'approved',
fieldLabel: 'Approved'
}]
}, {
xtype: 'container',
padding: '10 10 10 10',
layout: {
type: 'hbox',
align: 'middle',
pack: 'center'
},
items: [{
xtype: 'button',
text: 'Save',
formBind: 'true',
margin: '5 5 5 5',
handler: function (button) {
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
margin: '5 5 5 5',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
//The grid panel area
Ext.define("SessionGridPanel", {
extend: 'Ext.grid.Panel',
alias: 'widget.sessionGridPanel',
listeners: {
itemdblclick: function (gridpanel, record, item, e) {
var formWindow = Ext.create('SessionForm');
formWindow.show();
var form = formWindow.down('form');
form.loadRecord(record);
}
},
store: {
fields: [
'id', {
name: 'title',
sortType: 'asUCText'
},
'approved', {
dateFormat: 'c',
name: 'sessionTimeDateTime',
sortType: 'asDate',
type: 'date'
}, {
convert: function (v, rec) {
var convertIt = Ext.util.Format.dateRenderer('m/d/Y g:i a'),
pretty = convertIt(rec.get("sessionTimeDateTime"));
return pretty;
},
name: 'sessionTimePretty',
type: 'string'
}],
autoLoad: true,
autoSync: true,
data: [{
id: 101,
sessionTimeDateTime: '2014-08-27T21:00:00.000+0000',
title: 'JS for D',
approved: true
}, {
id: 102,
sessionTimeDateTime: '2014-10-27T22:30:00.000+0000',
title: 'CS for S',
approved: false
}, {
id: 105,
sessionTimeDateTime: '2014-09-27T20:30:00.000+0000',
title: 'XxtJS for E',
approved: false
}, {
id: 104,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ZXxtJS for E',
approved: true
}, {
id: 103,
sessionTimeDateTime: '2014-09-26T22:00:00.000+0000',
title: 'ExtJS for E',
approved: true
}],
sorters: [{
property: 'title'
}],
groupField: 'sessionTimeDateTime'
},
columns: [{
xtype: 'gridcolumn',
dataIndex: 'id',
text: 'Id'
}, {
xtype: 'gridcolumn',
dataIndex: 'title',
text: 'Title',
flex: 1,
minWidth: 100,
width: 75
}, {
xtype: 'gridcolumn',
dataIndex: 'approved',
text: 'Approved'
}, {
dataIndex: 'sessionTimePretty',
text: 'Session Start Time',
width: 180
}],
features: [{
ftype: 'grouping',
groupHeaderTpl: [
'{[values.rows[0].get(\'sessionTimePretty\')]} (Session Count: {rows.length})']
}]
});
Ext.create('Ext.container.Viewport', {
layout: {
type: 'border'
//align: 'stretch'
},
items: [{
region: 'west',
layout: {
type: 'vbox',
align: 'stretch'
},
flex: 1,
split: true,
items: [{
xtype: 'sessionGridPanel',
flex: 1
}, {
xtype: 'splitter',
width: 1
}, {
html: '<b>Speakers Panel</b>',
flex: 1,
xtype: 'panel'
}]
}, {
region: 'center',
html: '<b>Details Panel</b>',
flex: 1,
xtype: 'panel',
title: 'Details Panel',
collapsible: true,
collapsed: true,
collapseDirection: 'right'
}]
});
}
});

From Sencha API Documentation:
Any component within the FormPanel can be configured with formBind: true.
The problem is you are using the attribute formBind outside the form component
You can correct your code in this way:
Ext.define("SessionForm", {
extend: 'Ext.window.Window',
alias: 'widget.sessionForm',
// ...
items: [{
xtype: 'form',
items: [{
// your form items
}],
buttons: [{
xtype: 'button',
text: 'Save',
formBind: true,
handler: function (button) {
// also you should rewrite the following line
// to make it independant from the components structure
var form = button.up().up().down('form');
form.updateRecord();
button.up('window').destroy();
}
}, {
xtype: 'button',
text: 'Cancel',
handler: function (button) {
button.up('window').destroy();
}
}]
}]
});
Your fiddle changed: http://jsfiddle.net/7yz9oxf6/34/

javascript form cannot display

I have a JS which looks like below whereby I'm trying to build a form with several tabs, and under each tab I would like to add some labels, fields, radiogroups and the likes.
I'm still at the beginning but already encountering problems; the tabs show fine on all occasions but after the 'Contact No.' label, I can't see items falling directly below it but
can see address tabs. Can anyone show me where m getting this wrong!!
I want the 'Contact No.' label to act as a heading to mobile, home, pager and email text fields.
this.buildForm = function(){
this.myForm = new Ext.form.FormPanel({
layout:'column',
border: false,
labelWidth: labelWidth,
anchor: "100%",
items:[{
columnWidth: 1,
xtype:'tabpanel',
activeTab: 0,
height:420,
enableTabScroll: true,
deferredRender: false,
bodyStyle:'padding:10px',
items: [
{
title: 'Contact No. & Address',
i18nTitle: 'Person.contactNoAndAddress.title',
border: false,
items: [
{
xtype:'label',
text: 'Contact No.',
i18nTitle: 'Person.contactNo.title',
id: 'contactNo',
layout: 'column',
items: [
{
columnWidth: 0.33,
layout: 'form',
items:[
{
xtype:'textfield',
fieldLabel: 'Mobile',
tabIndex:101,
colwidth: 40
}
]
},{
columnWidth: 0.33,
layout: 'form',
items:[
{
xtype:'textfield',
fieldLabel: 'Home',
tabIndex:102,
colwidth: 40
}
]
},{
columnWidth: 0.33,
layout: 'form',
items:[
{
xtype:'textfield',
fieldLabel: 'Office',
tabIndex:103,
colwidth: 40
}
]
},{
columnWidth: 0.33,
layout: 'form',
items:[
{
xtype:'textfield',
fieldLabel: 'Pager',
tabIndex:104,
colwidth: 40
}
]
},{
columnWidth: 0.33,
layout: 'form',
items:[
{
xtype:'textfield',
fieldLabel: 'Fax',
tabIndex:105,
colwidth: 40
}
]
},{
columnWidth: 1,
layout: 'form',
items:[
{
xtype:'textfield',
fieldLabel: 'Email',
width:200,
tabIndex:106,
width: 200
}
]
}
]
},{
xtype:'tabpanel',
id: 'addressTab',
permission:'person:responsibleAdmin',
activeTab: 0,
height:220,
enableTabScroll: false,
deferredRender: false,
bodyStyle:'padding:10px',
layoutOnTabChange: true,
items: [
{
title: 'Home Address',
i18nTitle: 'Person.homeAddress.title',
border: false,
// hideMode: "offsets",
items:[{}]
},{
title: 'Work Address',
i18nTitle: 'Patient.workAddress.title',
border: false,
// hideMode: "offsets",
items:[{}]
}
]
}
]
},{
title:'Next of Kin',
i18nTitle: 'Person.nextOfKin.title',
layout: 'column',
labelWidth: 100,
items:[{
}]
}
]
}]
});
return this.myForm;
}

If I understand properly, for what you want to obtain you need the text field Mobile to be at the same level as the label Contact No and not to be his child.
have a look at how I modified the jsfiddle: http://jsfiddle.net/zWdXf/6/
Here is the detail of that part of code that you need:
items: [{
xtype: 'label',
text: 'Contact No.2',
i18nTitle: 'Person.contactNo.title',
id: 'contactNo',
layout: 'column',
items: [{}]
},{
xtype: 'textfield',
fieldLabel: 'Mobile',
i18nTitle: 'Person.contactNo.title',
id: 'contactNo2',
layout: 'column',
items: [{}]
}, {
xtype: 'tabpanel',
id: 'addressTab',
permission: 'person:responsibleAdmin',
activeTab: 0, [...]

Add values in a form Sencha Touch 2

I have several FormPanel. You can enter values in each of them. I need something to add all those values. Could I do it with a loop or a function? This is my code:
view1.js:
Ext.define('myApp.view.fp2', {
extend: 'Ext.form.Panel',
alias: 'widget.fp2',
config: {
id: 'fp2',
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
styleHtmlContent: true,
title: 'Prueba 3',
items: [
{
xtype: 'selectfield',
docked: 'bottom',
id: 'f3',
margin: 10,
labelWidth: '0%',
autoSelect: false,
options: [
{
text: '0',
value: 0
},
{
text: '1',
value: 1
}
]
}
]
},
{
xtype: 'fieldset',
styleHtmlContent: true,
title: 'Prueba 4',
items: [
{
xtype: 'selectfield',
docked: 'bottom',
id: 'f4',
margin: 10,
labelWidth: '0%',
autoSelect: false,
options: [
{
text: '0',
value: 0
},
{
text: '1',
value: 1
},
{
text: '2',
value: 2
}
]
}
]
},
{
xtype: 'fieldset',
styleHtmlContent: true,
title: 'Prueba 5',
items: [
{
xtype: 'selectfield',
docked: 'bottom',
id: 'f5',
margin: 10,
labelWidth: '0%',
autoSelect: false,
options: [
{
text: '0',
value: 0
},
{
text: '1',
value: 1
},
{
text: '2',
value: 2
},
{
text: '3',
value: 3
}
]
}
]
},
{
xtype: 'fieldset',
html: 'pregunta 6',
styleHtmlContent: true,
title: 'Prueba 6',
items: [
{
xtype: 'selectfield',
docked: 'bottom',
id: 'f6',
margin: 10,
labelWidth: '0%',
autoSelect: false,
options: [
{
text: '0',
value: 0
},
{
text: '1',
value: 1
}
]
}
]
}
{
xtype: 'button',
docked: 'bottom',
itemId: 'button2',
margin: 10,
ui: 'forward',
text: 'siguiente'
//go to view2.js
}
]
}
});
The view2.js is similar to the view1 but with other values.
What is the best way to sum all the values?
Thanks in advance.

To sum? I think you want to fetch them all as key-values?
For each Ext.form.FormPanel call
var valueObj = formRef.getForm().getValues();
If you now want to merge them into one object you can either do
Ext.apply(sumValueObj, valueObj ); // will override already existing props
or
Ext.applyIf(sumValueObj, valueObj ); // will not override already existing props

You can have one function which will sum all the values you need and from change event of all the selectfields you can fire that function.
In controller you can listen to change event like this:
'fp2 selectfield' : {
change : 'onDataChange'
},
and in onDataChange method you can do:
var values = Ext.getCmp("fp2").getValues();
// code to add/subtract whatever you want
PS I haven't tested this code so please ignore mistakes

Error: Miss a drag as we are waiting for WebCore's response for touch down

I am trying to add scrolling to a Sencha Touch field set. While I am trying to scroll down the field set, it is showing the below error in logcat:
W/webview(1003): Miss a drag as we are waiting for WebCore's response for touch down.
For field set, i wrote the below code:
{
xtype: 'fieldset',
docked: 'top',
margin: '20000',
width: 600,
height: 200,
items: [
{
xtype: 'textfield',
id: 'consumername',
style: 'font: DroidSans',
label: 'ConsumerName',
labelWidth: '30%'
},
{
xtype: 'numberfield',
id: 'Mobilenum',
style: 'font: DroidSans',
label: 'Mobile',
labelWidth: '30%'
},
{
xtype: 'emailfield',
id: 'email',
label: 'CustomerEmailid',
labelWidth: '30%',
placeHolder: 'email#example.com'
},
{
xtype: 'textareafield',
id: 'adressfield',
style: 'font: DroidSans',
label: 'Address',
labelWidth: '30%'
},
{
xtype: 'textfield',
id: 'areafield',
style: 'font: DroidSans',
label: 'Area/Location',
labelWidth: '30%'
},
{
xtype: 'selectfield',
label: 'City',
labelWidth: '30%',
options: [
{
text: 'Bangalore',
value: 'first'
},
{
text: 'Delhi',
value: 'second'
},
{
text: 'Mumbai',
value: 'third'
}
]
},
{
xtype: 'numberfield',
id: 'pinfield',
style: 'font: DroidSans',
label: 'Pincode*',
labelWidth: '30%'
},
]
}
I am testing in Android Olive Pad tablet with 2.2 version. I am using Sencha Touch 2 and PhoneGap to build the app.