[CLOSED] adding a ListView to a panel causes page to display incorrectly

[webarnie]

Using Ext Designer, build xds-1.0.3.2 and adding a ListView to a panel causes page to display incorrectly. The following error is produced. Adding a ListView to a window causes the same problem.

The following error occurs ext-all-debug.js line 11308

Uncaught TypeError: Cannot call method 'on' of undefined

Is there a work around to this problem or a code fix?

I attached the project file to this thread. Thank you for your help

[jarrednicholls]

Hi webarnie,

That error indicates an undefined/invalid reference being used. Did you check the stack trace in Firebug or Web Inspector to see where in your code this error is stemming?

[webarnie]

I'm using chrome set a break point on the line that is causing the problem, 11308 in ext-all-debug. Checking the call stack back to my code or rather the code the ext designer generated is

BillingOptionApplicationUi.superclass.initComponent.call(this);

here is the full code

/*
 * File: BillingOptionApplication.ui.js
 * Date: Thu Jan 27 2011 14:53:32 GMT-0500 (Eastern Standard Time)
 * 
 * This file was generated by Ext Designer version xds-1.0.3.2.
 * http://www.extjs.com/products/designer/
 *
 * This file will be auto-generated each and everytime you export.
 *
 * Do NOT hand edit this file.
 */

BillingOptionApplicationUi = Ext.extend(Ext.Viewport, {
    layout: 'border',
    initComponent: function() {
        this.items = [
            {
                xtype: 'window',
                title: 'Billing Options',
                width: 100,
                height: 400,
                region: 'center',
                hidden: false,
                draggable: false,
                resizable: false,
                initHidden: false,
                closable: false,
                maskDisabled: false,
                autoHeight: true
            },
            {
                xtype: 'window',
                title: 'Menu',
                width: 150,
                height: 250,
                region: 'west',
                tpl: '',
                animCollapse: false,
                collapseFirst: false,
                draggable: false,
                hidden: false,
                initHidden: false,
                resizable: false,
                closable: false,
                layout: 'table',
                floatable: false,
                autoHide: false,
                animFloat: false,
                layoutConfig: {
                    columns: 1
                },
                items: [
                    {
                        xtype: 'label',
                        text: 'Payments',
                        width: 150
                    },
                    {
                        xtype: 'button',
                        text: 'Apply Return Premium',
                        width: 150,
                        scale: 'medium',
                        id: 'applyReturnPremium'
                    },
                    {
                        xtype: 'button',
                        text: 'One Time Payment',
                        width: 150,
                        scale: 'medium',
                        id: 'oneTimePayment'
                    },
                    {
                        xtype: 'button',
                        text: 'Payroll Deductions',
                        width: 150,
                        scale: 'medium',
                        id: 'payrollDeductions'
                    },
                    {
                        xtype: 'button',
                        text: 'Premiun Remittance',
                        width: 150,
                        scale: 'medium',
                        id: 'premiunRemittance'
                    },
                    {
                        xtype: 'spacer',
                        width: 150,
                        height: 30
                    },
                    {
                        xtype: 'label',
                        text: 'Billing',
                        width: 150
                    },
                    {
                        xtype: 'button',
                        text: 'Enroll APP',
                        width: 150,
                        scale: 'medium',
                        id: 'enrollAPP'
                    },
                    {
                        xtype: 'button',
                        text: 'Update APP',
                        scale: 'medium',
                        width: 150,
                        id: 'updateAPP'
                    },
                    {
                        xtype: 'button',
                        text: 'Messages',
                        width: 150,
                        scale: 'medium',
                        id: 'messages'
                    },
                    {
                        xtype: 'button',
                        text: 'Change Bill Due Date',
                        width: 150,
                        scale: 'medium',
                        id: 'changeBillDueDate'
                    },
                    {
                        xtype: 'button',
                        text: 'Send Bill To',
                        width: 150,
                        scale: 'medium',
                        id: 'sendBillTo'
                    },
                    {
                        xtype: 'button',
                        text: 'Email',
                        width: 150,
                        scale: 'medium',
                        id: 'email'
                    },
                    {
                        xtype: 'button',
                        text: 'Cancel Delinquent Notices',
                        width: 150,
                        scale: 'medium',
                        id: 'cancelDelinquentNotices'
                    },
                    {
                        xtype: 'spacer',
                        width: 150,
                        height: 30
                    },
                    {
                        xtype: 'label',
                        text: 'Transaction',
                        width: 150
                    },
                    {
                        xtype: 'button',
                        text: 'History',
                        width: 150,
                        scale: 'medium',
                        id: 'history'
                    },
                    {
                        xtype: 'spacer',
                        width: 150,
                        height: 30
                    },
                    {
                        xtype: 'label',
                        text: 'Payroll/Pension',
                        width: 150
                    },
                    {
                        xtype: 'button',
                        text: 'Deduction',
                        width: 150,
                        scale: 'medium',
                        id: 'deduction'
                    },
                    {
                        xtype: 'tbfill'
                    }
                ]
            },
            {
                xtype: 'window',
                title: '',
                width: 100,
                height: 150,
                region: 'north',
                animCollapse: false,
                collapseFirst: false,
                maskDisabled: false,
                closable: false,
                draggable: false,
                expandOnShow: false,
                hidden: false,
                initHidden: false,
                resizable: false,
                id: '',
                items: [
                    {
                        xtype: 'panel',
                        title: 'Account Information'
                    },
                    {
                        xtype: 'listview',
                        columnResize: false,
                        columns: [
                            {
                                xtype: 'lvcolumn',
                                header: 'Column',
                                width: 0.25
                            },
                            {
                                xtype: 'lvcolumn',
                                header: 'Column'
                            },
                            {
                                xtype: 'lvcolumn',
                                header: 'Column'
                            }
                        ]
                    }
                ]
            }
        ];
        BillingOptionApplicationUi.superclass.initComponent.call(this);
    }
});

The project was attached on the first post.

[jarrednicholls]

You must supply a store to your ListView. Any store-based component will not operate correctly without a store. That is why you are warned about a missing store when you export your project.