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, [...]
Related
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/
I'm new on Extjs and I'm trying to create a simple Login form with just one field, but I'm not able to get the value of that field.
Specifically, I call my Login panel from a Main.js:
Ext.define('appTrial.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video',
'appTrial.view.Login',
],
controllers: [
'AssociaAttivitaController'
],
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to My New App!!!',
},{
xtype: 'container',
name: 'mainContainer',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
items: [{
xtype: 'Login',
title:'Login', //call Login here
margin: '80 0 0 0'
},
]
}
]
},
{
title: 'Get Started',
iconCls: 'action',
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
/*{
xtype: 'video',
url: 'xxx'
}*/
]
}]
}
});
When I create a Login.js like this, I can see the panel, but it does not get the value:
Ext.define('appTrial.view.Login', {
extend: 'Ext.form.FormPanel',
xtype: 'login',
alias: 'widget.Login',
config: {
title: 'Login',
width: 200,
height: 200,
items: [{
xtype: 'container',
name: 'loginContainer',
layout: {
type: 'vbox',
align: 'center',
pack: 'center',
},
items: [{
layout: {
pack: 'center'
},
html :'Associa attivita'
},
{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'codAttivita',
}]
},
{
xtype: 'toolbar',
layout: {
pack: 'center'
}, // layout
ui: 'plain',
items:[{
xtype: 'button',
text: 'Associa',
ui: 'confirm',
action: 'login',
},{
xtype: 'button',
text: 'Reset',
ui: 'decline',
handler: function (btn, evt) {
var cod = codAttivita.getValue(); //here, the cod is null
Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
if (btn === 'yes') {
form.setValues({
codAttivita: ''
});
}
});
}
}]
}],
}]
},
});
Reading other topics, I understood that I have to assign the form to a variable; I did it, but with the following Login.js I don't see the panel at all:
var formPanel = Ext.create('Ext.form.Panel', {
name: 'loginForm',
/* defaults:{
layout: 'form',
xtype: 'container',
//defaultType: 'textfield',
labelWidth: 150,
width: 300
},*/
items:[{
xtype: 'container',
name: 'loginContainer',
layout: {
type: 'vbox',
align: 'center',
pack: 'center',
},
items: [{
layout: {
pack: 'center'
},
html :'Associa attivita'
},
{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
name: 'codAttivita',
id: 'codAttivita',
allowBlank: false
}]
}]
}]
});
Ext.define('appTrial.view.Login', {
extend: 'Ext.form.FormPanel',
xtype: 'login',
alias: 'widget.Login',
config: {
title: 'Login',
width: 200,
height: 200,
items: [{
xtype: 'container',
name: 'loginContainer',
layout: {
type: 'vbox',
align: 'center',
pack: 'center',
},
items: [
formPanel
],
buttons: [{
text:'Associa',
ui: 'confirm',
action: 'login',
},{
text: 'Reset',
ui: 'decline',
handler: function (btn, evt) {
var form = formPanel.getForm();
var cod = form.findField('codAttivita');
Ext.Msg.confirm('', 'Are you sure you want to reset this form?', function (btn) {
if (btn === 'yes') {
form.setValues({
codAttivita: ''
});
}
});
}
}]
}]
},
});
Does anyone have any idea??
Thanks in advance
Just so you know, aliases by convention are all lowercase (see: http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid, bullet point #8).
You can assign an id to the login form in the config.
{
xtype: 'login',
id: 'login-form',
title:'Login', //call Login here
margin: '80 0 0 0'
}
You can then query the form by id to get the values:
Ext.getCmp('login-form').getValues();
If you don't give the form an id, you can also query for the component by xtype:
Ext.ComponentQuery.query('login')[0].getValues();
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 modify the sample code to build a similar form like
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/form/form-grid.html
My code is below:
var references = new Ext.form.FormPanel({
frame: true,
title: 'References',
bodyPadding: 5,
layout: 'column',
fieldDefaults: {
labelAlign: 'left',
msgTarget: 'side'
},
items: [{
columnWidth: 0.60,
xtype: 'gridpanel',
store: reference_store,
height: 400,
title:'General',
columns: [
{ id: 'name', header : 'Reference', flex: 1, sortable : true, dataIndex: 'reference' },
{ header: 'Impact', width : 75, sortable : true, dataIndex: 'impact'},
]
}, {
columnWidth: 0.4,
margin: '0 0 0 10',
xtype: 'fieldset',
title:'Details',
defaults: {
width: 240,
labelWidth: 90
},
defaultType: 'textfield',
items: [{fieldLabel: 'Name', name: 'reference'}]
}]
});
But the entire FormPanel failed to show. When I replace the 'gridpanel' with 'fieldset' or other type, the FormPanel does appear regardless of the bad format.
xtype should be “grid“ instead of “gridpanel“