Ext JS - Learning Center

Tutorial:TabPanel Basics (German)

From Learn About the Ext JavaScript Library

Jump to: navigation, search
Summary: Eine kurze Einführung zur Benutzung von TabPanels
Author: Robin Percy (Übersetzung: Timo Michna)
Published: Dec 3, 2007
Ext Version: 2.0
Languages: en.png Englishcn.png Chinesede.png German

Contents

Zusammenfassung

Dieses Tutorial bietet eine schnelle Einführung in die TabPanel Klasse. Es basiert auf Techniken, die ich sowohl in den TabPanel Beispielen, als auch im Quellcode für die Ext API Dokumentation gefunden habe. Am Ende dieses Tutorials, sollstest ein funktionierendes TabPanel haben mit diesen Fähigkeiten:

  • Neue Tabs erzeugen mit Inhalt geladen von einer URL
  • Testen ob ein Tab bereits existiert, wenn ja - neuen Inhalt laden.

Schritt 1: HTML Grundgerüst Erstellen

Der folgende HTML-Code bietet uns eine Basis-Struktur, auf der wir mit Ext aufbauen können. Kopiere Ihn in eine Datei mit Namen tptut.html auf Deinem Web-Server und versichere Dich, dass Du die richtigen Pfade basierend auf Deiner Ext-Installation für ext-all.css, ext-base.js, und ext-all.js gesetzt hast. tab_actions.js wird in den darauf folgenden Schritten erstellt: 


<html>
<head>
<title>TabPanel Tutorial</title>
<!-- Ext CSS and Libs -->
<link rel="stylesheet" type="text/css"	href="../include/ext2/resources/css/ext-all.css" />
<script type="text/javascript"	src="../include/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../include/ext2/ext-all.js"></script>
 
<!-- Custom CSS and Libs -->
<script type="text/javascript" src="./tab_actions.js"></script>
<style>
#actions li {
	margin:.3em;
}
#actions li a {
	color:#666688;
	text-decoration:none;
}
</style>
</head>
<body>
 
 
<ul id="actions" class="x-hidden">
	<li>
		<a id="use" href="#">Use Existing Tab</a>
	</li>
	<li>
		<a id="create" href="#">Create New Tab</a>
	</li>
</ul>
 
<div id="tabs"></div>
</body>
</html>

Es gibt zwei zu erwähnende Elemente in oben stehendem Code. Wir benutzen die "actions" Liste als einfaches Menu zur Kontrolle unserer Tab-Generierung. Das "tabs" div benutzen wir als Container für unser erstes (default) Tab im TabPanel.

Schritt 2: Ext Struktur Erzeugen

Erzeuge nun eine neue Datei in dem gleichen Verzeichnis wie oben. Benenne sie in tab_actions.js und füge den folgenden Code ein: 

Ext.onReady(function(){
   // Menu containing actions
    var tabActions = new Ext.Panel({
    	frame:true,
    	title: 'Actions',
    	collapsible:true,
    	contentEl:'actions',
    	titleCollapse: true
    });
 
    // Parent Panel to hold actions menu
    var actionPanel = new Ext.Panel({
    	id:'action-panel',
    	region:'west',
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:200,
    	minWidth: 150,
    	border: false,
    	baseCls:'x-plain',
    	items: [tabActions]
    });
 
    // Main (Tabbed) Panel
    var tabPanel = new Ext.TabPanel({
		region:'center',
		deferredRender:false,
		autoScroll: true, 
		margins:'0 4 4 0',
		activeTab:0,
		items:[{
			id:'tab1',
			contentEl:'tabs',
    		title: 'Main',
    		closable:false,
    		autoScroll:true
		}]
    });
 
    // Configure viewport
    viewport = new Ext.Viewport({
           layout:'border',
           items:[actionPanel,tabPanel]});
});

Der Code oben wird der Ext.onReady Methode übergeben, so dass er erst ausgeführt wird, wenn alle Elemente geladen sind. Zuerst wandeln wir unsere actions Liste in ein Panel (tabActions) um, indem wir die id der Liste in der Konfiguration des Panels als contentEl (content element) angeben.

Als nächtes erzeugen wir das Eltern (parent) Panel actionPanel, dass das Menu Panel aufnimmt. Wir übergeben tabActions als item im items Parameter. Da actionPanel vom Viewport's LayoutManager positioniert wird, müssen wir eine Region im Konfigurations Object spezifizieren.

Die als drittes erzeugte Komponente (Component) ist das TabPanel selbst. Wir wollen, dass es in der Mitte der Seite angezeigt wird, welche der center Region des Viewports entspricht. Außerdem übergeben wir dem TabPanel eine Liste von Panel Konfigurations-Objekten, die als Tabs angezeigt werden sollen. In diesem Beispiel erzeugen wir nur einen Tab während des initial-renderings, es können jedoch mehrere spezifiziert werden. Stelle nur sicher, dass ein block Element auf der Seite existiert, welches als Container für jedes Panel dient. Zum Beispiel haben tabs als Content Element für das erste Panel angegeben. Beachte, dass wir dem zusätzliche eine id gegeben haben. Das ist wichtig, wenn wir später überprüfen wollen, ob der Tab existiert.

