6

次のようなタブパネルがあります。

var tab1 = {
    id: 'section1',
    title: 'First Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
}

var tab2 = {
    id: 'section2',
    title: 'Second Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
}

var tab3 = {
    id: 'section3',
    title: 'Third Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
}

var modules_info_panel = new Ext.TabPanel({
    region: 'center',
    activeTab: 0,
    border: false,
    defaults:{autoScroll:true},
    items:[tab1, tab2, tab3]
});

次に、このタブパネルを作成した後、タブのコンテンツを動的に変更したいと思いますが、これらはどれも機能しません:

tab1.html = 'new html'; // no effect
tab1.title = 'new title'; // no effect
tab1.update('new text'); // error: tab1.update is not a function
viewport.doLayout(); // no effect

AJAXを介して各タブのコンテンツをロードしたいので、この質問で提案されているようにタブを動的に追加したくありませんが、タブが最初のロードから表示され、クリックされたときに各タブのコンテンツが動的に変更されるようにします.

作成後にタブのコンテンツを変更するにはどうすればよいですか?

アップデート：

私の見落としを見つけてくれた@Chauに感謝します。Ext.Panel単純なjavascriptオブジェクトリテラルの代わりにタブを作成すると、機能します:

var tab1 = new Ext.Panel ({
    id: 'section1',
    title: 'First Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

var tab2 = new Ext.Panel ({
    id: 'section2',
    title: 'Second Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

var tab3 = new Ext.Panel ({
    id: 'section3',
    title: 'Third Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

var modules_info_panel = new Ext.TabPanel({
    region: 'center',
    activeTab: 0,
    border: false,
    defaults:{autoScroll:true},
    items:[tab1, tab2, tab3]
});

tab1.update('new content with update'); //works
4

2 に答える 2

6

作成tab1すると、4 つのプロパティを持つオブジェクトになります。タブ パネルにアイテムtab1として追加すると、タブ パネル初期化子は のプロパティに基づいてタブを作成します。ただし、あなたはまだ 4 つのプロパティを持つオブジェクトであり、タブ パネルによって作成されたタブへの参照ではありません。tab1tab1

4 つのプロパティを使用して を作成し、panelそのパネルをタブ パネルの子として追加します。

var tab1 = new Ext.Panel({
    id: 'section1',
    title: 'First Section',
    padding: 10,
    html: '(this content will be replaced with an ajax load)'
});

次に、タブ パネルは、独自のパネルを作成する代わりに、独自のパネルを使用する必要があります。

このコードはまだテストしていませんが、お役に立てば幸いです :)

于 2010-12-20T10:25:13.313 に答える
0

modules_info_panel.get(0)最初のタブオブジェクト (デフォルトでは Ext.Panel インスタンス) を返すので:

 modules_info_panel.get(0).setTitle('new title');

新しいタイトルを設定します

于 2010-12-20T10:32:56.353 に答える