ExtJs学习之Window

最新推荐文章于 2018-11-10 15:55:38 发布

骑着乌龟漫步

最新推荐文章于 2018-11-10 15:55:38 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/u010608551/article/details/79287192

版权

<!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>

<!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>

骑着乌龟漫步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs学习之Window

DOCTYPE html>html xmlns="http://www.w3.org/1999/xhtml">head>meta charset="UTF-8">title>EXtjs学习之Windowtitle>link rel="stylesheet" type="text/css" href="extjs-4.2.1/resources/css/ext-all.css">
复制链接

扫一扫