Model view controller 使用MVC在边框面板中嵌套ExtJS面板

我之前无意中删除了此帖子，因此我将重新提交：\

一般来说，我对ExtJS和MVC都是新手，我正在尝试创建一个应用程序，其中一个面板中嵌套了一个图表，一个应用程序中的边框面板中嵌套了一个图表。[从上到下依次为视口>边框面板>中间区域>图表中的面板]

我将面板嵌套在边框面板中的原因是，嵌套面板将同时容纳图表和图表工具栏，两者都是动态的，具体取决于用户的选择

虽然只是让边框面板引用外部定义的图表视图效果很好，但一旦我尝试让它引用外部定义的面板视图，它就会抛出“UncaughtTypeError:无法调用undefined”的方法“substring”，Aptana会给我一个“name is undefined”命名空间错误，不管我是否有嵌套面板引用图表，或者干脆将其留空。我已经仔细检查了我的名字间距，所以我有点不知道从哪里开始寻找问题

我的基本应用程序文件如下所示：

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',
            }]
        });
    },

});

“oilbase”视图只是一个面板，用于导入图表和图表工具栏视图（在本例中，我忽略了工具栏视图）

这是“石油价差”的图表视图

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'
        }
    ]
});

同样，如果我在应用程序中引用图表视图而不是“oilbase”空面板，那么一切都可以正常工作。如果我引用默认的panel xtype，那么一切都可以正常工作

是否只是不鼓励嵌套面板？我的直觉是，我只是错过了一个明显的名称空间问题，但我希望有第二双眼睛，以及对我的ExtJs MVC模式的总体方法的评论

---

感谢

要正确加载视图，必须在应用程序的视图配置或其中一个控制器的视图配置中定义视图。

虽然您显然花了时间解释了问题，但我仍然感到困惑。能否定义“外部定义图表”；如何引用图表视图；“油基”空面板是什么意思在我看来，你确实为它定义了一个项目。您提供的代码工作正常吗？是的，很抱歉不清楚。所谓外部定义的图表，我指的是在应用程序之外的另一个文件中定义的图表视图（我粘贴的“oilspreads”视图，最后的代码示例）。我所说的oilbase空面板是指除了在其“项目”中引用oilspreads图表之外的裸露面板。如果我将“oilspreads”图表设置为应用程序的一个项目，或者如果我将“oilbase”包含为应用程序的一个项目，但没有将oilspreads设置为oilbase的一个项目，则应用程序工作正常。仅当我将oilspreads设置为OilBase的一项时，它才会中断。我仍然不确定“作为应用程序的一项”是什么意思，因此，如果以下内容不相关，请原谅我：为了正确加载视图，必须在应用程序的

视图

配置中或在其中一个控制器的

视图

配置中定义它。你做到了吗？我所说的“应用程序项目”是指，当我直接在应用程序文件中引用图表时，应用程序可以很好地呈现图表，即项目：[{xtype:'oilspreads'上面的这些照片是针对我应用程序的MVC结构，而不是物理布局，我希望最终是这样的：再次感谢您的帮助

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'
        }
    ]
});