TabPanel基礎(TabPanel Baics)

23209 ワード

tabpanel

Tutorial:TabPanel Baics(Chinese)
From Learn About the Ext JavaScript Library
ジャンプto:
navigation、
search
Summary:Tabタグページの使用を簡単に紹介します.
Author:Robin Perry
Published:2007年11月15日
Ext Version:2.0
Languags:Frank Cheung Chinese English
コンテント
［German］
hide 1要約 2ステップ1：HTML骨格の作成 3 Step 2:Ext構造の構築 4 Step 3:Tab制御ロジックの作成 if(window.show TocToggle){var tocShow Text=show];var tocHideText=「hide」;show TocToggle();
要約
この教程の目的はTabPanel類を快速に紹介することです.言及した知識は全部私がTabPanelの範例、ExtのソースコードとAPIの文書に対する学習から来たのです.本論文の最後に、Tab Panelを完成してください.このTabPanelはできます.

は、新しいtabを作成し、コンテンツはURLから来る.

は、あるtabが存在するかどうかを判断し、ある場合は新しいコンテンツをロードする.

ステップ1:HTMLのスケルトンを作成する
下記のHTMLを使って、Extと一緒に基本的な構造を構築します.これらの内容をtptutというファイルにコピーして、サービスで実行することが要求されます.もちろんext-all.css、ext-base.js、およびext-all.jsのこれらのExtインストール経路の正確さを保証します.次の手順でtab_を作成します.actions.js:

<html>

<head>

<title>TabPanel  </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>

以上のコードには二つの要素があります.注意が必要です.「アクションリスト」という簡単な実装を使用して、tabの作成を行います.「tabs」のdivはTabパネルの最初のデフォルトtabの容器に使用されます.
Step 2:Ext構造の構築
先ほどのディレクトリに文書ファイルを作成しました.tab_と言いますactions.jsは、以下のJavaScriptに参加します.

Ext.onReady(function(){

   //   actions   

    var tabActions = new Ext.Panel({

    	frame:true,

    	title: 'Actions',

    	collapsible:true,

    	contentEl:'actions',

    	titleCollapse: true

    });

 

    //   actions      

    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]

    });

 

    //    （  tab）

    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

		}]

    });

 

    //     viewport

    viewport = new Ext.Viewport({

           layout:'border',

           items:[actionPanel,tabPanel]});

});

上のコードは、ページ要素が全部ロードされていないので、コードが実行されるのを防ぐために、Ext.onReadyの関数にセットされています.次にやるべきことは、私たちのアクションリストをtabActionsという名前のパネルに変換することであり、この名前はcontentElという構成項目パラメータによって指定されている.
次に、メニューパネルを保持するために親パネルactionPanelを作成します.アイテムのパラメータとしてtabActionsを使用しました.actionPanelはビュービュービュービューViewportのLayoutManagerによってページが位置決めされますので、設定項目のオブジェクトにエリアを指定します.
第3のステップはTabPanel(Tabパネル)自体を作成することである.ページの中央に位置したいです.つまり、ビューの中央に対応しています.また、一連のtab構成項目のオブジェクトパラメータをパネルに導入する.この例では、内蔵レンダリングに参加するのは1つのtabだけですが、複数でも大丈夫です.各パネルがページ上で容器として使用できると判断できれば、その配列の要素になります.現在のように、最初のパネルの内容要素としてtabsを使用しています.注意してください.これはtabのIdを指摘します.これは私達が後で取得したtabの根拠です.
最後に、ビューを設定して、ブラウザの可視領域の制御に使います.必要なのは、レイアウトと表示するコンポーネントを指定することです.コンポーネントは、ビューのLayoutMangager(ビューマネージャ)によって配置されています.
この時、ブラウザでAcitonsメニューを含む2つのフォーマット列が左にあり、tabパネルがスクリーンの残りの位置を占めていることを観察してください.
Step 3:Tab制御ロジックの作成
今私たちが必要とする要素はもう作成されました.Tabパネルの作成と更新方法を増やすことができます.現在のディレクトリに新しい3ページを作成します.

loripsum.

sample 0.

sample 1.

この3つのファイルの実際の内容はどうでもいいですが、それぞれの内容が違っていて、tabにコンテンツをロードして区別できるようにしたほうがいいです.
tab_を開くactions.jsはviewportで作成した位置に下記のコードを挿入します.

//         tab

    function addTab(tabTitle, targetUrl){

        tabPanel.add({

	    title: tabTitle,

	    iconCls: 'tabs',

	    autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},

	    closable:true

	}).show();

    }

 

    //   tab  ，         

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

    }

 

    //      id   

    var count = 0;

    var actions = {

    	'create' : function(){

    		addTab("New Tab",'loripsum.html');

    	},

    	'use' : function(){

    		//         

    		updateTab('tab1','  ' + count + '  ','sample'+(count%2)+'.html');

    		count++;	    		

    	}

    };

 

    function doAction(e, t){

    	e.stopEvent();

    	actions[t.id]();

    }

 

    // body    ，viewport setup           

    actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});

関数addTab(...)は、タイトルtitleとURL文字列の2つのパラメータを必要として、tabPanel.add(...)の中の構成項目オブジェクトに伝達します.これは作成したパネルオブジェクトに戻ります.上のコードは即座にショー()を呼び出して内容を表示します.
関数udateTab(…)は、このtabが存在するかどうかを検出するために、複数のtabIdのパラメータが必要です.もしそうなら、パネルはUpdaterを取得してパネルの内容を更新します.そうでなければ、addTab(…)を呼び出してtabを作成します.
最後のステップは、選択動作後のイベントに応答して、actionPanelのモニターを追加し、対応する関数を実行します.まず、actionsは、良いオブジェクトを作成するためのものであり、オブジェクトは、ハッシュテーブルまたは辞書として認識され、動作および方法の両方をマッピングすることができる.注意「キーキーキー」はHTMLリスト項目に対応しています.方法が簡単なので、ここで直接書きました.変数カウンタは、tab間の切り替えを明確に表示するために使用され、他の特定の機能はありません.
イベントプロセッサ(event handler)doAction(…)の実行時には、イベントオブジェクトとターゲットオブジェクト、actions関数がターゲットのidを検索して、対応する方法を実行します.いずれかのactionPanel'sのコンポーネントが押下されると、mousedownのイベントがトリガされ、登録されたイベントプロセッサdoAction(…)が実行されることが直ちに通知される.押されたあのコンポーネントがイベントの対象です.
締め括りをつける
今tptututを更新してみます.もう完成した例です.
Use Existing Tabの接続をクリックすると最初のtabの内容が更新されます.Create new Tabは新しいtabを作成します.詳細は5まとめを参照してください.

Tabラベルページの進数例

Ext Programer's API Dcumentation

Retrieved from"
Ext User Forums"

POJ 1523問題解決報告