【问题标题】:ExtJS Nesting panels within border panels with MVCExtJS 使用 MVC 在边框面板中嵌套面板
【发布时间】:2012-07-02 20:51:51
【问题描述】:

我之前不小心删除了这个帖子,所以我重新提交:\

我通常是 Ext JS 和 MVC 的新手,我正在玩弄创建一个应用程序,该应用程序的图表嵌套在一个面板内,该面板嵌套在应用程序内的边框面板内。 [从上到下依次为视口 > 边框面板 > '中心区域' 中的面板 > 图表]

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

虽然简单地让边框面板引用外部定义的图表视图效果很好,但一旦我尝试让它引用外部定义的面板视图,它就会抛出“未捕获的类型错误:无法调用未定义的方法‘子字符串’”,并且 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.base.Oil', {
   extend: 'Ext.panel.Panel',
   alias: 'widget.oilbase',

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

   items: [{
       xtype: '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'
        }
    ]
});

同样,如果我在应用程序中引用图表视图而不是“oilbase”空面板,一切正常。如果我引用默认面板 xtype,一切正常。

只是不鼓励嵌套面板吗?我的直觉是,我只是遗漏了一个明显的命名空间问题,但我希望看到第二组眼睛,以及我对 ExtJs 的 MVC 模式的方法的 cmets。

谢谢

【问题讨论】:

  • 虽然您显然花时间解释了您的问题,但我仍然感到困惑。你能定义“外部定义的图表”吗?你如何参考图表视图; 'oilbase'空面板是什么意思? - 在我看来,您确实为它定义了一个项目。您提供的代码工作正常吗?
  • 是的,我很抱歉不清楚。通过外部定义的图表,我的意思是在应用程序之外的另一个文件中定义的图表视图(我粘贴的 'oilspreads' 视图,最后一个代码示例)。油基空面板是指除了在其“项目”中引用油层图表之外的空面板。如果我将“oilspreads”图表设置为应用程序的一个项目,或者如果我将“oilbase”作为应用程序的一个项目但不将 oilspreads 设置为 oilbase 项目,则该应用程序工作正常。仅当我将油膜设置为油基项目时,它才会中断
  • 我仍然不确定你所说的“作为应用程序的一个项目”是什么意思,所以如果以下内容不相关,请原谅我:要正确加载视图,它必须在您的应用程序的views 配置,或其中一个控制器的views 配置。你做到了吗?
  • “应用程序的项目”是指当我直接在应用程序文件中引用图表时,应用程序可以很好地呈现图表,即项目:[{ xtype: 'oilspreads' i.imgur.com/KkLtf.png 这是我失败的结构:i.imgur.com/d0qmm.png 我的应用程序的视图配置是什么意思?你有一个例子吗?我在图表的控制器中定义了我的视图来加载图表数据,如果这就是你的意思
  • 上面的这些照片是我的应用程序的 MVC 结构,而不是物理布局,我想最终是这样的:i.imgur.com/y1zLu.png 再次感谢您到目前为止的帮助

标签: model-view-controller extjs4 extjs


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-21
    • 2012-06-04
    相关资源
    最近更新 更多