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'
}]
});
Related
I have two radio button options, that one of it has next to it a textfield. The radiofield with the textarea next to it are showing. However the first radiofield (small) isn't showing. Any help on why?
size= Ext.create('Ext.form.Panel', {
xtype: 'fieldset',
flex: 1,
defaultType: 'radio',
width:'100%',
border:false,
items: {
checked: true,
boxLabel: 'Small',
name: 's',
inputValue: 'small',
},
layout: 'hbox',
items: [
{
boxLabel: 'Large',
name: 's',
inputValue: 'l',
},
{
xtype: 'splitter'
},
{
xtype: 'textfield',
name: 'specify'
}
]
});
Put a container around the hbox. You are now override the first items array with the second items array. You can only have one items array per container/wrapper.
size= Ext.create('Ext.form.Panel', {
xtype: 'fieldset',
flex: 1,
defaultType: 'radio',
width:'100%',
border:false,
items: {
checked: true,
boxLabel: 'Small',
name: 's',
inputValue: 'small'
}, {
xtype: 'container',
layout: 'hbox',
items: [
{
boxLabel: 'Large',
name: 's',
inputValue: 'l',
},
{
xtype: 'splitter'
},
{
xtype: 'textfield',
name: 'specify'
}]
}
});
Here is my code, i need the button is down of the filefield, but the butto doesnt appear in nowhere, whats the problem?
Ext.define('Academico.view.etpPersonalizada.Edit', {
extend: 'Sharedev.form.Panel',
alias: 'widget.academico-etpPersonalizadaEdit',
store: 'Academico.store.EtpPersonalizadas',
model: 'Academico.model.EtpPersonalizada',
cls: 'sharedev-overflow--visible',
layout: {
type: 'vbox',
align: 'center',
},
initComponent: function () {
this.items = [
{
xtype: 'panel',
cls: 'sharedev-card',
bodyPadding: 15,
items: [
{
xtype: 'container',
name: 'Período desta Etapa',
layout: {
type: 'hbox',
},
items: [
{
xtype: 'datefield',
name: 'pssEtpDtInicio',
fieldLabel: 'Início',
readOnly: true,
disabled: true
},
{
xtype: 'datefield',
name: 'pssEtpDtFim',
fieldLabel: 'Fim',
readOnly: true,
disabled: true
}
]
},
{
xtype: 'panel',
cls: 'sharedev-card',
layout: {
type: 'auto',
},
width: 600,
name: 'Período desta Etapa',
items: [
{
xtype: 'displayfield',
value: 'Observação do Coordenador',
cls: 'sharedev-card-title sharedev-bold',
},
{
xtype: 'displayfield',
margin: '15 0 15 15',
style: 'opacity:0.5',
name: 'etpPrtObsCoord',
cls: 'sharedev-card-subtitle sharedev-bold',
},
]
},
{
xtype: 'panel',
name: 'panel2',
items: [
{
xtype: 'textareafield',
name: 'etpPrtObsAcad',
padding: '0 8 0 0',
width: 600,
fieldLabel: 'Observação'
},
{
xtype: 'filefield',
name: 'arqArquivo',
fieldLabel: 'Arquivo',
emptyText: 'Selecione um arquivo',
maxLength: 100,
minLength: 10,
buttonConfig: {
width: 103,
text: 'Procurar...',
iconCls: 'icon-search'
}
},
{
Try to put here, nothing is show.
xype: 'button',
name: 'btnArquivo',
action: 'upload',
text: 'Enviar',
cls: 'sharedev-button sharedev-button--plain sharedev-blue',
width: 80,
height: 60,
}
]
}
],
Same thing here.
bbar: {
xype: 'button',
action: 'upload',
text: 'Enviar',
cls: 'sharedev-button sharedev-button--plain sharedev-blue',
width: 80,
}
}
]
this.callParent(arguments);
}
});
The problem is the buttons doesn't appear, no matter where i put them. I'm using extJS 4.2.
You have a typo,
xype: 'button'
It should be
xtype: 'button'
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/
has anyone else ran into a problem with ext js checkboxes not showing up? We have tried everything, even download the architect software and it still won't display... Any ideas?
I have a feeling it's like a css/include file we're missing, but I've looked all over the Internet and I still can't find a solution.
{
xtype: 'checkboxfield',
anchor: '100%',
fieldLabel: 'Label2',
boxLabel: 'Box Label2'
}
Here's the panel:
var manForm = Ext.create('Ext.form.Panel', {
width: 800,
style: 'position: relative; left: 20px;',
renderTo: Ext.getBody(),
id: 'man_form',
title: 'Mobile Information',
waitMsgTarget: true,
fieldDefaults: {
labelAlign: 'right',
labelWidth: 85,
msgTarget: 'side'
},
items: [
{
xtype: 'container',
padding: '10px',
defaults: { height: 28 },
items: [{
xtype: 'hiddenfield',
name: 'id',
id: 'id',
},
{
xtype:'hiddenfield',
name: 'item_id',
id: 'item_id'
},
{ xtype: 'container',
layout: 'hbox',
defaults: { height: 28 },
margin: ' 0 10 0 0',
items: [{
xtype:'textfield',
fieldLabel: 'Number',
name: 'ItemNumber',
id: 'ItemNumber',
labelWidth: 45,
width: 345,
},
{
xtype:'textfield',
fieldLabel: 'Name',
name: 'ItemName',
id: 'ItemName',
labelWidth: 70,
width: 425,
}]
},
{
xtype: 'textfield',
fieldLabel: 'Category List',
labelWidth: 140,
width: 700,
name: 'CategoryList',
id: 'CategoryList'
},
{
xtype: 'textfield',
fieldLabel: 'Short Desc For Cat List',
name: 'ShortDescriptionForCategoryList',
id: 'ShortDescriptionForCategoryList',
labelWidth: 140,
width: 600
},
{ xtype: 'container',
layout: 'hbox',
margin: ' 0 10 0 0',
items: [{
xtype: 'textfield',
name: 'BasePrice',
fieldLabel: 'Base Price',
id: 'BasePrice',
labelWidth: 140,
width: 270,
height: 28
},
{
xtype: 'textfield',
name: 'RetailPrice',
fieldLabel: 'Retail Price',
id: 'RetailPrice',
labelWidth: 140,
width: 270,
height: 28
},{
xtype: 'checkboxfield',
anchor: '100%',
fieldLabel: 'Label2',
boxLabel: 'Box Label2'
}
]
},
{
xtype: 'textfield',
name: 'ItemImages',
fieldLabel: 'Item Images',
id: 'ItemImages',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemPrimaryImageUrl',
fieldLabel: 'Primary Image URL',
id: 'ItemPrimaryImageUrl',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemPrimaryImageAltText',
fieldLabel: 'Primary Image Alt Text',
id: 'ItemPrimaryImageAltText',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemThumbnailUrl',
fieldLabel: 'Thumbnail URL',
id: 'ItemThumbnailUrl',
labelWidth: 140,
width: 700
},
{
xtype: 'textfield',
name: 'ItemThumbnailAltText',
fieldLabel: 'Thumbnail Alt Text',
id: 'ItemThumbnailAltText',
labelWidth: 140,
width: 700
},
{
xtype: 'button',
text: 'Update',
name: 'new_button',
id: 'new_button',
style: 'margin-left:720px; margin-bottom:5px',
handler: function(event, toolEl, panel){
Ext.Msg.show({
title:'Update Data',
msg: 'Are you sure you want to update these settings?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn){
if (btn === 'yes'){
var obj = manForm.getForm().getValues();
for (var prop in obj) {
store.getAt(0).set(prop,obj[prop]);
//alert(prop + " : " + obj[prop]);
}
store.update();
store.load();
}
}
});
}
},
]
}],
});
I didnt really test your code like kevhender did. But the fact that it works for him but not you, makes me think that you dont have the image file that extjs uses for a checkbox. Usually it is placed in images/form/checkbox.gif.
please check your images folder once. Also dev tools (either Firebug or chrome dev tools) console should throw an error if thats the case - saying "file could not be found at path blahblah" or something.
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.