PDA

View Full Version : Error code I am not understanding



LedrickLeron
6 Mar 2008, 1:45 PM
A[C.xtype || D] is not a constructor

has to deal with this bit of code.... what is happing is I am clicking on a link to load a new tab window based on MediaPanel code found on this site.



var Demo = {
init: function(){
var get = Ext.getCmp;
this.tree = get('samples');
this.tabs = get('demoTabs');
var sm = this.tree.getSelectionModel();

this.tree.on('click', this.handlers.nodeSelect.createDelegate(this,[sm],0));
},
handlers:{
nodeSelect:function( smodel, treeNode, e ){

//A folder or already selected
if(!treeNode.isLeaf()) {return false;}
var NA = treeNode.attributes || {};
var id = NA.id.split('\/')[2] || false; //derive a tab id from node.id

var tab;
if(tab = this.tabs.getItem(id)){
this.tabs.setActiveTab(tab);
tab.renderMedia(); //force media Refresh
} else {
tab = this.tabs.add({
xtype : NA.mediaClass || 'mediapanel'
,id : id || (id=Ext.id())
,mediaCfg: NA.config
,title : NA.tabTitle || NA.text || id
,listeners: NA.listeners || false
,items : NA.items || []
});
this.tabs.setActiveTab(tab);
}
}
}
};

mjlecomte
6 Mar 2008, 2:20 PM
Are you using ext-all.js or ext-all-debug.js? Make sure you're using the debug version and then check with firebug again.

LedrickLeron
6 Mar 2008, 2:39 PM
I used ext-all-debug.js received Ext.onReady is not a function???????

then i left the ext-all.js with ext-all-debug.js in there and got Ext.isArray is not a function then just removed the ext-all-debug.js and received the same message....

In IE i am still able to bring up my site, but in firefox it is broken completely with Ext.isArray is not a function

Ext-2.0.2

tryanDLS
6 Mar 2008, 3:56 PM
Are you sure about the files you're including? Can you verify with firebug that you're not getting 404s? Also are you including any other JS files on the page?

mjlecomte
6 Mar 2008, 4:13 PM
Please post the head section of your html where it shows the files you are including.

You'll want to verify you are including the files in the correct order.

LedrickLeron
6 Mar 2008, 5:57 PM
Here is my header and index.php file



