Extjs的Window组件的简单实用实例

最新推荐文章于 2021-08-03 21:06:15 发布

seed_lee

最新推荐文章于 2021-08-03 21:06:15 发布

阅读量853

点赞数 1

分类专栏： ExtJs 文章标签： extjs function stylesheet border layout java

本文链接：https://blog.csdn.net/seed_lee/article/details/6181269

版权

ExtJs 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

实例代码（简单的登录窗体）：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>窗体式登陆框</title>
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../extjs/adapter/ext-base.js"></script>
    <script type="text/javascript" src="../extjs/ext-all.js"></script>

    <script type="text/javascript">

        Ext.onReady(function(){

            var _loginWindow=new Ext.Window({
                title:"登   陆",
                frame:true,
                layout:"form",
                plain :true,//设置窗体颜色跟边框一色一直
                resizable :false,//设置不允许用户拉动窗体的大小
                minimizable :false,//设置窗体无最小换按钮
                maximizable :false, //设置窗体无最大化按钮
                closable:true,//设置窗体无关闭按钮（默认的是有关闭按钮）
                border :true,//设置窗体有无边框(默认为有边框)
                buttonAlign:"center", //设置窗体的按钮所在位置，默认为右对齐
                //   closeAction推荐使用hide值，而不要使用close，使用close会消耗很大的资源
                closeAction :"hide", //设置关闭的事件，如果设置成为hide，则关闭的时候就只会出发hide事件，如果设置成为close，则会同时出发hide和close事件
                width:280,
                height:130,
                labelWidth:50, //输入框前面label的宽度
                shadowOffset :8, //投影偏移量
                bodyStyle:"padding:5px", //设置窗体的样式
                defaults:{xtype:"textfield",width:170},
                items:[{fieldLabel:"用户名"},{fieldLabel:"密码"}],
                buttons:[{text:"确定"},{text:"取消",handler:function(){
                    //调用窗体的隐藏函数
                    _loginWindow.hide();
                }
                }],
                listeners:{
                    "show":function(){
                        alert("window is show!");
                    },
                    "hide":function(){
                        alert("window is hided!");
                    },
                    "close":function(){
                        alert("window is closed!");
                    }

                }
            });

            _loginWindow.show(); //渲染窗体到界面

        });

    </script>

</head>
<body>Place your content here</body>
</html>