Question

I accidentally deleted this post before, so I am resubmitting :\

I’m new to Ext JS and MVC in general and am toying with creating an app with a chart nested within a panel nested within a border panel within an app. [From top to bottom it goes Viewport > bordered panel > panel in ‘center region’ > chart]

The reason why I’m nesting a panel within the border panel is that the nested panel will hold both the chart as well as a toolbar for the chart, both of which are dynamic depending on the user’s selection.

While simply having the border panel reference the externally defined chart view works well, once I try having it reference an externally defined panel view it throws ‘Uncaught TypeError: Cannot call method ‘substring’ of undefined’, and Aptana gives me a ‘name is undefined’ namespace error whether or not I have the nested panel reference the chart or simply be left empty. I have double checked my name spacing so I’m a little lost in where to start looking for the problem.

My base application file is as follows:

Ext.application({
    name: 'Chart',

    appFolder: 'chart',

    controllers:['sidebar.Navigation', 'commoditycontrol.Commoditycontrol',    
    'chart.oil.Spreads'],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [{
                region: 'north',
                xtype: 'commoditycontrol',
            }, {
                region: 'east',
                xtype: 'sidebarnavigation',
            }, {
                region: 'center',
                xtype: 'oilbase',
            }]
        });
    },

});

The ‘oilbase’ view is simply a panel that imports the chart and chart toolbar view (in this case I’ve left the toolbar view out)

Ext.define('Chart.view.base.Oil', {
   extend: 'Ext.panel.Panel',
   alias: 'widget.oilbase',

   name: 'oilbase',
   layout: 'fit',

   items: [{
       xtype: 'oilspreads'
   }]

});

And here’s the chart view ‘oilspreads’

Ext.define('Chart.view.chart.oil.Spreads', {
   extend: 'Ext.chart.Chart',
   alias: 'widget.oilspreads',

   name: 'oilspreads',
   layout: 'fit',
   store: 'Chart.store.oil.Spreads',
   config: {
   style: {
            background: '#333333'
          },
    },

    axes: [
        {
            title: 'Close',
            type: 'Numeric',
            position: 'left',
            fields: ['close'],
            minimum: 0,
            maximum: 100,
            cls: 'axis'
        },
        {
            title: 'Month',
            type: 'Category',
            position: 'bottom',
            fields: ['month'],
            cls: 'axis'
        }
    ],

    series: [
        {
            type: 'line',
            xField: 'month',
            yField: 'close'
        }
    ]
});

Again, everything works fine if I reference the chart view in the application rather than the ‘oilbase’ empty panel. If I reference the default panel xtype, everything works as well.

Is nesting panels simply discouraged? My gut feeling is that I’m simply missing an obvious namespacing issue but I would appreciate a 2nd set of eyes, as well as comments as to my approach to the MVC pattern for ExtJs in general.

Thanks

Answer 1

For the view to be loaded correctly it has to be defined either in the views config of your app, or in the views config of one of the controllers.