▼Adobe AIRメモ▼
ツリー


ツリーを利用するHTMLアプリケーションを作成する。


ソースコード
root.html 
<html>
    <head>
    </head>
    <frameset>
        <frame id="UI"
            src="TreeEx.html"
            sandboxRoot="http://npaka.net/"
            documentRoot="app:/"
            width="100%" 
            height="100%">
        </frame>        
    </frameset>
</html>

TreeEx.html 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>TreeEx</title>

    <!--ライブラリ-->
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>

    <!--プログラム-->
    <script type="text/javascript" src="TreeEx.js"></script>

    <!--スタイルシート-->
    <style type="text/css">        
        /*フォルダクローズアイコン*/
        .folder .x-tree-node-icon{
            background:transparent url(resources/images/default/tree/folder.gif);
        }
        
        /*フォルダオープンオープン*/
        .x-tree-node-expanded .x-tree-node-icon{
            background:transparent url(resources/images/default/tree/folder-open.gif);
        }
    </style>
</head>
<body>
    <!--レイアウトー-->
    <div id="pnlWest"   class="x-layout-inactive-content"></div>
    <div id="pnlCenter" class="x-layout-inactive-content"></div>
</body>
</html>

TreeEx.js 
//ツリー
treeEx=function(){
    var BorderLayout=Ext.BorderLayout;
    var ContentPanel=Ext.ContentPanel;
    var TreePanel=Ext.tree.TreePanel;
    var TreeNode=Ext.tree.TreeNode

    var tree;//ツリー

    return {
        //初期化
        init:function(){
            //レイアウトの生成
            var layout=new BorderLayout(document.body, {
                //西領域
                west: {
                    autoScroll :true,
                    collapsible:true,
                    initialSize:200,
                    split      :true,
                    titlebar   :true 
                },
                //中央領域
                center: {
                    autoScroll :true,
                    split      :true,
                    titlebar   :true 
                }
            });
            
            //ツリーの生成
            treeEx.makeTree();
        
            //レイアウトの更新開始
            layout.beginUpdate();

            //西パネル
            layout.add('west',  new ContentPanel('pnlWest',{
                title:'フォルダ'
            }));

            //中央パネル
            layout.add('center',new ContentPanel('pnlCenter',{
                title:'コンテンツ'
            }));

            //レイアウトの更新完了
            layout.endUpdate();
        },

        //ツリーの生成
        makeTree:function(){
            //ツリーの生成
            tree=new TreePanel('pnlWest',{
                animate        :true,
                containerScroll:true,
                enableDD       :true
            });
        
            //ルートの生成
            var root=treeEx.makeTreeNode('root','ルート',false);
            tree.setRootNode(root);

            //クリックイベントの処理
            tree.on('click',function(node,evt) {
                if (node.data==null) return;
                var pnlCenter=Ext.get('pnlCenter');
                pnlCenter.dom.innerHTML=node.data;
            });

            //フォルダ1
            var folder1=treeEx.makeTreeNode('folder1','フォルダ1',false);
            root.appendChild(folder1);

            //フォルダ2
            var folder2=treeEx.makeTreeNode('folder2','フォルダ2',false);
            root.appendChild(folder2);

            //フォルダ3
            var folder3=treeEx.makeTreeNode('folder3','フォルダ3',false);
            root.appendChild(folder3);

            //テキスト1
            var text1=treeEx.makeTreeNode('text1','テキスト1',true,'テキスト1の本文です。');
            folder1.appendChild(text1);

            //テキスト2
            var text2=treeEx.makeTreeNode('text2','テキスト2',true,'テキスト2の本文です。');
            folder1.appendChild(text2);

            //テキスト3
            var text3=treeEx.makeTreeNode('text3','テキスト3',true,'テキスト3の本文です。');
            folder1.appendChild(text3);

            //ツリーの描画
            tree.render();
            
            //ツリーノードを開く
            root.expand();
        },
                
        //ツリーノードの生成
        makeTreeNode:function(id,text,leaf,data){
            var icon
            var node=new TreeNode({
                draggable:leaf,     //ドラッグ可
                id       :id,       //ID
                text     :text,     //テキスト
                leaf     :leaf,     //リーフ
                icon     :(leaf)?'':'resources/images/default/tree/folder.gif'
            });
            node.data=data;
            return node;
        }
    };
}();
Ext.onReady(treeEx.init,treeEx,true);




−戻る−