Grid not rendering in cmp

160 Posts

insomnix Reply #1, 11 years, 11 months ago

I'm trying to build a cmp in revo 2.3. I'm getting some odd results. The panel renders fine and everything appears to come together until I add the grid. Then the custom script does not render and there are no errors displaying in firebug. I'm at a loss. I've even stripped the grid down to the very basics.

My Controller:

class DoodleHomeManagerController extends modExtraManagerController {
    public $doodle;
    public function initialize() {
        $this->doodle= new Doodle($this->modx);
        $this->addJavascript($this->doodle->config['jsUrl'].'mgr/doodle.js');
        $this->addHtml('<script type="text/javascript">
        Ext.onReady(function() {
            Doodle.config= '.$this->modx->toJSON($this->doodle->config).';
        });
        </script>');
        return parent::initialize();
    }
    public function getLanguageTopics() {
        return array('doodle:default');
    }
    public function checkPermissions() { return true; }
    public function getPageTitle() {
        return $this->modx->lexicon('doodle.simple_cart');
    }
    public function loadCustomCssJs() {
        $this->addJavascript($this->doodle->config['jsUrl'].'mgr/widgets/home/test.grid.js');
        $this->addJavascript($this->doodle->config['jsUrl'].'mgr/widgets/home/home.panel.js');
        $this->addJavascript($this->doodle->config['jsUrl'].'mgr/sections/home.js');
    }
    public function getTemplateFile() {
        return 'home.tpl';
    }
}

My home panel (works fine if I comment out the grid:

// JavaScript Document
Doodle.panel.Home = function(config) {
    config = config || {};
    Ext.apply(config,{
        border: false
        ,baseCls: 'modx-formpanel'
        ,cls: 'container'
        ,items: [{
            html: '<h2>'+_('doodle')+'</h2>'
            ,border: false
            ,cls: 'modx-page-header'
        },{
            xtype: 'modx-tabs'
            ,defaults: { border: false ,autoHeight: true }
            ,border: true
            ,items: [{
                title: _('doodle.test')
                ,defaults: { autoHeight: true }
                ,items: [{
                    html: '<p>'+_('doodle.test.desc')+'</p>'
                    ,border: false
                    ,bodyCssClass: 'panel-desc'
                },{
                    xtype: 'doodle-grid-test'
                    ,cls: 'main-wrapper'
                    ,preventRender: true
                }]
            }]
        }]
    });
    Doodle.panel.Home.superclass.constructor.call(this,config);
};
Ext.extend(Doodle.panel.Home,MODx.Panel);
Ext.reg('doodle-panel-home',Doodle.panel.Home);

My stripped down grid:

Doodle.grid.Test = function(config) {
    config = config || {};
    Ext.applyIf(config, {
        fields: ['id','menu']
        ,columns: [{
            header: _('id')
            ,dataIndex: 'id'
            ,sortable: true
            ,width: 100
        }]
    });
    Doodle.grid.Test.superclass.constructor.call(this, config);
};
Ext.extend(Doodle.grid.Test, MODx.grid.Grid);
Ext.reg('doodle-grid-test', Doodle.grid.Test);

What am I doing wrong

5,888 Posts

Bruno17 Reply #2, 11 years, 11 months ago

you could also try this easier way to build your CMP
http://rtfm.modx.com/extras/revo/migxdb/migxdb.tutorials/migxdb.create-doodles-manager-with-help-of-migxdb

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

160 Posts

insomnix Reply #3, 11 years, 11 months ago

I have some complex queries that will display in the grid as well as some additional popups and select boxes. It's going to be a complex custom page I'm putting together. If I was doing a simple display, add, update grid, I would definitely look at that closer.

5,888 Posts

Bruno17 Reply #4, 11 years, 11 months ago

There was nothing, what I couldn't do with a MIGXdb - CMP, so far.
Would be interesting to know, what your special requirements are. [ed. note: Bruno17 last edited this post 11 years, 11 months ago.]

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

160 Posts

insomnix Reply #5, 11 years, 10 months ago

So part of the problem was that the "url" field is required. If it's not there then nothing renders. The other problem appears to be that "Doodle.config.connectorUrl" is not passing on the required data to "url". Yet when I use firefox with firebug, the watch window contains a value for "Doodle.config.connectorUrl". I hard code url and everything works fine.

Doodle.grid.Test = function(config) {
    config = config || {};
    Ext.applyIf(config, {
        url: '/Doodle/assets/components/doodle/connector.php'
        //url: Doodle.config.connectorUrl
        ,fields: ['id','menu']
        ,columns: [{
            header: _('id')
            ,dataIndex: 'id'
            ,sortable: true
            ,width: 100
        }]
    });
    Doodle.grid.Test.superclass.constructor.call(this, config);
};
Ext.extend(Doodle.grid.Test, MODx.grid.Grid);
Ext.reg('doodle-grid-test', Doodle.grid.Test);

Thoughts as to what I'm doing wrong? Am I missing something in my controller?

24,544 Posts

BobRay Reply #6, 11 years, 10 months ago

Apparently, the variable Doodle.config.connectorUrl is not being set, or not correct.

It's defined in the Doodles class constructor.

It's added to the JS in the base controller:

Ext.onReady(function() {
    Doodles.config = '.$this->modx->toJSON($this->doodles->config).';
});

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

160 Posts

insomnix Reply #7, 11 years, 10 months ago

Yes, I have that line in the controller. Yet it does not appear to load the config into extjs before it renders my grid because, as I step through the the code, connectorUrl has no value. Yet after the page loads I can look at firebug and see that doodles contains a connectorUrl value. You can see my entire controller file in the first post.

24,544 Posts

BobRay Reply #8, 11 years, 10 months ago

Quote from: insomnix at Nov 25, 2014, 01:38 AM

Yes, I have that line in the controller.

No, you have:

Doodles.config = '.$this->modx->toJSON($this->doodle->config).';

Try adding an 's' to the end of 'doodle'. wink

Did I help you? Buy me a beer
Get my Book: MODX:The Official Guide
MODX info for everyone: http://bobsguides.com/modx.html
My MODX Extras
Bob's Guides is now hosted at A2 MODX Hosting

160 Posts

insomnix Reply #9, 11 years, 9 months ago

Good thing I wasn't in a hurry to work this out. I don't know why, but with the addon I was creating for 2.3, I couldn't get the config data to load. But when I converted all the "addJavascript" to "addLastJavascript" the grid started working. I don't really know all the intricacies of the extjs format, but the "addHtml" loads the config after "addJavascript" and doesn't pass the config data to the custom grid, where "addLastJavascript" loads on the page after "addHtml". My controller now looks something like this:

class DoodleHomeManagerController extends modExtraManagerController {
    public $doodle;
    public function initialize() {
        $this->doodle= new Doodle($this->modx);
        $this->addLastJavascript($this->doodle->config['jsUrl'].'mgr/doodle.js');
        $this->addHtml('<script type="text/javascript">
        Ext.onReady(function() {
            Doodle.config= '.$this->modx->toJSON($this->doodle->config).';
        });
        </script>');
        return parent::initialize();
    }
    public function getLanguageTopics() {
        return array('doodle:default');
    }
    public function checkPermissions() { return true; }
    public function getPageTitle() {
        return $this->modx->lexicon('doodle.simple_cart');
    }
    public function loadCustomCssJs() {
        $this->addLastJavascript($this->doodle->config['jsUrl'].'mgr/widgets/home/test.grid.js');
        $this->addLastJavascript($this->doodle->config['jsUrl'].'mgr/widgets/home/home.panel.js');
        $this->addLastJavascript($this->doodle->config['jsUrl'].'mgr/sections/home.js');
    }
    public function getTemplateFile() {
        return 'home.tpl';
    }
}

and everything works again.