▼Adobe AIRメモ▼
レイアウト - レイアウト


レイアウトを利用するHTMLアプリケーションを作成する。


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

LayoutEx.html 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>LayoutEx</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="LayoutEx.js"></script>
</head>
<body>
    <!--レイアウト-->
    <div id="pnlNorth"   class="x-layout-inactive-content">北領域</div>
    <div id="pnlWest"    class="x-layout-inactive-content">西領域</div>
    <div id="pnlEast"    class="x-layout-inactive-content">東領域</div>
    <div id="pnlSouth"   class="x-layout-inactive-content">南領域</div>
    <div id="pnlCenter1" class="x-layout-inactive-content">中央領域1</div>
    <div id="pnlCenter2" class="x-layout-inactive-content">中央領域2</div>
</body>
</html>

LayoutEx.js 
//レイアウト
layoutEx=function(){
    var BorderLayout=Ext.BorderLayout;
    var ContentPanel=Ext.ContentPanel;

    return {
        //初期化
        init : function(){ 
            //レイアウトの生成
            var layout=new BorderLayout(document.body, {
                //北領域
                north: {
                    collapsible:true, //折りたたみ
                    initialSize:80,   //初期サイズ
                    maxSize    :80,   //最大サイズ
                    minSize    :80,   //最小サイズ
                    split      :false,//分割線
                    titlebar   :true  //タイトルバー
                },
                //西領域
                west: {
                    collapsible:true,
                    initialSize:80,
                    split      :true,
                    titlebar   :true 
                },
                //東領域
                east: {
                    collapsible:true,
                    initialSize:80,
                    split      :true,
                    titlebar   :true 
                },
                //南領域
                south: {
                    collapsible:true,
                    initialSize:80,
                    split      :true,
                    titlebar   :true 
                },
                //中央領域
                center: {
                    autoScroll       :true,//自動スクロール
                    minTabWidth      :50,  //最小タブ幅
                    preferredTabWidth:150, //現在タブ幅
                    resizeTabs       :true,//タブのリサイズ
                    split            :true,//分割線
                    titlebar         :true //タイトルバー
                }
            });
        
            //レイアウトの更新開始
            layout.beginUpdate();
        
             //北パネル
            layout.add('north',new ContentPanel('pnlNorth',{
                closable  :true,        //クローズ可能
                title     :'北タイトル',//タイトル
                fitToFrame:true         //フレームフィット
            }));
                    
            //西パネル
            layout.add('west',   new ContentPanel('pnlWest',{
                title:'西タイトル'
            }));
        
            //東パネル
            layout.add('east',   new ContentPanel('pnlEast',{
                title:'東タイトル'
            }));
        
            //南パネル
            layout.add('south',new ContentPanel('pnlSouth',{
                closable  :true, 
                fitToFrame:true,
                title     :'南タイトル'
            }));
                    
            //中央パネル1
            layout.add('center', new ContentPanel('pnlCenter1',{
                closable:true,          //クローズ可能
                title   :'中央タイトル1'//タイトル
            }));
        
            //中央パネル2
            layout.add('center', new ContentPanel('pnlCenter2',{
                title:'中央タイトル2'
            }));
                    
            //パネル選択
            layout.getRegion('center').showPanel('pnlCenter1');
                    
            //レイアウトの更新完了
            layout.endUpdate();
        }
    };
}();
Ext.onReady(layoutEx.init,layoutEx,true);


レイアウト - ネストレイアウト


ネストレイアウトを利用するHTMLアプリケーションを作成する。


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

NestedLayoutEx.html 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>NestedLayoutEx</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="NestedLayoutEx.js"></script>
</head>
<body>
    <!--レイアウト-->
    <div id="pnlWest"   class="x-layout-inactive-content">西領域</div>
    <div id="pnlCenter" class="x-layout-inactive-content"></div>

    <!--中央領域内の領域-->
    <div id="pnlCWest"   class="x-layout-inactive-content">中央領域内の西領域</div>
    <div id="pnlCCenter" class="x-layout-inactive-content">中央領域内の中央領域</div>
</body>
</html>

NestedLayoutEx.js 
//ネストレイアウト
nestedLayoutEx=function(){
    var BorderLayout=Ext.BorderLayout;
    var ContentPanel=Ext.ContentPanel;
    var NestedLayoutPanel=Ext.NestedLayoutPanel;

    return {
        //初期化
        init : function(){ 
            //レイアウトの生成
            var layout=new BorderLayout(document.body, {
                //西領域
                west: {
                    collapsible:true,
                    initialSize:120,
                    split      :true,
                    titlebar   :true 
                },
                //中央領域
                center: {
                    autoScroll:true
                }
            });
        
            //ネストレイアウトの生成
            var innerLayout=new BorderLayout('pnlCenter',{
                //西領域
                west: {
                    collapsible:true,
                    initialSize:120,
                    split      :true,
                    titlebar   :true 
                },
                //中央領域
                center: {
                    collapsible:true,
                    split      :true,
                    titlebar   :true 
                }
            });
        
            //レイアウトの更新開始
            layout.beginUpdate();
        
            //西パネル
            layout.add('west',new ContentPanel('pnlWest',{
                title:'西パネル'
            }));
        
            //中央領域内の西パネル
            innerLayout.add('west',new ContentPanel('pnlCWest',{
                title:'西パネル'
            }));
        
            //内部中央パネル
            innerLayout.add('center',new ContentPanel('pnlCCenter',{
                title:'中央パネル'
            }));
        
            //中央パネル
            layout.add('center', new NestedLayoutPanel(innerLayout));
        
            //レイアウトの更新完了
            layout.endUpdate();
        }
    };
}();
Ext.onReady(nestedLayoutEx.init,nestedLayoutEx,true);




−戻る−