Zum Schluß richten wir den Viewport ein, der den sichtbaren Bereich des Browsers kontrolliert. Dieses alles wird benötigt, um das Layout und eine Liste anzuzeigender Komponenten zu spezifizieren. Die Komponenten wurden bereits mit Regionen konfiguriert, so dass der Viewport's LayoutManager weiß, wo er sie platzieren muß.

Du solltest nun tptut.html im Browser aufrufen können. Dort solltest Du zwei formatierte Spalten sehen, mit dem Actions Menu auf der linken und dem TabPanel auf dem Rest der Seite


Schritt 3: Tab Manipulations Logik Erstellen

Jetzt da wir alle Elemente erzeugt haben, können wir Methoden für die Erzeugung und das Updaten der Tabs erstellen. Um dieses zu testen, müssen wir drei neue Seiten in unserem Arbeits-Verzeicnis erstellen:

  • loripsum.html
  • sample0.html
  • sample1.html

Der wirkliche Inhalt dieser Dateien ist nicht so wichtig. Er sollte jedoch für jede Datei unterschiedlich sein, damit Du siehst, wenn sie in den Tab geladen werden.

Füge den folgenden Code einfach in tab_actions.js unter dem Teil wo viewport erzeugt wird ein: 

// Adds tab to center panel
    function addTab(tabTitle, targetUrl){
        tabPanel.add({
	    title: tabTitle,
	    iconCls: 'tabs',
	    autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
	    closable:true
	}).show();
    }
 
    // Update the contents of a tab if it exists, otherwise create a new one
    function updateTab(tabId,title, url) {
    	var tab = tabPanel.getItem(tabId);
    	if(tab){
    		tab.getUpdater().update(url);
    		tab.setTitle(title);
    	}else{
    		tab = addTab(title,url);
    	}
    	tabPanel.setActiveTab(tab);
    }
 
    // Map link ids to functions
    var count = 0;
    var actions = {
    	'create' : function(){
    		addTab("New Tab",'loripsum.html');
    	},
    	'use' : function(){
    		// Toggle between sample pages
    		updateTab('tab1','Replaced ' + count + ' Times','sample'+(count%2)+'.html');
    		count++;	    		
    	}
    };
 
    function doAction(e, t){
    	e.stopEvent();
    	actions[t.id]();
    }
 
    // This must come after the viewport setup, so the body has been initialized
    actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});

addTab(...) Erwartet title und URL strin Parameter. Erzeugt eine neuen Tab, indem tabPanel.add(...) ein Konfigurations-Objekt übergeben wird. tabPanel.add(...) gibt das neu erzeugte Panel Objekt zurück und die addTab(...) Methode ruft sofort show() auf, damit es sofort angezeigt wird.

updateTab(...) Erwartet zusätzlich eine tabId, welche benutzt wird um zu überprüfen, ob das Tab bereits im TabPanel existiert. Wenn es vorhanden ist, wird über den Updater des Panels der Inhalt erneuert.

Der letzte Schritt besteht darin, einen listener zu actionPanel hinzuzufügen, der die geeignete Methode für die ausgewählte Aktion aufruft. Zuerst wird ein actions Objekt erzeugt. Das kann man sich wie eine HashTabel vorstellen, oder wie eine Art Wörterbuch, das ids mit Methoden verknüpft. Beachte, dass die die entsprechenden Schlüssel (keys) mit den HTML List Elementen korrespondieren. Da die Methoden einfach sind, erzeugen wir sie inline. Die counter Variabel wird nur benutzt, um zwischen zwei Muster-Seiten hin- und herzuschalten und einen Zähler im Tab Titel zu haben, damit Änderungen offensichtlicher sind. Sie hat keinen praktischen Nutzen.

Wir definbieren einen Event-Hanlder doAction(...), der Event- und Ziel- Objekte erwartet, die Id des Ziel-Objektes in actions nachschlägt und die entsprechende Methode aufruft. doAction(...) ist als listener für actionPanel's mousedown event registriert und wird also ausgelöst, wenn irgendeine der actionPanel's Komponenten angeklickt wird - mit der angeklickten Komponente als Event-Ziel.

Ergebnis

Du solltest jetzt tptut.html neuaufrufen können und ein funktionierendes Beispiel haben. Durch einen Klick auf den Use Existing Tab Link wird der Inhalt des ersten Tabs erneuert. Create new Tab erzeugt einen neuen Tab bei jedem Klick. Für mehr Informationen: Advanced Tabs Example

Retrieved from "http://extjs.com/learn/Tutorial:TabPanel_Basics_%28German%29"
  • This page was last modified 20:15, 21 June 2008.
  • This page has been accessed 3,077 times.