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'
Related
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');
}
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 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.