[ExtJs] ExtJs Window组件基础

 

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'hello_01.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/extjs/resources/css/ext-all.css">
  
  <script type="text/javascript" src="${pageContext.request.contextPath}/extjs/ext-all.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/extjs/ext-lang-zh_CN.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/ext/js/window_01.js"></script>
  </head>
  
  <body>
    This is my JSP page. <br>
  </body>
</html>

　　

window_01.js

//Ext.onReady 准备函数 类似于window.onload
Ext.onReady(function(){
    
    
        Ext.create('Ext.window.Window', {
            title: '员工信息',// 标题
            height: 200,
            width: 400,
            layout: 'fit',
            modal:true ,//为true 当显示时，制作窗口模板并且掩饰他背后的一切，为false时显示它除了限制访问其他UI元素。
            constrain:true, /** true： 限制窗口在窗口包含的元素里面，false：允许允许顶部超出它包含的元素。 默认的，窗体将被渲染到document.body。渲染和禁用窗口在另一个指定的renderTo元素内部。
            仅仅能通过使用constrainHeader禁用选定的头部。*/
            constrainHeader:true, ////不允许该窗口的title超出浏览器边界
            //内嵌入HTML片段
           // html:"<span>员工内容展示</span><table><tr><td>姓名:</td><td>老万</td></tr><tr><td>密码:</td><td>123456</td></tr></table>",
           items:[{
               xtype:"textfield",
               fieldLabel:"用户名",
               width:60,
               height:20,
               allowBlank:false, //是否为空
               id:"name"
           },{
               xtype:"textfield",
               fieldLabel:"密码",
               width:60,
               height:20,
               allowBlank:false, //是否为空
               id:"pwd"
           }],
            buttons:[{ text: '确定',handler:function(){
                //获取id为name的组件
                //var name = Ext.ComponentManager.get("name");
                /**
                 * getCmp( String id )

        Ext.ComponentManager.get方法的简写。 通过id查找现有的Component
                 */
                var name = Ext.getCmp("name");
                
                //获取Text中的值
                console.info(name.getValue());
                 
            }},{ text: '取消',handler:function(){
                alert("取消...");
            },
            disabled:false,// 是否禁用
            hidden:false, // 是否隐藏
            draggable:false, // 是否允许拖动
          //  href:"http://www.baidu.com", //指定一个链接
            }]
           // show 显示窗体，默认隐藏     
        }).show();
    
});

 

posted @ 2015-11-19 19:43  snow__wolf  阅读(171)  评论(0)    收藏  举报