面板中的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-面板，那麼我也不太清楚。