<?php
include('includes/functions.php');
include('includes/FusionCharts.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" xmlns:ext="http://extjs.com/docs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SANMOBILITY - DashBoard</title>
<link rel="stylesheet" type="text/css" href="styles/ext-all.css" />
<link rel="stylesheet" type="text/css" href="styles/xtheme-darkgray.css" />
<style type="text/css">

#background {margin:5px;}
.x-media {display:block;}
</style>

</head>
<body>
<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator"><img src="images/wait.gif" style="margin-right:8px;" align="absmiddle"/>Loading...</div>
</div>

<script type="text/javascript" src="js/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all-debug.js"></script>
<script type="text/javascript" src="js/FusionCharts.js"></script>
<script type="text/javascript" src="js/mediapanel.js"></script>
<script type="text/javascript" src="js/buildMain.php"></script>

</body> </html>



The weird thing is i can not even get the page to load any more on FireFox ... grrrrrrr

mjlecomte
6 Mar 2008, 6:37 PM
Please verify you have a file at js/ext/ext-base.js

You appear to have moved stuff around from the default locations, which is fine, but you'll have to be cautious with the relative references, etc.

In my setup the ext-base.js file is inside an "adapter" directory as well.

In firebug, you can go to console and at the bottom of it is >>>
At that point you can type in commands. Type in Ext.util

What does it say/do then? If you have Ext configured then you should see something like Object JSON=....
If it's set up wrong you'll get an undefined error.

When you say you can't see it in firefox what do you mean? Do you have errors reported in firebug?

A screenshot would be helpful to help you.

LedrickLeron
6 Mar 2008, 9:28 PM
here is my directory structure:
$ ls js/ext/
ext-base.js

and the output of Ext.util is:
Object JSON=Object Format=Object CSS=Object

Screen Shot of what I mean is attached:
and the error says: Ext.isArray is not function

Thanks for all your help!!!

hendricd
6 Mar 2008, 9:40 PM
What is the Ext version number indicated in the comments section of ext-all.js and adapter/ext-base.js?

LedrickLeron
6 Mar 2008, 10:20 PM
vi js/ext-all.js

/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/

vi js/ext/ext-base.js
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/

LedrickLeron
6 Mar 2008, 10:30 PM
I just put back into place 2.0.1 and the site comes back up??? I still cant get the new tab function to work though.

THis time the error code is A has no properties.... Ext.Container=Ext.extend(Ext.BoxComponent,{autoDestroy....

Condor
6 Mar 2008, 11:31 PM
You should really use ext-all-debug.js instead of ext-all.js during debugging. It will give you a lot more information in the errormessage and the stacktrace.

hendricd
7 Mar 2008, 4:56 AM
@LedrickLeron -- Please post more of your code, we're flying a bit 'blind' out here.

LedrickLeron
7 Mar 2008, 9:49 AM
Okay... I have used just the ext-all-debug.js and all i get in return is Ext.onReady is not a function....

Here is all the code I am using for the home page:

js/buildMain.php


Ext.BLANK_IMAGE_URL = 'images/default/s.gif';
var CATEGORY_TYPES = [['0','hds'],['1','emc'],['2','ebr'],['3','eva']];
var LOCATIONS = [['0','Windward'],['1','2Bell'],['2','Bothell'],['3','Allen'],['4','NashVille'],['5','GDC'],['6','WWDC-LAB']];
var today = new Date();
var yar = today.getDate() -1;
//var yesterday = today.add(Date.DAY, -1);
var yesterday = '2007-11-28';

var globalGrid;
Ext.onReady(function() {
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
Ext.QuickTips.init();

this.Storage = new mainStorPanel();
this.Home = new HomePanel();
//this.Switch = new switchPanel();

var viewport = new Ext.Viewport({
layout:'border',
items: [{
region:'north',
height: 50,
border: false,
html:'<div id="header"><div class="api-title">SANMobility DashBoard - V0.2 </div></div>'
},{
region:'center',
border: false,
layout: 'fit',
items: {
id: 'main-tabs',
xtype:'tabpanel',
activeTab:0,
items:[this.Home,this.Storage]
}
},{
region:'south',
height:25,
border:false,
html:'<div id="footer" unselectable="on">Copyright <span>&copy;</span> <?php echo date('Y'); ?> AT&T - SANMobility Team </div>'
}]
});
});
// =================================================================================== //
/** =======================================================
* HomePanel.js
** ==================================================== */
var HomePanel = function() {

var sampleNodes = [{
text:'Documents'
,id:'docs'
,leaf:false
,iconCls:'folder'
,expanded:true
,children: [{
text: 'Acrobat'
,id: 'docspdf'
,leaf: true
,config: {
mediaType: 'PDF'
,url: 'ex1.pdf'
,id : 'ex1pdf'
,params: {page:2}
}
},{
text: 'HTML'
,id: 'docshtml'
,width: '100%'
,height: '100%'
,leaf: true
,config: {
mediaType: 'HTM'
,url: 'http://www.google.com/'
,id: 'bgoogle'
}
},{
text:'Excel'
,id:'\/docs\/excel'
,leaf:true
,config:{
mediaType :'XLS'
,url :'svc_pricing.xls'
,width :'100%'
,height :'100%'
,id :'xlspricing'
}
}]
}];

var Demo = {
init: function(){
var get = Ext.getCmp;
this.tree = get('samples');
this.tabs = get('demoTabs');
var sm = this.tree.getSelectionModel();

this.tree.on('click', this.handlers.nodeSelect.createDelegate(this,[sm],0));
},
handlers:{
nodeSelect:function( smodel, treeNode, e ){

//A folder or already selected
if(!treeNode.isLeaf()) {return false;}
var NA = treeNode.attributes || {};
var id = NA.id.split('\/')[2] || false; //derive a tab id from node.id

var tab;
if(tab = this.tabs.getItem(id)){
this.tabs.setActiveTab(tab);
tab.renderMedia(); //force media Refresh
} else {
tab = this.tabs.add({
xtype : NA.mediaClass || 'mediapanel'
,id : id || (id=Ext.id())
,mediaCfg: NA.config
,title : NA.tabTitle || NA.text || id
,listeners: NA.listeners || false
,items : NA.items || []
});
this.tabs.setActiveTab(tab);
}
}
}
};

HomePanel.superclass.constructor.call(this, {
layout: 'border',
title: 'Home Panel',
listeners: {
render: Demo.init,
scope: Demo,
single: true
},
items: [new HomeProps(), {
layout: 'accordion',
region: 'west',
title: 'Menu',
width: 190,
minWidth: 170,
maxWidth: 800,
split: true,
cmargins: '5 5 5 5',
collapsible: true,
border: false,
layoutConfig: {
animate: false
,activeOnTop: false
,autoWidth: true
,autoHeight: true
,fill: true
},
items: [{
id:'samples',
xtype:'treepanel',
autoScroll:true,
title: 'Main',
loader: new Ext.tree.TreeLoader(),
rootVisible:false,
lines:false,
autoScroll:true,
root: new Ext.tree.AsyncTreeNode({ text:'Online',
expanded:true,
children:sampleNodes
})
}]
}]
});
}

Ext.extend(HomePanel, Ext.Panel);

/** =======================================================
* HomeProps.js
** ==================================================== */
var HomeProps = function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
}];

var srts = new Ext.XTemplate(
'<div class="details">',
'<div class="details-info">',
'<b>Number of SRTS in Queue:</b> <span>{array}</span><br>',
'<b>Number of SRTS in SLA:</b> <span>{config_storeage}</span><br>',
'<b>Number of SRTS out of SLA:</b> <span>{alloc}</span><br>',
'<b>SRTS Assigned:</b> <span>{unalloc}</span><br>',
'<b>SRTS Unassigned:</b> <span>{location}</span><br>',
'</div>'
);
srts.compile();

var sysalarm = function() {
};

var storageOv = function() {
};

var switchOv = function() {
};

HomeProps.superclass.constructor.call(this, {
region:'center',
xtype: 'tabpanel',
id: 'demoTabs',
activeTab: 0,
enableTabScroll: false,
monitorResize: true,
autoDestroy: true,
layoutOnTabChange: true,
defaults: {
autoScroll: true,
closable: true,
height: 650,
style: {position: (Ext.isIE?'relative':'absolute')},
hideMode: (Ext.isIE?'display':'visibility')
},
items:[{
title: 'BackGrounder',
closable: false,
layout: 'fit',
items: [{
layout: 'column',
margins: '25 0 0 0',
autoScroll: true,
items:[{
columnWidth:.50,
border: false,
items:[{
id: 'panel-srts',
style:'padding:10px 10px 10px 10px',
title: 'SRTS Overview:',
tools: tools,
items: srts
},{
style:'padding:10px 10px 10px 10px',
title: 'System Alarming Overview:',
tools: tools,
items: srts
}]
},{
columnWidth:.50,
border: false,
items:[{
style:'padding:10px 10px 10px 10px',
title: 'Storage Overview:',
tools: tools
},{
style:'padding:10px 10px 10px 10px',
title: 'Switch Overview:',
tools: tools
}]
}]
}]
}]
});
}


