I am trying to debug a JavaScript file within a larger project and for some reason, the console.log() is not outputting anything to my console view. I have tried other functions such as alert() as well but they have also given me the same results.
Here is my code:
Ext.define('chefRoleSetupFormPanel', {
extend: 'Ext.form.Panel',
id: 'chefRoleSetupFormPanel',
title: 'Role Information',
url: 'chefCreateRole.php',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'roleName',
fieldLabel: 'Name',
allowBlank: false,
anchor: '100%'
}, {
xtype: 'textareafield',
grow: true,
name: 'roleDescription',
fieldLabel: 'Description',
anchor: "100% 75%"
}],
buttons: [{
text: 'Reset',
handler: function() {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
var roleSetupForm = Ext.getCmp('chefRoleSetupFormPanel');
roleSetupForm = roleSetupForm.getForm();
var roleName = roleSetupForm.findField('roleName')['value'];
var roleDescription = roleSetupForm('roleDescription')['value'];
var chefRequiredCookbooksGrid = Ext.getCmp('chefRequiredCookbooksGrid');
var runList = chefRequiredCookbooksGrid.getStore().getRange();
console.log(runList);
roleSetupForm.submit({
params: {
roleName: roleName,
roleDescription: roleDescription,
runList: JSON.stringify(runList)
}
})
},
failure: function(form, action) {
}
});
}
}
}]
});
Any ideas as to why this may be happening?
Thanks
Try to log in the failure. You might have an error you are not catching.
console.log() is great but I would suggest to use Ext.log(...).
This is just a best practice I was suggested to follow.
Usage:
Ext.log({level:'debug'}, 'Message Here');
Related
I started to learn ExtJS but i have some problems loading view file.
When i refresh my browser i'm getting following errors in my console.
ext-dev.js:10454 GET http://bugtracker.com/app/views/Login.js?_dc=1461346272737 Ext.apply.injectScriptElement # ext-dev.js:10454Ext.apply.loadScriptFile # ext-dev.js:10577Ext.apply.require # ext-dev.js:10769(anonymous function) # ext-dev.js:11123Ext.apply.doProcess # ext-dev.js:7453Ext.apply.process # ext-dev.js:7442Ext.Class.ExtClass # ext-dev.js:7359Ext.ClassManager.create # ext-dev.js:8685Ext.apply.define # ext-dev.js:9508(anonymous function) # Application.js?_dc=1461346272723:1
ext-dev.js:10857 Uncaught Error: [Ext.Loader] Failed loading 'app/views/Login.js', please verify that the file exists
This is my Login.js controller
Ext.define('BugTracker.controller.Login', {
extend: 'Ext.app.Controller',
views: ['Login'],
init: function(){
this.control({
'login form button#submit': {
click: this.onButtonClickLogin
},
'login form button#cancel': {
click: this.onButtonClickCancel
},
'login form': {
beforeaction: this.onFormBeforeAction
}
})
},
onButtonClickCancel: function (button, e, option) {
button.up('form').getForm().reset();
},
onButtonClickLogin: function (button, e, option) {
button.up('form').getForm().submit({
url: '/login',
failure: function(form, action){
switch (action, failureType){
case Ext.form.action.Action.CLIENT_INVALID:
Ext.Msg.alert('Failure', 'Invalid login details');
break;
case Ext.form.action.Action.SERVER_INVALID:
Ext.Msg.alert('Failure', action.result.msg);
break;
case Ext.form.action.Action.CONNECT_FAILURE:
Ext.Msg.alert('Failure', 'Server connection error');
break;
default:
Ext.Msg.alert('Error','An unknown error has occurred');
}
},
success: function(form, action){
user = Ext.create('BugTracker.model.User', action.result.user);
button.up('login').close();
Ext.create('BugTracker.view.Viewport');
}
})
}
});
And this is my Login.js view
Ext.define('BugTracker.view.Login', {
extend: 'Ext.window.Window',
alias: 'widget.login',
autoShow: true,
height: 170,
width: 360,
layout: {
type: 'fit'
},
iconCls: 'key',
title: 'Login',
closeAction: 'hide',
closable: false,
items: [{
xtype: 'form',
frame: false,
bodyPadding: 15,
defaults: {
xtype: 'textfield',
anchor: '100%',
labelWidth: 60
},
items:[{
name: 'user',
fieldLabel: 'User'
},{
inputType: 'password',
name: 'password',
fieldLabel: 'Password'
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
xtype: 'tbfill'
},{
xtype: 'button',
itemId: 'cancel',
iconCls: 'cancel',
text: 'Cancel'
},{
xtype: 'button',
itemId: 'submit',
iconCls: 'login',
text: 'Login'
}]
}]
}]
});
and this is my Application.js
Ext.define('BugTracker.Application', {
name: 'BugTracker',
requires: ['BugTracker.views.Login'],
extend: 'Ext.app.Application',
views: [
// TODO: add views here
],
controllers: [
// TODO: add controllers here
],
stores: [
// TODO: add stores here
],
init: function () {
Ext.apply(Ext.data.validations, {
customPassword: function (val, field) {
return /^((?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[##$%]).{8,50})/.test(val);
},
customPasswordText: 'Not a valid password. Length should be between 6 and 65 chars. Password should contain one digit, one lovercase letter and one uppercase letter' +
'and one special symbol (##$%)'
});
},
launch: function(){
Ext.widget('login');
}
});
Can you please help me what i'm doing wrong.
If you need any addition information's please let me know and i will provide.
Thank you
I have found where is my problem.
The problem is in Application.js where i require views instead of view!
Ext.define('BugTracker.Application', {
name: 'BugTracker',
requires: ['BugTracker.view.Login'],
extend: 'Ext.app.Application',
...
I am currently working with ExtJS. I have a textfield which has an emptyText set as a config.
"emptyText : 'Please enter'"
When I click on it, it doesn't disappear. Only if I enter something, it goes. Is there any way in which this can be done?
I don't really like this solution, but I've come up with this (viewable here):
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false, // requires a non-empty value,
emptyText: 'blah',
originalEmptyText: 'blah',
listeners: {
focus: function() {
this.emptyText = ' '; // if you set it to empty string, it doesn't work
this.applyEmptyText();
},
blur: function() {
this.emptyText = this.originalEmptyText;
this.applyEmptyText();
}
}
}]
});
}
});
It should work for xtype:'textfield'. Can you provide more details about your attempt?
I did not get any issue.
Here is the sample code.
var form = new Ext.form.FormPanel({
items: [{
name: 'Test',
xtype:'textfield',
emptyText:'Empty Text',
}]
});
I have based this off of the Sencha example; however, instead of using a url to fill the store, I have tried to create an empty one and add an item to it. When I load the page, the item is successfully shown in the panel; however, I receive an error saying
Line: 18
Error: Unable to get value of the property 'dataSource': object is null or undefined
My model looks like this:
Ext.define('Ext.model.Test', {
extend: 'Ext.data.Model',
fields: [
{ name: 'testName', type: 'string' },
{ name: 'hasTestPassed', type: 'bool' },
{ name: 'hasFix', type: 'bool' }
]
});
My code looks like this:
Ext.define('Ext.app.ServerChecker', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.form.*',
'Ext.model.Test'
],
alias: 'widget.ServerChecker',
xtype: 'cell-editing',
initComponent: function () {
this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 1
});
Ext.apply(this, {
width: this.width,
store: new Ext.data.Store({
// destroy the store if the grid is destroyed
autoDestroy: true,
model: Ext.model.Test,
proxy: {
type: 'memory',
reader: {
type: 'json',
record: 'test'
}
},
sorters: [{
property: 'common',
direction: 'ASC'
}]
}),
columns: [{
header: 'Test Name',
dataIndex: 'testName',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Result',
dataIndex: 'hasTestPassed',
width: '75px',
align: 'right',
editor: {
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'resources/images/icons/fam/delete.gif',
tooltip: 'Delete Plant',
scope: this,
handler: this.onRemoveClick
}]
}],
selModel: {
selType: 'cellmodel'
},
tbar: [{
text: 'Run Tests',
scope: this,
handler: this.onRunTestsClick
}]
});
this.callParent();
this.on('afterlayout', this.loadStore, this, {
delay: 1,
single: true
})
},
loadStore: function () {
this.getStore().load({
// store loading is asynchronous, use a load listener or callback to handle results
callback: this.onStoreLoad
});
},
onStoreLoad: function () {
var rec = new Ext.model.Test({
testName: 'Yipiee',
hasTestPassed: true,
hasFix: true
});
this.getStore().insert(0, rec);
this.cellEditing.startEditByPosition({
row: 0,
column: 0
});
},
onRemoveClick: function (grid, rowIndex) {
this.getStore().removeAt(rowIndex);
}
})
Any help would be greatly appreciated. I realize that I am loading data in kind of a strange spot; however, this is for testing purposes and it would appear that it should work just fine.
Thanks in advance.
You are defining the store with a memory proxy, which is expecting the store to have a data property when loading. So, when you do this.getStore().load(..) you get an error. You actually add data to the store in the load callback, usually the callback is used to do something after the store was actually loaded.
I don't really understand what you are trying to do, but if you just want to load a record directly to the store, without any processing, you don't need the proxy at all. Your loadStore function can look like this:
loadStore: function () {
var obj = {
testName: 'Yipiee',
hasTestPassed: true,
hasFix: true
};
this.getStore().add(obj);
}
I've got code:
win = desktop.createWindow({
id: 'admin-win',
title: 'Add administration users',
width: 740,
height: 480,
iconCls: 'icon-grid',
animCollapse: false,
constrainHeader: true,
xtype: 'form',
bodyPadding: 15,
url: 'save-form.php',
items: [{
xtype: 'textfield',
fieldLabel: 'Field',
name: 'theField'
}],
buttons: [{
text: 'Submit',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function (form, action) {
Ext.Msg.alert('Success', action.result.message);
},
failure: function (form, action) {
Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
}
});
}
}
}]
});
And buttons doesn't work. It creates error - this.up('form') is undefined. How can I call getForm() in such code like that?
UPDATE:
Thanks for really quick reply!
I modified your code for my needs, this is it, and it works with Desktop Example:
win = desktop.createWindow({
id: 'admin-win',
title: 'Add administration users',
width: 740,
iconCls: 'icon-grid',
animCollapse: false,
constrainHeader: true,
items: [{
xtype: 'form',
bodyPadding: 15,
url: 'save-form.php',
items: [{
xtype: 'textfield',
fieldLabel: 'Field',
name: 'theField'
}],
buttons: [{
text: 'Submit',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
this.up().up().submit({
success: function (form, action) {
Ext.Msg.alert('Success', action.result.message);
},
failure: function (form, action) {
Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
}
});
}
}
}]
}]
});
As I already said, it seems that you have problems with your code. You are passing Ext.form.Panel options to a Ext.window.Window (I assuming this because the name of the method that you are calling). I'm writing an example with a window for you. Just a moment.
It is ready. Take a look:
Ext.create('Ext.window.Window', {
title: 'This is a Window with a Form',
height: 200,
width: 400,
layout: 'fit',
items: [{ // the form is an item of the window
id: 'admin-win',
title: 'Add administration users',
width: 740,
height: 480,
iconCls: 'icon-grid',
animCollapse: false,
constrainHeader: true,
xtype: 'form',
bodyPadding: 15,
url: 'save-form.php',
items: [{
xtype: 'textfield',
fieldLabel: 'Field',
name: 'theField',
allowBlank: false
}],
buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function(form, action) {
Ext.Msg.alert('Success', action.result.message);
},
failure: function(form, action) {
Ext.Msg.alert('Failed', action.result ? action.result.message : 'No response');
}
});
} else {
Ext.Msg.alert( "Error!", "Your form is invalid!" );
}
}
}]
}]
}).show();
jsFiddle: http://jsfiddle.net/davidbuzatto/vWmmD/
I am wondering to see that the tooltip that I am giving inside the Ext window is hiding. It is going back to the window. The code is working fine without a window (It works fine in formPanel). The code and screenshot is attached. I know that the change would be made in target of the tip. But don't know what to give.
Ext.onReady(function() {
Ext.tip.QuickTipManager.init();
var btn = new Ext.Button({
renderTo: Ext.getBody(),
text:'Submit',
handler:function(){
new Ext.Window({
width:600,
height:500,
items:[formPanel]
}).show();
}
})
var formPanel = Ext.widget('form', {
width: 350,
bodyPadding: 10,
title: 'Account Registration',
defaults: {
anchor: '100%'
},
/*
* Listen for validity change on the entire form and update the combined error icon
*/
listeners: {
fieldvaliditychange: function() {
this.updateErrorState();
},
fielderrorchange: function() {
this.updateErrorState();
}
},
updateErrorState: function() {
var me = this,
errorCmp, fields, errors;
if (me.hasBeenDirty || me.getForm().isDirty()) { //prevents showing global error when form first loads
errorCmp = me.down('#formErrorState');
fields = me.getForm().getFields();
errors = [];
fields.each(function(field) {
Ext.Array.forEach(field.getErrors(), function(error) {
errors.push({name: field.getFieldLabel(), error: error});
});
});
errorCmp.setErrors(errors);
me.hasBeenDirty = true;
}
},
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'User Name',
allowBlank: false,
minLength: 6
}],
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
padding: '10 10 5',
items: [{
xtype: 'component',
id: 'formErrorState',
baseCls: 'form-error-state',
flex: 1,
validText: 'Form is valid',
invalidText: 'Form has errors',
tipTpl: Ext.create('Ext.XTemplate', '<ul><tpl for="."><li><span class="field-name">{name}</span>: <span class="error">{error}</span></li></tpl></ul>'),
getTip: function() {
var tip = this.tip;
if (!tip) {
tip = this.tip = Ext.widget('tooltip', {
target: this.el,
title: 'Error Details:',
autoHide: false,
anchor: 'top',
mouseOffset: [-11, -2],
closable: true,
constrainPosition: false,
cls: 'errors-tip'
});
tip.show();
}
return tip;
},
setErrors: function(errors) {
var me = this,
baseCls = me.baseCls,
tip = me.getTip();
errors = Ext.Array.from(errors);
// Update CSS class and tooltip content
if (errors.length) {
me.addCls(baseCls + '-invalid');
me.removeCls(baseCls + '-valid');
me.update(me.invalidText);
tip.setDisabled(false);
tip.update(me.tipTpl.apply(errors));
} else {
me.addCls(baseCls + '-valid');
me.removeCls(baseCls + '-invalid');
me.update(me.validText);
tip.setDisabled(true);
tip.hide();
}
}
}]
}]
});
});
I know that ExtJS has a zindex manager, which controls what items are shown when two items overlap. Hope that points you in the right direction.