PDA

View Full Version : Extjs 4.1.3 Showing Error at Random Occasion



salvin18
29 Jul 2013, 2:02 AM
I am facing real bad issues getting a mini project to run,
It is really unpredictable. Most of the times, I get the error as : TypeError: k is undefined
If i refresh it 10 times, it works 2-3 times and rest of the times it shows a javascript exception.

Steps to Reproduce:

Create a scratchpad Ext JS 4.1 with the extjs resources in "extjs" folder.

Script tags added to "index.html" :

<script type="text/javascript" src="app.js"></script>
Contents of file "app.js" :


/*-- Defining the application --*/
Ext.application({
name : 'DemoProject',
controllers : [ 'MainScreenController'],
appFolder: 'app',

launch : function() {
Ext.create('Ext.container.Viewport', {
layout : 'fit',
items : [ {
xtype : 'MainScreen'
} ]
});
}
});


Now create Folder Structure in webcontent as :


Webcontent \ app \ controller
Webcontent \ app \ view

Contents of "app\controller\MainScreenController.js" :


function initMainScreenController() {
var controller = {
extend : 'Ext.app.Controller',
// -- Views
views : [ 'MainScreen', 'WelcomePanel' ],
init : function() {
// -- Code here to listen to events in main screen...

this.control({
'*' : {
eventFired : function() {
Lib.log('Event has happened in MainScreenController !!');
}
}
});

//-- Set the default view to Welcome ...
}
};

return controller;
}
Ext.define('DemoProject.controller.MainScreenController', initMainScreenController);

Contents of "app\view\MainScreen.js" :


function createMainScreen() {
var headerPanel = {
xtype : 'panel',
region : 'north',
html : 'Demo Project',
border : false
};

var centerPanel = Ext.create('Ext.panel.Panel', {
region : 'center',
layout : 'fit',
border : false,
items : [
/* Problem lies here : */
{
xtype : 'MyWelcomePanel'
}
// -- it works fine when using xtype as panel
]

});

// -- View : mainScreen
var mainScreen = {
extend : 'Ext.panel.Panel',
alias : 'widget.MainScreen',
border : false,
layout : {
type : 'border'
},
items : [ headerPanel, centerPanel ],
getCenterPanel : function() {
return centerPanel;
}
};
return mainScreen;
}

// -- Defining our view variable as an Ext View :
Ext.define('DemoProject.view.MainScreen', createMainScreen);

Contents of "app\view\WelcomePanel.js" :


Ext.define('DemoProject.view.WelcomePanel', {
extend : 'Ext.panel.Panel',
alias : 'widget.MyWelcomePanel',
title : 'Welcome using xtype WelcomePanel'
});


This code throws an error in Firefox 22.0 and Internet Explorer 7. Open index.html in any of the browsers and refresh it multiple times.

Gary Schlosberg
1 Aug 2013, 8:24 PM
Sorry to hear you're having this trouble. I tried assembling your code but haven't been able to reproduce the issue. Perhaps you could create a simple test case or at least package up your code so that it recreates the issue.

ankursharan
21 Sep 2014, 8:10 PM
Hi,
Did you find any answer to this ? I am getting the same issue with ext js 4.1. i have started using it couple of days back.

Gary Schlosberg
22 Sep 2014, 2:37 PM
Can you please post a test case which reproduces the issue?
https://fiddle.sencha.com/#home

ankursharan
24 Sep 2014, 8:35 AM
Hi,
There are multiple files. Can I zip and upload ?

ankursharan
24 Sep 2014, 8:42 AM
Ext.define('App.view.Viewport', { extend: 'Ext.container.Viewport',
autoScroll:true,
scrollable:'vertical',
layout: {
type: 'vbox',
align: 'center'
},
requires:[
'App.view.userinfogrid','App.view.searchpanel','App.view.userselector','App.view.makertabpanel','App.view.HeaderContainer','App.view.BodyContainer','App.view.FooterContainer'
],
items:[{xtype: 'tbspacer',height:10},
{xtype:'headercontainer'},
{xtype: 'tbspacer',height:10},
{xtype:'bodycontainer'},
{xtype: 'tbspacer',height:10},
{xtype:'footercontainer'}]
});



Ext.define('App.controller.StartupController', { extend : 'Ext.app.Controller',


models : [ 'BasicModel' ],


stores : [ 'UserStore','RoleStore','RegionStore','ProductStore','FunctionStore' ],


views : [ 'FooterContainer', 'BodyContainer' ],


init : function() {
this.loadUserData();
this.loadRole();
this.loadRegion();
this.loadFunction();
this.loadProduct();
this.control({

});
},
loadRole: function(){
// create an AJAX request for role
var roleStore = this.getRoleStoreStore();
Ext.Ajax.request({
url : 'forms/loadRole',
method : 'POST',
headers : {
'Content-Type' : 'application/json'
},
params : {
"test" : "testParam"
},
success : function(response) {
var jsonResp = Ext.JSON.decode(response.responseText);
roleStore.loadData(jsonResp);
console.log("Info", "UserName from Server 1: "+ jsonResp);
},
failure : function(response) {
var jsonResp = Ext.decode(response);
console.log("Error", jsonResp.error);
}
});
},
loadRegion: function(){
// create an AJAX request for region
var regionStore = this.getRegionStoreStore();
Ext.Ajax.request({
url : 'forms/loadRegion',
method : 'POST',
headers : {
'Content-Type' : 'application/json'
},
params : {
"test" : "testParam"
},
success : function(response) {
var jsonResp = Ext.JSON.decode(response.responseText);
regionStore.loadData(jsonResp);
console.log("Info", "UserName from Server 2: "+ jsonResp);
},
failure : function(response) {
var jsonResp = Ext.decode(response);
console.log("Error", jsonResp.error);
}
});
},
loadFunction: function(){
// create an AJAX request for function
var functionStore = this.getFunctionStoreStore();
Ext.Ajax.request({
url : 'forms/loadFunction',
method : 'POST',
headers : {
'Content-Type' : 'application/json'
},
params : {
"test" : "testParam"
},
success : function(response) {
var jsonResp = Ext.JSON.decode(response.responseText);
functionStore.loadData(jsonResp);
console.log("Info", "UserName from Server 3: "+ jsonResp);
},
failure : function(response) {
var jsonResp = Ext.decode(response);
console.log("Error", jsonResp.error);
}
});
},
loadProduct: function(){
// create an AJAX request for product
var productStore = this.getProductStoreStore();
Ext.Ajax.request({
url : 'forms/loadProduct',
method : 'POST',
headers : {
'Content-Type' : 'application/json'
},
params : {
"test" : "testParam"
},
success : function(response) {
var jsonResp = Ext.JSON.decode(response.responseText);
productStore.loadData(jsonResp);
console.log("Info", "UserName from Server 4: "+ jsonResp);
},
failure : function(response) {
var jsonResp = Ext.decode(response);
console.log("Error", jsonResp.error);
}
});
},
loadUserData : function() {
// create an AJAX request for product
var userStore = this.getUserStoreStore();
Ext.Ajax.request({
url : 'forms/loadUser',
method : 'POST',
headers : {
'Content-Type' : 'application/json'
},
params : {
"test" : "testParam"
},
success : function(response) {
var jsonResp = Ext.JSON.decode(response.responseText);
userStore.loadData(jsonResp);
console.log("Info", "UserName from Server: "+ jsonResp);
},
failure : function(response) {
var jsonResp = Ext.decode(response);
console.log("Error", jsonResp.error);
}
});
}


});