▼Adobe AIRメモ▼
Ext JS - HelloExt


"Hello Ext"と表示するHTMLアプリケーションを作成する。


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

HelloExt.html 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HelloExt</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="HelloExt.js"></script>
</head>
<body>
    "Hello Ext!"というダイアログの表示。
</body>
</html>

HelloExt.js 
//処理の開始
Ext.onReady(function() {
    Ext.MessageBox.alert('','Hello Ext!');
});


Ext JS - Elementの取得


DOMの要素の取得を行うHTMLアプリケーションを作成する。


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

ElementEx.html 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ElementEx</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="ElementEx.js"></script>

</head>
<body>
    <div id="divText">テストメッセージです。</div>
    <input type="button" id="btnShowDialog" value="ダイアログの表示" />
</body>
</html>

ElementEx.js 
//処理の開始
Ext.onReady(function() {
    //テキストのハイライト
    var divText=Ext.get('divText');
    divText.highlight();

    //ボタンの生成ト
    var btnShowDialog=Ext.get('btnShowDialog');
    btnShowDialog.on('click',function(){
        Ext.MessageBox.alert('','ボタンを押した。');
    });
});


Ext JS - 非同期通信の利用


非同期通信を行うHTMLアプリケーションを作成する。


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

AjaxEx.html 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>AjaxEx</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="AjaxEx.js"></script>
</head>
<body>
    <input type="button" id="btnAsync" value="非同期通信" />
    <div id="divText" style="visibility: hidden"></div>
</body>
</html>

AjaxEx.js 
//処理の開始
Ext.onReady(function(){
    //非同期ボタンクリック時のイベント処理
    Ext.get('btnAsync').on('click',function(){
        var divText=Ext.get('divText');
        divText.load('flash/test.htm',
            {},
            function(element,success) {
                if (success) {
                    Ext.MessageBox.alert('',element.dom.innerHTML);
                } else {
                    Ext.MessageBox.alert('','通信失敗');
                }
            });
    });
});




−戻る−