Sencha Touch 2.0 面板中的数据视图答案

【问题标题】：Sencha Touch 2.0 Dataview in PanelSencha Touch 2.0 面板中的数据视图
【发布时间】：2012-05-31 00:57:52
【问题描述】：

我有一个问题困扰了我很长一段时间，所以希望有人可以在这里帮助我。

假设你有这个 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 的高度并使其不可滚动。所有这些似乎都不起作用。因此，我们将非常感谢任何反馈！

【问题讨论】：

标签： sencha-touch touch extjs sencha-touch-2

【解决方案1】：

http://www.senchafiddle.com/#2Ig9U

该示例代码运行良好。

“我想我可以像这样在不同的面板上使用这个 DataView 的一个实例：”

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

或多或少：

       Ext.define('Score.view.GameInfoPanel', {
        extend: 'Ext.DataView',
        alias:'widget.scoreViewGameInfoPanel', //widgets use lazy loading
        config: {       
            store: {
                fields: ['Name', 'Score'],
                data: [
                    {Name: 'test', Score: '1'},
                    {Name: 'test2', Score: '100'}
                ]
            },
            itemTpl: '{Name} - {Score}',
            fullscreen: false
        }
    });


    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
                },
                Ext.widget('scoreViewGameInfoPanel',{ 

//coz sencha hated the 
//same object in 2 places last i looked

                    scrollable: false,
                    fullscreen: false,
                    height: 100,
                    flex: 2
                }),
                {
                    xtype: 'panel',
                    html: 'after',
                    flex: 3
                }
            ]
        }
    });

如果您确实需要在 2 个地方使用 -same- 面板进行选择和填充，那么我不太确定。

【讨论】：

该代码确实适用于这个link 网站。但是，当我将代码放在 index.html 中包含的 app.js 文件中时，当我加载 index.html 文件时它不再起作用。您是否也看到了同样的行为？
Charles Babbage 在您需要时引用的位置...您会发现您正在做一些微妙的不同的事情（例如，您的代码实际上不包含面板的 Ext.create() ，我补充说）

【解决方案2】：

花了一段时间，但我终于解决了。初始代码存在一些问题。

在 GameInfoPanel 的定义中，不应使用配置属性“全屏”。我不确定为什么。但据我了解，使用此视图的视图已经设置了此属性。通过再次设置，即使设置为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
          }
       ]
    }
});

【讨论】：