4

私はMVCアーキテクチャを使用していますが、別のTabPanelを既存のTabPanelにインサイトで作成しようとすると、ブラウザで次のように表示されます。

el is null

el = el.dom || Ext.getDom(el); ext-all-debug.js (line 12807)

私が理解していることから、新しいTabPanelはレンダリングに必要なdivを見つけることができないようです。とにかく、ここにコントローラーがあります：

Ext.define('FI.controller.MainController', {
extend: 'Ext.app.Controller',
id: 'mainController',
views: ['MainTabPanel', 'UnitsTabPanel', 'SummariesTabPanel'],
mainTabPanel : {}, 
unitsTabPanel : {},
summariesTabPanel : {},
init: function(){
    console.log("main controller is init");
    console.log(this);

    this.control({
        'mainTabPanel':{
            afterrender: this.onCreate
        }
    });


    this.mainTabPanel = Ext.widget('mainTabPanel');
},

onCreate: function(){
    console.log("main tab panel is created");
    console.log(this);
    this.unitsTabPanel = Ext.widget('unitsTabPanel');
    this.summariesTabPanel = Ext.widget('summariesTabPanel');
}
});

これはMainTabPanelです：

Ext.define("FI.view.MainTabPanel", {
extend: 'Ext.tab.Panel',
renderTo:'container',
alias: 'widget.mainTabPanel',
enableTabScroll: true,
items:[{
        title:'Units',
        html: "<div id='units'></div>",
        closable: false
    },
    {title: 'Summaries',
        html: "<div id='summaries'></div>",
        closable:false
    }
]
});

そしてこれはSummariesTabPanel（問題のあるもの）です：

Ext.define("FI.view.SummariesTabPanel", {
extend: 'Ext.tab.Panel',
renderTo: 'summaries',
alias: 'widget.summariesTabPanel',
enableTabScroll: true
});

問題はにありSummariesTabPanelます。作成しないと、UnitsTabPanelがレンダリングされます。summaries何らかの理由で、 divが見つかりません。

何が悪いのか教えていただけますか？

4

2 に答える 2

1

SummariesTabPanel は、コードの最後のスニペットに従って「ユニット」div にレンダリングされますが、それは正しいですか? そうでない場合は、 に置き換えrenderTo: 'units'ますrenderTo: 'summaries'。

編集

そうではなかったので、Ext 4 パネルのドキュメント (ここ: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel. Panel-cfg-html ) は、コンポーネントが完全にレンダリングされるまで html コンテンツが追加されないことを示しています。そのため、実際に DOM 要素を取得する前に、タブ (現在のようにタブパネルではなく) のafterrenderイベントを待つ必要があります。

この Panel をインスタンス化すると

{title: 'Summaries',
 html: "<div id='summaries'></div>",
 closable:false
}

それへのポインターを別の変数に保存すると、afterrender イベントをリッスンして再試行できます。

htmlこれを回避するには、パネルの構成オプションを介して追加するのではなく、ページの既存の要素 (つまり、静的な html フラグメント) を使用します。

于 2012-06-22T10:51:35.450 に答える
1

なんでそんなことしてるの？ネストされたパネルが必要な場合は、パネルを相互に定義するだけです。使用しないでくださいrenderTo

Ext.define("FI.view.SummariesTabPanel", {
  extend: 'Ext.tab.Panel', 
  alias: 'widget.summariesTabPanel'
});


Ext.define("FI.view.MainTabPanel", {
  extend: 'Ext.tab.Panel',
  alias: 'widget.mainTabPanel',
  enableTabScroll: true,
  items:[{
      xtype: 'summariesTabPanel'
      title:'Units',
      closable: false
    }
  ]
});
于 2012-06-22T11:49:18.243 に答える