面板中的Sencha Touch 2.0 Dataview

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

我想我可以在不同的面板使用此数据视图的一个实例是这样的：

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

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

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

Answer 2

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

这示例代码工作得很好。

“我想我可以用这个数据视图上不同的面板这样的实例：”

这可能是一个线索。上次我尝试在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 
       } 
      ] 
     } 
    }); 

如果你确实需要在两个地方选择和东西-same-面板，那么我也不太清楚。