ExtJs学習のWindow

13373 ワード

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="UTF-8">

<title>EXtjs   Window</title>

<link rel="stylesheet" type="text/css" href="extjs-4.2.1/resources/css/ext-all.css">

<script type="text/javascript" src="extjs-4.2.1/ext-all.js"></script>

<script type="text/javascript" src="extjs-4.2.1/bootstrap.js"></script>

<script type="text/javascript" src="extjs-4.2.1/ext-lang-zh_CN.js"></script>

<script type="text/javascript">

/**

                     。        ,resizable,   draggable。    maximized     ,          ,   minimize。



          Ext.ZIndexManager  Ext.WindowManager        ,  ,  ,               。



   ,   document.body  。  constrain(  )           renderTo   。



       Containers,                           。                      layout   

 

 */

Ext.onReady(function(){

    Ext.create('Ext.window.Window',{

        title:'Hello',

        height:200,

        width:400,

        layout:'fit',

        items:{

            xtype:'grid',

            border:false,

            columns:[{header:'world'}],            //           。    ,

            store:Ext.create('Ext.data.ArrayStore',{})    //           

        }

    }).show();    

    ///       

    //              。   ,Ext.MessageBox    ‘Ext.Msg’     。

    //  ,          。          JavaScript alert (         ),                。       ,                           ,           

    Ext.Msg.alert('Status','Ext.Msg.alert');

    //                  

    Ext.Msg.prompt('Name','plase enter your name:',function(btn,text){

        if(btn == 'ok'){

            Ext.Msg.alert(text);

        }

    });

    //              

    Ext.Msg.show({

         title:'Save Changes?',

         msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',

         buttons: Ext.Msg.YESNOCANCEL,

         icon: Ext.Msg.QUESTION

    });

});





</script>

</head>

<body>



</body>

</html>

ExtJs学习之Window ExtJs学习之Window ExtJs学习之Window
EXtjs学習のWindow/** アプリケーションウィンドウとして指定するパネル.デフォルトのウィンドウはフローティングで、resizable、draggableです.ウィンドウは、ビューポートを満たすためにmaximizedを使用することができ、以前のサイズに復元することができ、minimizeを使用することができます.ウィンドウは、Ext.ZIndexManagerまたはExt.WindowManager管理にリンクされて、グループ化、アクティビティ、謝罪、その他の指定されたアプリケーションの動作を提供できます.デフォルトでは、フォームはdocument.bodyで表示されます.constrain(制限)のフォームをrenderToとして指定された要素に移動します.すべてのContainersを伴うものとして、ウィンドウのサイズを設定したり、サブコンポーネントを配置したりする方法を考えることが重要です.必要な方法で適切に与えられたサブコンポーネントのlayout構成を選択します.  */Ext.onReady(function(){    Ext.create('Ext.window.Window',{        title:'Hello',        height:200,        width:400,        layout:'fit',        items:{            xtype:'grid',            border:false,            columns:[{header:'world'}],            //1つのヘッダのみを表示します.データはありません.            store:Ext.create('Ext.data.ArrayStore',{})    //偽の空のデータストレージ        }    }).show();        ///ダイアログが表示されます    //メッセージボックスに異なるスタイルのツールクラスを生成します.たとえば、Ext.MessageBox別名「Ext.Msg」も使用できます.    //通知、メッセージボックスは非同期です.通常のJavaScript alertとは異なり、メッセージボックスがコード停止を起こさないことを示します.このため、一部のユーザーがメッセージボックスからフィードバックしてから実行できるコードがある場合は、コールバック関数を使用する必要があります.    Ext.Msg.alert('Status','Ext.Msg.alert');    //ユーザーデータをプロンプトし、コールバック処理結果を使用    Ext.Msg.prompt('Name','plase enter your name:',function(btn,text){        if(btn == 'ok'){            Ext.Msg.alert(text);        }    });    //設定パラメータを使用してダイアログを表示    Ext.Msg.show({         title:'Save Changes?',         msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',         buttons: Ext.Msg.YESNOCANCEL,         icon: Ext.Msg.QUESTION    });});