Develop Reference

Button on FormPanel not showing

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'

Finding difficulty in loading a form on click of a button

I have a grid panel and it contains an add button. On clicking the button, a pop of form should be displayed. But I am getting this error continuously. GET http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438244873178 404 (Not Found)
Here is my List.js file that contains the grid
Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',
require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
type: 'vbox',
align: 'stretch'
},
reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
collapsible: true,
columns: [
{
text: 'Name',
dataIndex: 'name',
flex: 1
},
{
text: 'Address',
dataIndex: 'address',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
flex: 1
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Faculty',
dataIndex:'faculty',
flex: 1
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Add',
iconCls: 'fa fa-plus',
listeners: {
click: 'onAdd'
}
},
{
xtype: 'button',
text: 'Edit',
iconCls: 'fa fa-edit',
listeners: {
click: 'onEdit'
}
},
{
xtype: 'button',
text: 'Delete',
iconCls: 'fa fa-trash-o',
listeners: {
click: 'onDelete'
}
}]
}
]
});
And here is the controller
onAdd: function(button, e, options)
{
this.createDialog(null);
},
createDialog: function(record)
{
var me = this,
view = me.getView();
debugger;
me.dialog = view.add({
xtype: 'student-form'
})
me.dialog.show();
}
And heres the Student Form
Ext.define('MyApp.view.student.StudentForm', {
extend: 'Ext.window.Window',
alias: 'widget.student-form',
height: 270,
width: 400,
layout: {
type: 'fit'
},
title: 'Add Student',
closable: false,
modal: true,
items: [{
xtype: 'form',
reference: 'form',
bodyPadding: 5,
modelValidation : true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'fieldset',
flex: 1,
title: 'Student Information',
layout: 'anchor',
defaultType: 'textfield',
defaults: {
anchor: '100%',
msgTarget: 'side',
labelWidth: '75'
},
items: [
{
xtype: 'hiddenfield',
name: 'id',
fieldLabel: 'Label'
},
{
fieldLabel: 'Name'
},
{
fieldLabel: 'Address'
},
{
fieldLabel: 'Phone'
},
{
fieldLabel: 'Email'
},
{
xtype: 'combo',
fieldLabel: 'Faculty',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
forceSelection: true,
editable: false,
name: 'faculty-id',
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'end',
type: 'hbox'
},
items: [
{
xtype: 'button',
text: 'Save',
iconCls: 'fa fa-check',
listeners: {
click: 'onSave'
}
},
{
xtype: 'button',
text: 'Cancel',
iconCls: 'fa fa-times',
listeners: {
click: 'onCancel'
}
}
]
}]
}]
}]
});
So, how can I load the Student form as a pop up window. Any suggestion?
heres the error list:
GET http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438247043981 404 (Not Found)
Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.student-form
[E] [Ext.Loader] Some requested files failed to load.

In your controller's method change from:
createDialog: function(record)
{
var me = this,
view = me.getView();
debugger;
me.dialog = view.add({
xtype: 'student-form'
})
me.dialog.show();
}
To:
createDialog: function(record)
{
Ext.createWidget('student-form');
}

Extjs: how to get values of a form

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

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

How to open a window after a button click in extjs

I am working with extjs designer 2. It works ok and i designed a viewport. It creates some view files. The first one is myviewport.js:
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'tabpanel',
activeTab: 1,
region: 'center',
items: [{
xtype: 'panel',
title: 'SIM usage'
}, {
xtype: 'gridpanel',
title: 'Reports',
forceFit: true,
store: 'ReportsStore',
columns: [{
xtype: 'gridcolumn',
dataIndex: 'Name',
text: 'Name'
}, {
xtype: 'gridcolumn',
dataIndex: 'Type',
text: 'Type'
}, {
xtype: 'gridcolumn',
dataIndex: 'Description',
text: 'Description'
}, {
xtype: 'actioncolumn',
items: [{
handler: function (view, rowIndex, colIndex, item, e) {
alert(view);
},
altText: 'Run report',
iconCls: 'runReport'
}]
}],
viewConfig: {
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'tbfill'
}, {
xtype: 'button',
iconCls: 'addReport',
text: 'Add report',
listeners: {
click: {
fn: me.onButtonClick,
scope: me
}
}
}]
}]
}, {
xtype: 'panel',
title: 'Pyshical SIM cards'
}, {
xtype: 'panel',
title: 'Virtual SIM cards'
}, {
xtype: 'form',
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'Config',
items: [{
xtype: 'numberfield',
id: 'IP1',
width: 220,
fieldLabel: 'Server IP',
labelWidth: 150
}, {
xtype: 'numberfield',
id: 'IP2',
width: 80,
fieldLabel: '.',
labelPad: 0,
labelSeparator: ' ',
labelWidth: 10,
x: 240,
y: 10
}, {
xtype: 'numberfield',
id: 'IP3',
width: 80,
fieldLabel: '.',
labelPad: 0,
labelSeparator: ' ',
labelWidth: 10,
x: 330,
y: 10
}, {
xtype: 'numberfield',
id: 'IP4',
width: 80,
fieldLabel: '.',
labelPad: 0,
labelSeparator: ' ',
labelWidth: 10,
x: 420,
y: 10
}, {
xtype: 'textfield',
id: 'username',
fieldLabel: 'username',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 40
}, {
xtype: 'textfield',
id: 'password',
inputType: 'password',
fieldLabel: 'password',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 70
}, {
xtype: 'textareafield',
id: 'emails',
fieldLabel: 'Alert emails',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 100
}, {
xtype: 'textfield',
id: 'smtp',
fieldLabel: 'SMTP',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 170
}, {
xtype: 'textfield',
id: 'smtpCredentials',
fieldLabel: 'SMTP Server credentials',
labelWidth: 150,
anchor: '100%',
x: 10,
y: 200
}, {
xtype: 'button',
height: 30,
width: 90,
text: 'Restore',
x: 170,
y: 230
}, {
xtype: 'button',
height: 30,
width: 90,
text: 'Save config',
x: 270,
y: 230
}]
}]
}]
});
me.callParent(arguments);
},
onButtonClick: function (button, e, options) {}
});
with the
onButtonClick: function(button, e, options) { }
I want to open a window. But I don't know how to do this. I already have made a window and this is stored in the mywindow.js file:
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 334,
width: 540,
layout: {
type: 'border'
},
title: 'Run report',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'form',
bodyPadding: 10,
region: 'center'
}]
});
me.callParent(arguments);
}
});
Now what do i put in the onbuttonclick event?

Adding
Ext.create('MyApp.view.MyWindow').show();
To your button handler should do the trick.