ExtJS使用MVC在面板中嵌套面板

时间:2012-07-02 20:51:52

标签: model-view-controller extjs4 extjs

之前我意外删除了这篇文章,所以我重新提交:\

我一般都是Ext JS和MVC的新手,并且正在创建一个应用程序,其中的图表嵌套在嵌套在应用程序中的边框面板中的面板中。 [从上到下它是Viewport>边界面板> “中心区域”中的面板>图表]

我在边框面板中嵌套面板的原因是嵌套面板既包含图表,也包含图表的工具栏,两者都是动态的,具体取决于用户的选择。

虽然简单地使用边框面板参考外部定义的图表视图效果很好,但是一旦我尝试引用外部定义的面板视图,它就会抛出'Uncaught TypeError:无法调用'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',
            }]
        });
    },

});

'油基'视图只是一个导入图表和图表工具栏视图的面板(在这种情况下我已经离开了工具栏视图)

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

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

   items: [{
       xtype: 'oilspreads'
   }]

});

这是图表视图'oilpreads'

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'空面板中引用图表视图,一切正常。如果我引用默认面板xtype,一切都可以正常工作。

简单地阻止嵌套面板?我的直觉是,我只是错过了一个明显的命名空间问题,但我很欣赏第二组眼睛,以及关于我对ExtJs的MVC模式的一般评论。

由于

1 个答案:

答案 0 :(得分:0)

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