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');
}
Related
i try to use sencha cmd to create a project. But when using rowediting plugin, i got error
"SCRIPT5007: Unable to get property 'getAttribute' of undefined or
null reference"
whenever i scroll up/down over the editor on the grid.
Could you let me know what wrong here?
please click here to see more detail
Here my code look like:
Ext.define("Sample.view.common.HelloWorld",{
extend: "Ext.grid.Panel",
alias: 'widget.app-helloworld',
requires: [
'Ext.grid.plugin.RowEditing',
'PCS.config.Locale'
],
bind: '{hellostore}',
layout: {type: 'fit', align: 'stretch'},
initComponent: function() {
Ext.apply(this, {
plugins: [{
ptype: 'rowediting',
clicksToEdit: 2,
pluginId: 'helloeditor',
errorsText: 'Warning',
listeners: {
cancelEdit: 'onCancelEdit',
validateedit: 'onValidateEdit',
edit: 'onEdit'
}
}],
columns: [
new Ext.grid.RowNumberer({
width: 30,
align: 'center'
}), {
header: this.lblSysNm,
dataIndex: 'sysCd',
width: 150,
align: 'center',
itemId: 'colSystem',
renderer: function(value, metaData){
return metaData.record.data.sysNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{systemCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblDept,
dataIndex: 'deptCd',
width: 180,
align: 'center',
itemId: 'colDept',
renderer: function(value, metaData){
return metaData.record.data.deptNm;
},
editor: {
xtype: 'combo',
bind: {
store: '{deptCodeCombo}'
},
displayField: 'optionName',
valueField: 'optionValue',
allowBlank: false,
activeError: 'important',
editable: false
}
}, {
header: this.lblCountryCd,
dataIndex: 'cntyCd',
width: 120,
align: 'center',
itemId: 'colCountryCd',
editor: {
xtype: 'textfield',
maxLength : 2,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
fieldStyle: 'text-align: center;text-transform:uppercase',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblCountryNm,
dataIndex: 'cntyNm',
width: 170,
align: 'left',
itemId: 'colCountryNm',
editor: {
xtype: 'textfield',
maxLength : 50,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important',
readOnly: true,
afterRender: function() {
this.el.on('click','openCountryPopup');
}
}
}, {
header: this.lblReason,
dataIndex: 'reason',
width: 340,
align: 'left',
itemId: 'colReason',
editor: {
xtype: 'textfield',
maxLength : 200,
enforceMaxLength : true,
allowBlank: false,
activeError: 'important'
}
}, {
header: this.lblLastUpd,
dataIndex: 'updUserId',
width: 100,
align: 'center',
itemId: 'colLastUpd',
editable: false
}, {
header: this.lblLastUpdDt,
dataIndex: 'updDt',
xtype: 'datecolumn',
format: 'Y-m-d H:i',
width: 150,
align: 'left',
itemId: 'colLastUpdDt',
editable: false
}
]
});
this.callParent();
}
});
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();
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.