2

私はかなり長い間苦労してきた問題を抱えているので、誰かがここで私を助けてくれることを願っています。

この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の高さを設定し、スクロールできないようにすることです。それはすべてうまくいかないようです。したがって、フィードバックをいただければ幸いです。

4

2 に答える 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か所に同じパネルが実際に必要な場合は、よくわかりません。

于 2012-05-24T15:06:04.627 に答える
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
          }
       ]
    }
});
于 2012-06-04T21:30:27.937 に答える