No panel/section displayed in doodles tutorial?

Hi everyone

I am working through the Developing an Extra in MODX Revolution, Part II tutorial.

But when I get to the stage where the CMP should be first rendered (to check prior to adding the grid), nothing is rendered at all. I am fighting to debug what is wrong here.

It seems to be around the div tag? But I can't work it out!

If I refresh the page in the manager for my doodles action, I get the main Revolution page framework all displayed (menu and resources etc), but blank where the section/panel should be. This is just prior to adding the grid to test that the panel displays, halfway through the tutorial.

If I view the HTML source of the page, I see at the bottom:

<div id="modx-mainpanel">
<div id="modAB"></div>
<div id="modx-leftbar"></div>
<div id="modx-content">
<div id="modx-panel-holder"></div>
<div id="doodles-panel-home-div"></div>
</div>
</div>

Also I can see that all the required JS files have been included at the top of the page ... so all looks right and no reported errors.

But the div with id="doodles-panel-home-div" produces no content.

I have also tested that if I change my index.php file (containing these div tags, and put text content within the div and /div, it displays that text ....

How do I start debugging this one?

Ok some additional files to help here:

The panels file looks like this:

Doodles.panel.Home = function(config) {
config = config || {};
Ext.apply(config,{
border: false
,baseCls: 'modx-formpanel'
,items: [{
html: '<h2>'+_('doodles.management')+'</h2>'
,border: false
,cls: 'modx-page-header'
},{
xtype: 'modx-tabs'
,bodyStyle: 'padding: 10px'
,defaults: { border: false ,autoHeight: true }
,border: true
,items: [{
title: _('doodles')
,defaults: { autoHeight: true }
,items: [{
html: '<p>'+_('doodles.management_desc')+'</p>
'
,border: false
},{
xtype: 'doodles-grid-doodles'
,preventRender: true
}]
}]
}]
});
Doodles.panel.Home.superclass.constructor.call(this,config);
};
Ext.extend(Doodles.panel.Home,MODx.Panel);
Ext.reg('doodles-panel-home',Doodles.panel.Home);




My section file looks this (which indicates it is going to render to the correct div tag ID

Ext.onReady(function() {
MODx.load({ xtype: 'doodles-page-home'});
});

Doodles.page.Home = function(config) {
config = config || {};
Ext.applyIf(config,{
components: [{
xtype: 'doodles-panel-home'
,renderTo: 'doodles-panel-home-div'
}]
});
Doodles.page.Home.superclass.constructor.call(this,config);
};
Ext.extend(Doodles.page.Home,MODx.Component);
Ext.reg('doodles-page-home',Doodles.page.Home);


I have also added code to double check that these file do in fact exist for the regClientStartupScript call(s) in index.php so I know the paths are correct and files in the right place. They are web accessible (I can view the 2 JS files in my browser).

Timothy, please put your code in code tags by selecting it and clicking on the code button in the toolbar above the message. It will preserve the indentation and do some highlighting that will make it much easier for people to read it and spot errors.

I was having the same problem. Basically the Javascript was crash when it tried to render the grid - so no output.

What I found was a bug in doodles.grid.js at:



Doodles.config.connectorUrl was not defined. When I changed the line and hard coded a link to connector.php everything worked.

In my case:



I still haven't figured out why it isn't being defined - but, for now, I am just using the work around.

There was a bug in the docs, though that has been fixed for a few weeks now I think.

This part:

should be commented out when you're at that stage of the tutorial. It will be added later in the tutorial, but at that point of time it is causing the javascript framework to have issues as it can't find the "doodles-grid-doodles" xtype.

Hi Mark -

That section was commented out in the tutorial and it worked up to that point. I was having trouble after I created the grid elements and removed the comments. Once I hard coded 'url' path the the grid loaded properly.

The one thing I am doing different is I am working on a full Revo installation on my test server, so I didn't need to create a config.core.

BTW - should the tutorial say change



to



instead of