0

グリッド（EXTJS 4.1のオブジェクトExt.grid.GridPanel）をtabPanel（オブジェクトExt.tab.Panel）に表示しようとしていますが、問題があります。グリッドは独立したソースコードとして完全に機能し、パネルは次のようにも機能します。独立したソースコード。しかし、グリッドとパネルを一緒に機能させようとすると、機能しません。

グリッド：

 var monGridPanelDetailEcriture = new Ext.grid.GridPanel({
    id: 'monGridPanelDetailEcriture',
    frame: true,
    width: 1100,
    autoHeight: true,
    renderTo: 'gridDetailEcriture',
    store: monStoreDetailEcriture,
    columns: mesColonnesDetailEcriture
});

TabPanel：

var tabs = Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
    width: 450,
    activeTab: 0,     // first tab initially active
    defaults :{
        bodyPadding: 10
    },
    items: [{
        title: 'Short Text',
        closable: true
    },{
        title: 'Long Text'
    }]
});

私はインターネットで解決策を探していますが、見つけたものがうまくいかないたびに：いくつかのフォーラムで説明されているこの解決策を試しました：

var tabs = Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
    width: 450,
    activeTab: 0,     // first tab initially active
    defaults :{
        bodyPadding: 10
    },
    items: [{
        monGridPanelDetailEcriture 
    },{
        title: 'Long Text'
    }]
});

しかし、これがアイテムを説明する方法ではないことを示すJavascriptエラーがあります。

また、グリッド上に新しいタイプのウィジェット（プロパティ「エイリアス」を使用）を作成しようとしましたが、機能しませんでした。

誰かが解決策を持っていますか？

4

2 に答える 2

2

2回目の試行はほぼ完了しましたmonGridPanelDetailEcritureが、すでにオブジェクトであり、{}でラップする必要はありません。

したがって、以下が機能するはずです。

var tabs = Ext.create('Ext.tab.Panel', {
    renderTo: document.body,
    width: 450,
    activeTab: 0,     // first tab initially active
    defaults :{
        bodyPadding: 10
    },
    items: [
        monGridPanelDetailEcriture
    ]
});

編集：おそらく、グリッド上にrenderToが必要ない場合もあります。これは、タブパネル内でレンダリングされるためです。編集-編集：また、document.bodyではなく、renderToでExt.getBody（）を使用する方がおそらく良い方法だと思います。もう少しExt'yのようです

于 2012-10-23T16:03:36.957 に答える
0

複数のタブの場合：

 var tabs = Ext.create('Ext.tab.Panel', {

     renderTo: document.body,
     width: 450,
     activeTab: 0,     // first tab initially active
     defaults :{
          bodyPadding: 10
      },
    items: [
          monGridPanelDetailEcriture,
          {
           title:'tab2',
           html:'I m tab 2'
           }
       ]
   });
于 2013-07-26T06:33:37.983 に答える