Question

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

假设你有这个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
    }
});

我以为我可以在不同的Panel上使用这个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的高度并使其不可滚动。所有这些似乎都不起作用。所以任何反馈都会非常感激！

Answer 1

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

该示例代码工作正常。

“我以为我可以在不同的Panel上使用这个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-面板来选择和填充，那么我不太确定。

Answer 2

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

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

面板中的Sencha Touch 2.0 Dataview

2 个答案: