PDA

View Full Version : [FIXED] c is not a constructor message at the very first example



HaukeG
27 Jun 2011, 9:45 AM
Hello everyone,

I get a strange message when I try the example application at
http://docs.sencha.com/ext-js/4-0/#/guide/application_architecture

I downloaded ext-js 4.0.2a and extracted all the content to

c:\dev\testing\extjs

and created the directory like said in the guide

c:\dev\testing\account_manager

here is the content of the index.html


<html>
<head>
<title>Account Manager</title>

<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">

<script type="text/javascript" src="../extjs/ext-debug.js"></script>

<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

and the app.js looks like this


Ext.application({
name: 'AM',

appFolder: 'app',

launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});


As soon as I open the index.html the page remains white without content. Firebug tells me

c is not a constructor
this.instanciators[len...return new c ('+args.join(',')+')');

at ext-debug.js (line 6456)


Can somebody help me with that?

Thanks a lot
Hauke

stevil
27 Jun 2011, 6:22 PM
do you get any 404 errors?

stevil

HaukeG
27 Jun 2011, 10:01 PM
Hey,

no, I checked all nodes underneath <html><head> inside firebug.
Each node has the complete JS content.

I am not used the syntax of javascript (I am more used to regular java),
but what does this line mean:


this.instantiators[length] = new Function('c', 'a', 'return new c('+args.join(',')+')');
Does this create a new function called "c"?
I am a little bit confused because I am stucked at the very first example.

Thanks for help and many greetings,
Hauke

stevil
28 Jun 2011, 3:37 AM
It creates, basically, an anonymous function that calls c(elements of array a, combined into a comma-delimited string)

My guess is that this is a problem with Ext.Loader setup. If you use ext-all-debug.js, does this still happen? Does the problem change in any way?

stevil

ext-spring-mvc
28 Jun 2011, 9:58 AM
I have similar issue to instantiate my own class via "Ext.create". If I use xtype style, everything is fine.

is it a bug? :-/

stevil
28 Jun 2011, 10:12 AM
Unfortunately, I think the only way to get past this is to see where in the call stack this is, and what it's trying to create?

stevil

HaukeG
28 Jun 2011, 11:39 AM
Hi,

now I tried it with ext.js.

Still same error but on line 15. But that is the reason because the whole file contains only one row. The whole ext.js has several lines of comments and only line of code (a very long line) :-)

How can that happen? This is the very first example and that isn't working? Should I try it with an older version of ext js 4?

Best regads,
Hauke

HaukeG
28 Jun 2011, 12:01 PM
And again,

I tried an older version of ext-js 4 and the error is gone, but still nothing happens (complete white page). Then I deleted the whole directory of ext-js again and copied the content of 4.0.2a again, and the error is still gone.
So I have no idea why this error is not there anymore.
Same result in IE and Firefox.

Thanks,
Hauke

ext-spring-mvc
29 Jun 2011, 4:10 AM
Unfortunately, I think the only way to get past this is to see where in the call stack this is, and what it's trying to create?

stevil

via call stack, it is trying to invoke constructor method of my self-defined class which extends Ext.tree.Panel or Ext.panel.Panel. which I don't understand is why there is no constructor? I didn't override constructor in my self-defined class so that I expected Extjs would call the parent's constructor instead.

stevil
29 Jun 2011, 5:21 AM
ok - so if it's trying to construct your extension, and the constructor doesn't exist, then that implies that Ext.define didn't work. The most likely reason (other than straight JS error), would be that the class you're extending is not loaded.

so, at the point of failure, can you go to the console and enter Ext.tree.Panel and then Ext.panel.Panel, and see if they're defined?

If they are, I'd look to see if you're having some sort of silent failure in Ext.define.

@hauke - I think you purged the elves from your configuration ;)


stevil

ext-spring-mvc
29 Jun 2011, 5:32 AM
they are loaded at the point of time. it is really annoying if it is some sort of failure in Ext.define but silent or swallowed by extjs. without accurate error message, I can't find the root cause and fix it. especially, it is not a standard js error.

once again, this morning I find another interesting issue. previously, I put all required classes in the "requires" block of my Ext.application. after reading the document saying that model referred in store via "model" config will be loaded automatically, I removed those models from "requires" block. now, I got "c is not a constructor" error when call Ext.create on my stores!

I like the new MVC architect. but all these silent problems/bugs...

stevil
29 Jun 2011, 5:37 AM
so if you put the models back into requires, it works?

stevil

ext-spring-mvc
29 Jun 2011, 6:29 AM
so if you put the models back into requires, it works?

stevil

yes, back to Ext.application, not Ext.define of the store which needs this model.

somehow, I thought I found the root cause. It is a part of how the new MVC architecture works.


I had the following lines in my tree panel, sometimes extjs execute the Ext.create before 'App.store.Tree' is loaded (the call in firebug listed as a XHR). I thought extjs MVC will load all required classes before processing configs. looks like I am wrong. don't have too much time to dig into mvc source code. hope sencha will provide better document about the fundamental of class loading and mvc architect. the current simple example doesn't explain much.



requires : [ 'App.store.Tree' ],
store : Ext.create('App.store.Tree'),



now I switched to use a controller which include store, and put store reference id instead of Ext.create. everything works now.

stevil
29 Jun 2011, 7:38 AM
All's well that ends...

