Sencha touch 面板中的Sencha Touch 2.0数据视图

我有一个问题，我已经挣扎了很长一段时间，所以希望有人可以帮助我在这里

假设您拥有此DataView对象：

Ext.define('Score.view.GameInfoPanel', {
    extend: 'Ext.DataView',

    config: {       
        store: {
            fields: ['Name', 'Score'],
            data: [
                {Name: 'test', Score: '1'},
                {Name: 'test2', Score: '100'}
            ]
        },
        itemTpl: '{Name} - {Score}',
        fullscreen: false
    }
});

我想我可以在不同的面板上使用此DataView的实例，如下所示：

var gameInfo = Ext.create('Score.view.GameInfoPanel',  {
    xtype: 'gameInfo',
    scrollable: false,
    fullscreen: false,
    height: 100,
    flex: 2,
});


Ext.define('Score.view.PlayerView', {
    extend: 'Ext.Panel',
    xtype: 'playerview',

    requires: [
        'Score.view.GameInfoPanel'
    ],

    config: {
        title: 'Player Info',
        iconCls: 'user',

        layout: 'vbox',
        scrollable: true,

        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                id: 'toolbarId',
                title: 'Player Info',
            },
            {
                xtype: 'panel',
                html: 'before',
                flex: 1
            },
            gameInfo,
            {
                xtype: 'panel',
                html: 'after',
                flex: 3
            }
        ]
    }
});

当我在Safari中显示这个面板时，我看到DataView在页面/面板中，但它是隐藏的。问题可能是为这个DataView实例设置了x-item-hidden。经过几个小时的努力，我不知道为什么会这样，也不知道如何解决这个问题。我能找到的唯一建议是，我应该设置DataView的高度，使其不可滚动。所有这些似乎都不起作用。因此，任何反馈都将非常感谢

该示例代码运行良好

“我想我可以在不同的面板上使用此DataView的实例，如下所示：”

这可能是个线索。上次我在一个extjs项目中尝试创建和引用-same-object时，遇到了类似的情况。您应该使用别名，并通过小部件对其进行实例化

或多或少：

---

如果你真的需要在两个地方使用相同的面板来选择和填充，那么我不太确定。

花了一段时间，但我最终解决了它。最初的代码有一些问题

在GameInfoPanel的定义中，不应使用配置属性“fullscreen”。我不太清楚为什么。但据我所知，使用此视图的视图已经设置了此属性。通过再次设置，即使将其设置为false，也会隐藏视图

此外，还应设置“xtype”属性。在本例中，我将其设置为“gameinfo”。这是因为您可以在PlayerView中配置此视图。此外，通过设置“id”，您还可以在控制器中引用GameInfoPanel的此实例。因此PlayerView最终看起来是这样的：

Ext.define('Score.view.PlayerView', {
  extend: 'Ext.Panel',
  xtype: 'playerview',

  requires: [
      'Score.view.PlayerInfoPanel',
      'Score.view.GameInfoPanel'
  ],

  config: {
      title: 'Player Info',
      iconCls: 'user',
      layout: 'vbox',
      scrollable: true,

      items: [
          {
              docked: 'top',
              xtype: 'toolbar',
              id: 'toolbarId',
              title: 'Player Info'
          },
          {
              xtype: 'playerinfo',
              id: 'currentPlayerInfoId',
              flex: 1,
              scrollable: false
          },
          {
              xtype: 'gameinfo',
              id: 'currentGameInfoId',
              flex: 2,
              scrollable: false
          }
       ]
    }
});

---

该守则在本网站上确实有效。但是，当我将代码放入index.html中包含的app.js文件中时，当我加载index.html文件时，它就不再工作了。你也看到了同样的行为吗？当你需要的时候，查尔斯·巴贝奇的名言在哪里。。。你会发现你正在做一些微妙的改变（例如你的代码实际上没有包含面板的Ext.create（），我补充说）

Ext.define('Score.view.PlayerView', {
  extend: 'Ext.Panel',
  xtype: 'playerview',

  requires: [
      'Score.view.PlayerInfoPanel',
      'Score.view.GameInfoPanel'
  ],

  config: {
      title: 'Player Info',
      iconCls: 'user',
      layout: 'vbox',
      scrollable: true,

      items: [
          {
              docked: 'top',
              xtype: 'toolbar',
              id: 'toolbarId',
              title: 'Player Info'
          },
          {
              xtype: 'playerinfo',
              id: 'currentPlayerInfoId',
              flex: 1,
              scrollable: false
          },
          {
              xtype: 'gameinfo',
              id: 'currentGameInfoId',
              flex: 2,
              scrollable: false
          }
       ]
    }
});