Wie kann ich den Inhalt einer Registerkarte in einem ExtJS TabPanel aktualisieren?

Question

Ich habe ein Registerfeld wie folgt aus:

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] 
}); 

Dann, nachdem diese TabPanel Erstellen, würde ich den Inhalt der Tabs dynamisch gerne ändern, aber keines dieser Arbeit:

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 

Da ich wollen, um den Inhalt jeder der Registerkarten laden über AJAX, ich will nicht zu hinzufügen Tabs dynamisch as suggested in this question aber wollen die Laschen sichtbar von der ersten Last und eac sein h Inhalt der Registerkarte zu geändert dynamisch beim Anklicken.

Wie kann ich den Inhalt einer Registerkarte ändern, nachdem sie erstellt wurde?

Update:

Dank @Chau für meine Aufsicht zu kontrollieren: wenn ich die Tabs mit Ext.Panel anstelle von einfachen Javascript Objektliterale erstellen, dann funktioniert es:

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 

Answer 1

Wenn Sie tab1 es schaffen ist ein Objekt mit 4 Eigenschaften. Wenn Sie tab1 als Element zu Ihrem Registerkartenbereich hinzufügen, erstellt der Registerkarteninitialisierer eine Registerkarte basierend auf den Eigenschaften von tab1. Ihr tab1 ist jedoch immer noch ein Objekt mit 4 Eigenschaften und kein Verweis auf den Tab, der von Ihrem Tab-Panel erstellt wurde.

Ich würde ein panel mit Ihren 4 Eigenschaften erstellen und dieses Panel als ein Kind in der Registerkarte hinzufügen.

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

Dann sollte das Registerkartenfeld Ihr Bedienfeld verwenden, anstatt ein eigenes Bedienfeld zu erstellen.

ich diesen Code nicht getestet, aber ich hoffe, es wird Ihnen helfen :)

Answer 2

modules_info_panel.get(0) ersten Registerkarte Objekt (standardmäßig Ext.Panel Instanz) zurückkehren so:

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

wird eingestellt neuer Titel