That is everything that has to deal with what I want to work.

mjlecomte
7 Mar 2008, 10:10 AM
You need to have both:
ext-base.js
ext-all-debug.js

The order you include them in matters.
You must specify the proper url so that they are both included.

Problems like you are stating are due to the files not being included correctly.

The "debug" version of the file we keep telling you about, is a more nicely formatted version that you can step through in firebug and when firebug reports messages the variable names are more meaningful instead of "A" has no properties, which doesn't mean much, right?

My suggestion?
Go to your example directory. Load one of the sample/demo files and see that it works. Copy that folder to your own folder to try your code with. Verify the page still works with new location. THEN, start plopping in your revisions slowly.

There's a FAQ about this and there is a file in your download that explains the include order.

hendricd
7 Mar 2008, 10:21 AM
@LedrickLeron (http://extjs.com/forum/member.php?u=26885) - Have you been able to run any of the /examples in the Ext distribution heirarchy?

If they work (no complaints about Ext.onReady, etc) you still have not authored your page's head section to load Ext properly. Examine Firebug's (scripts tab) to determine if you are even loading any of the Ext framework (error 404?). If not, you are assumptions about the relative paths to the Ext library are still off.

This, for example, would be the relative addresses used to load Ext if your page sat in Ext-2.0.2/examples/tabs directory.



<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
You may not have your project arranged in the same heirarchy.

Is this your first Ext project?

LedrickLeron
7 Mar 2008, 10:37 AM
Examples hiarchary works fine, and all my code has worked perfectly before putting in the "var Demo" part... the example of the MediaPanel works fine, and that is the exact code I am using just to do a proof of concept here...

I can not get ext-all-debug.js to spit out any more detail in firebug than what I am already getting: the way I am loading my js scripts are the exact same way the examples directories are doing it and like I have said I have many other pieces of code that works, the only part that is not working is opening a new tab with the mediapanel link... I am loading MediaPanel.js before the buildMain.php which calls the MediaPanel....


<script type="text/javascript" src="js/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all-debug.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/FusionCharts.js"></script>
<script type="text/javascript" src="js/mediapanel.js"></script>
<script type="text/javascript" src="js/buildMain.php"></script>



The error that i get when i click a link (the same link that is in the MediaPanel example) is A has no properties

LedrickLeron
7 Mar 2008, 10:46 AM
Actually if i expand that i get all this:



initComponent(undefined)ext-all.js (line 64)
initComponent(undefined)ext-all.js (line 64)
initComponent()ext-all.js (line 64)
initComponent()ext-all.js (line 76)
initComponent()mediapanel.js (line 356)
Component(Object xtype=mediapanel id=ext-gen139 mediaCfg=Object)ext-all.js (line 58)
apply()ext-base.js (line 9)
apply()ext-base.js (line 9)
apply()ext-base.js (line 9)
apply()ext-base.js (line 9)
ComponentMgr(Object xtype=mediapanel id=ext-gen139 mediaCfg=Object, "panel")ext-all.js (line 57)
initComponent(Object xtype=mediapanel id=ext-gen139 mediaCfg=Object)ext-all.js (line 64)
initComponent(Object xtype=mediapanel id=ext-gen139 mediaCfg=Object)ext-all.js (line 64)
initComponent(Object xtype=mediapanel id=ext-gen139 mediaCfg=Object)ext-all.js (line 64)
nodeSelect(Object events=Object tree=[Tree samples], [Node docshtml] childrenRendered=false rendered=true, Object browserEvent=Event mouseout button=0 type=mouseout)buildMain.php (line 120)
apply()ext-base.js (line 9)
Observable()ext-all.js (line 12)
Observable()ext-all.js (line 12)
initComponent("click", [Node docshtml] childrenRendered=false rendered=true, Object browserEvent=Event mouseout button=0 type=mouseout, undefined, undefined, undefined, undefined)ext-all.js (line 99)
Tree("click")ext-all.js (line 55)
TreeNodeUI()ext-all.js (line 104)
TreeNodeUI(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all.js (line 104)
TreeEventModel(Object browserEvent=Event mouseout button=0 type=mouseout, [Node docshtml] childrenRendered=false rendered=true)ext-all.js (line 100)
TreeEventModel(Object browserEvent=Event mouseout button=0 type=mouseout, div#ext-gen138.x-tree-node-el)ext-all.js (line 100)
EventManager(Object browserEvent=Event mouseout button=0 type=mouseout)ext-all.js (line 13)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)
[Break on this error] Ext.Container=Ext.extend(Ext.BoxComponent,{autoDestroy:true,defaultType:"panel",...

hendricd
7 Mar 2008, 10:53 AM
You should be using either ext-all or ext-all-debug, not both:



<script type="text/javascript" src="js/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all-debug.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/FusionCharts.js"></script>
<script type="text/javascript" src="js/mediapanel.js"></script>
<script type="text/javascript" src="js/buildMain.php"></script>
<script type="text/javascript" src="js/ext/ext-base.js"></script>
Regarding your copy source: mediapanel: The reason the treeNode handler fails is because you are not using the treeNodes as defined in the original mediapanel examples.

Your treenodes don't have any usable node attributes compatible with what you copied over:



var sampleNodes = [{
text:'Documents'
,id:'docs'
,leaf:false
,iconCls:'folder'
,expanded:true
,children: [{
text: 'Acrobat'
,id: 'docspdf' wrong
id: '\/docs\/pdf'
,leaf: true
,config: {
mediaType: 'PDF'
,url: 'ex1.pdf'
,id : 'ex1pdf'
,params: {page:2}
}
},{
text: 'HTML'
,id: 'docshtml' wrong
,id: '\/docs\/html'
,width: '100%'
,height: '100%'
,leaf: true
,config: {
mediaType: 'HTM'
,url: 'http://www.google.com/'
,id: 'bgoogle'
}
},{
text:'Excel'
,id:'\/docs\/excel'
,leaf:true
,config:{
mediaType :'XLS'
,url :'svc_pricing.xls'
,width :'100%'
,height :'100%'
,id :'xlspricing'
}
}]
}];


If I may recommend, get a basic treePanel working first and learn from the experience rather than just blindly copying code from somewhere else without understanding what it does. /:)

If you have any specific questions about mediaPanel, ask about them over on the extensions forum (see sig link below).

LedrickLeron
7 Mar 2008, 11:06 AM
hendricd -

Thanks for the advice, and I do know that you are suppose to use one or the other of ext-all... however that is what I am explaining is that when I use the ext-2.0.1 or ext-2.0.2 ext-all-debug.js I get "Ext.onReady is not a function"... and as I said before and displayed is everything as far as versions match up... so confused. :-/

I have worked with the treepanel before but liked the mediaPanel and they way it was handling loading external html pages (which unfortently for the time being is what I need to do because of a rush job)

And thanks for pointing out the id tag was wrong, I had forgotten I changed it to remove back slashes (dont remember why i did that but I did)...

I am going to try just a regular treeloader again and see what happens (like the ones in the examples page) and like you said ask specific question about MediaPanel in the extensions forum...

Again thanks for all your help (everyone!!!)

here is the exact error : (from just using the ext-all-debug.js)


sp has no properties
[Break on this error] Ext={version:"2.0.1"};window["undefined"]=window["undefined"];Ext.apply=function...
ext-base.js (line 9)
Ext.onReady is not a function
[Break on this error] Ext.onReady(function() {