stevil

HaukeG
30 Jun 2011, 8:48 PM
Hi,

thanks for the advise, even if that doesn't sound so good for me :-)

I will look through that during the weekend and will let you know any further information I will get.

Thanks to all and have a nice weekend.

Hauke

headkit
23 Aug 2011, 5:18 AM
*interested*

headkit
23 Aug 2011, 5:31 AM
I got it running with


Ext.Loader.setConfig({
enabled: true,
paths: {
'Ext': 'ext-4.0/src',
'yourAppName': 'app'
}
});

Ext.require([
'Ext.data.Store',
'Ext.data.StoreManager',
'Ext.data.HasManyAssociation',
'Ext.data.BelongsToAssociation',
'Ext.container.Viewport',
'Ext.grid.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*'
]);

akramsk79
3 Nov 2011, 3:23 AM
can you try by adding **** requires : [ 'Ext.container.Viewport'], ******* to Ext.application so that it looks lilke

Ext.application({

requires : [ 'Ext.container.Viewport'],

name: 'AM',

appFolder: 'app',


launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});

Dmitryilyin
4 Nov 2011, 4:51 AM
Try to use web server instead on opening files locally. Looks like loader doesnt work on local files.

Http proxies and chrome extensions work on web server only too.

sudeepcm
16 Nov 2011, 4:42 AM
I got the same error when i tried it for the first time and now it's working after adding
requires : [ 'Ext.container.Viewport'],
Thank you gyus =D>=D>

astronaute
26 Jan 2012, 3:00 PM
I have to bump this up because it should be added into documentation that missing part :
requires : [ 'Ext.container.Viewport'],

It really is annoying to have this kind of errors in first example of Getting Started doc:
http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started

Cheers

Phil Guerrant
26 Jan 2012, 3:43 PM
Added "requires" to the example code.

aeiou
23 Feb 2012, 9:18 AM
Added "requires" to the example code.
cool, it is better later than never, mate

cheers

Kwintai
1 Apr 2012, 3:27 AM
you should also mention again, that this account manager example is only working on a web server and not locally.

arunmatics
14 Jan 2014, 7:20 AM
Hi
i put this code inside of function. but my window will not open. any clue ? what could i missed ?
i got error like " Ext.create is not a function or constructor."
colors may differ the function.

thanks for your help.

Main function
Var hvstore;
function hostedVoipQual() {
hvstore.load({ params: { cuid: userName } });
}

hvstore = new Ext.data.Store(
{
nocache: true,
reader: sereader,
autoLoad: false,
autoDestroy: true,
remoteSort: false,
proxy: new Ext.data.HttpProxy(
{
url: 'http://' + servers[1] + '/QVOWS/Se.asmx/getSe',
timeout: 9000000,
method: 'GET'
})
});

hvstore.on('load', function () {
hostedvoipstore.load();
});


hostedvoipstore.on('load', function () {


// I CREATE TABLE USING GRID PANEL HERE. BUT MY WINDOW IS NOT OPEN. ANY CLUE ? WHAT COULD I MISSED ?
var store = Ext.create('Ext.data.Store', {
fields: [
'HOSTEDVOIP',
{ name: 'quantity', type: 'int' },
{ name: 'MRC', type: 'int' },
{ name: 'NRC', type: 'int' },
{
name: 'total', type: 'int',
convert: function(val, record) {
var qty = (record.data.quantity > 0) ? record.data.quantity : 1;
return (qty * (record.data.MRC));
}
},
{
name: 'totalNrc', type: 'int',
convert: function(val, record) {
var qty2 = (record.data.quantity > 0) ? record.data.quantity : 1;
return (qty2 * (record.data.NRC));
}
}
],

data: {
'items': [
{
HOSTEDVOIP: 'Basic Seats',
quantity: 1,
MRC: 100,
NRC: 50
}, {
HOSTEDVOIP: 'Conference Room Seats',
quantity: 1,
MRC: 200,
NRC: 100
}, {
HOSTEDVOIP: 'Standard Seats',
quantity: 1,
MRC: 10,
NRC: 8

]
},

proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
edit: function(editor, e, eOpts) {
e.record.set('total'); // Ext.MRC field is calculated
e.record.set('totalNrc'); // Ext.NRC field is calculated
}
}
});

var editText = {
xtype: 'textfield'
};

var editNumb = {
xtype: 'numberfield',
minValue: 0
};

var grid = Ext.create('Ext.grid.Panel', {
width: 600,
height: 140,
renderTo: document.body,

store: store,

columns: [{
dataIndex: 'HOSTEDVOIP',
text: 'Seat Type',
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.String.format('TOTAL', value, value !== 1 ? '' : '');
}
}, {
dataIndex: 'quantity',
text: 'Quantity',
editor: editNumb
}, {
dataIndex: 'MRC',
text: 'MRC',
summaryType: 'sum'
}, {
dataIndex: 'NRC',
text: 'NRC',
summaryType: 'sum'
}, {
dataIndex: 'total',
text: 'EXT.MRC',
summaryType: 'sum'
}, {
dataIndex: 'totalNrc',
text: 'EXT.NRC',
summaryType: 'sum'
}],

features: [{
ftype: 'summary'
}],

plugins: [cellEditing],

});

// TABLE ENDED
});

Thanks,
Santhosh