[ExtJs] Question about adding a second tab to a CMP [solved]

275 Posts

skndn60 Reply #1, 16 years ago

For a CMP I want to add a second tab to home panel:

            ,items: [{
                title: 'Tariffs'
                ,defaults: { autoHeight: true }
                ,items: [{
                    html: '<p>'+_('tariffs.management_desc')+'</p><br />'
                    ,border: false
                },{
                    xtype: 'tariffs-grid-tariffs'
                    ,preventRender: true
                }]
            },{
		title: 'Properties'
		,defaults: { autoHeight: true }
		,items: [{
			html: '<p>'+_('tariffs.property_management_desc')+'</p><br />'
			,border: false
		},{
			xtype: 'tariffs-grid-properties'
			,preventRender: true
		}]
            }]

The first tab ("Tariffs") displays and works fine. However when I add the second tab ("Properties") it crashes with an error in ext-all.js:
Uncaught TypeError: undefined is not a function

This error is caused by the second tab, which points to another ExtJs widget defined in another js file (properties.grid.js). This file is located in the same directory as all the other files ("widgets"), following the MODX standard for CMP’s.

When I remove the xtype: ’tariffs-grid-properties’ and replace with xtype: ’tariffs-grid-tariffs’ it works fine, so I suspect that something is wrong with the reference to the second xtype.

I can’t figure out what as the error is raised by ext-all.js which is impossible to debug.

Any ideas what I might have done wrong?

MODx Revolution / MAMP / OS X

4,149 Posts

splittingred Reply #2, 16 years ago

Sounds like there’s a problem with your tarriffs-grid-properties grid. Can you post that?

shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com

275 Posts

skndn60 Reply #3, 16 years ago

Yep, here it is:

Tariffs.grid.Properties = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'tariffs-grid-properties'
        ,url: Tariffs.config.connector_url
        ,baseParams: { action: 'mgr/property/getList' }
        ,save_action: 'mgr/property/updateFromGrid'
        ,fields: ['id','name','address','town','postcode']
        ,paging: true
        ,autosave: true
        ,remoteSort: true
        ,anchor: '97%'
        ,columns: [{
            header: _('id')
            ,dataIndex: 'id'
            ,sortable: false
            ,width: 2
        },{
            header: _('tariffs.property_name')
            ,dataIndex: 'name'
            ,sortable: true
            ,width: 30
            ,editor: { xtype: 'textfield' }
        },{
            header: _('tariffs.property_address')
            ,dataIndex: 'address'
            ,sortable: true
            ,width: 30
            ,editor: { xtype: 'textfield' }
        },{
            header: _('tariffs.property_town')
            ,dataIndex: 'town'
            ,sortable: false
            ,width: 30
            ,editor: { xtype: 'textfield' }
        },{
            header: _('tariffs.property_postcode')
            ,dataIndex: 'postcode'
            ,sortable: false
            ,width: 10
            ,editor: { xtype: 'textfield' }
        }]
    });
    Tariffs.grid.Properties.superclass.constructor.call(this,config)
};

Ext.reg('tariffs-grid-properties',Tariffs.grid.Properties);

MODx Revolution / MAMP / OS X

659 Posts

anso Reply #4, 16 years ago

Hello

Not sure about this but you don’t have any "Ext.extend(Tariffs.grid.Properties,MODx.grid.Grid)" before the line "Ext.reg(’tariffs-grid-properties’,Tariffs.grid.Properties);" ? I believed it was required to specify what kind of Modx element you’re extending off... Maybe I misunderstood...

Cheers

275 Posts

skndn60 Reply #5, 16 years ago

Thanks, I tried that but no change. Still a Javascript exception.

Hopefully splittingred can shed some light on this..... huh

MODx Revolution / MAMP / OS X

659 Posts

anso Reply #6, 16 years ago

I noticed you missed the " ; " at the end of "Tariffs.grid.Properties.superclass.constructor.call(this,config);"...

Step by step...
Cheers

275 Posts

skndn60 Reply #7, 16 years ago

Weird, that got somehow lost during the copy/paste into the post as it is in my source file.

Bang on: step by step...

Cheers

[EDIT]

Hmmm, I must have been looking at this for too long. That ; was actually missing in the source code. I now get an exception in the Home panel towards the end of the panel definition where you call the superclass:

    Tariffs.panel.Home.superclass.constructor.call(this,config);
    Uncaught TypeError: Cannot read property 'constructor' of undefined

MODx Revolution / MAMP / OS X

659 Posts

anso Reply #8, 16 years ago

Maybe an error in the Tariffs.panel.Home, could you post it ?
Too long time on the same code with the same eyes, and you read what "should" be there and not what IS there...
I often have the same problem...

Cheers

4,149 Posts

splittingred Reply #9, 16 years ago

If you’re *still* having problems, post your panel code as well. Hard to debug JS errors in isolation.

shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com

275 Posts

skndn60 Reply #10, 16 years ago

I surrender. I’m swamped in .[]{}().... shocked

This is my home panel (which works great without the second tab referring xtype=’tariffs-grid-properties’):

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

And this is my tariff-grid-properties grid:

Tariffs.grid.Properties = function(config) {
    config = config || {};
    Ext.applyIf(config,{
        id: 'tariffs-grid-properties'
        ,url: Tariffs.config.connector_url
        ,baseParams: { action: 'mgr/property/getList' }
        ,save_action: 'mgr/property/updateFromGrid'
        ,fields: ['id','name','address','town','postcode']
        ,paging: true
        ,autosave: true
        ,remoteSort: true
        ,anchor: '97%'
        ,columns: [{
            header: _('id')
            ,dataIndex: 'id'
            ,sortable: false
            ,width: 2
        },{
            header: _('tariffs.property')
            ,dataIndex: 'name'
            ,sortable: true
            ,width: 30
            ,editor: { xtype: 'textfield' }
        },{
            header: _('tariffs.address')
            ,dataIndex: 'address'
            ,sortable: true
            ,width: 30
            ,editor: { xtype: 'textfield' }
        },{
            header: _('tariffs.town')
            ,dataIndex: 'town'
            ,sortable: false
            ,width: 30
            ,editor: { xtype: 'textfield' }
        },{
            header: _('tariffs.postcode')
            ,dataIndex: 'postcode'
            ,sortable: false
            ,width: 10
            ,editor: { xtype: 'textfield' }
        }]
    });
    Tariffs.grid.Properties.superclass.constructor.call(this,config);
};
Ext.extend(Tariffs.grid.Properties,MODx.grid.Grid);
Ext.reg('tariffs-grid-properties',Tariffs.grid.Properties);

This gives a Uncaught TypeError: undefined is not a function in ext-all.js

My bet is that there’s a problem somewhere in that second source but I don’t see it....

MODx Revolution / MAMP / OS X