EXT实例

 

(1) 增加一个按钮

 

JSP:

 

<%@ page language="java" import="java.util.*" 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 '004_base02_ext.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="js/extjs/resources/css/ext-all.css" />
	<script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script>
	<script type="text/javascript" charset="utf-8" src="base/test.js"></script>

  </head>
  
  <body>
  <div id="button"></div>
  </body>
</html>

 

JS:

 

Ext.onReady(function(){
	var button = new Ext.Button({  
        text:"点击",  
        pressed:true,  
        height:30,  
        renderTo:"button",  
        handler:hello 
    });  
});

function hello(){  
    alert('hello,world');  
} 

 

 

(2) 常用的用户登录界面

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/ext-all-debug.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
	Ext.widget('form', {
        renderTo: Ext.getBody(),
        frame: true,
        width: 350,
        items: [{
            xtype: 'textfield',
            name: 'username',
            fieldLabel: '用户名',
            allowBlank: false,
            minLength: 6
        },{
            xtype: 'textfield',
            name: 'password',
            fieldLabel: '密码',
            allowBlank: false,
            minLength: 6
        }],
        dockedItems: [{
            xtype: 'container',
            dock: 'bottom',
            layout: {
                type: 'hbox',
                align: 'middle'
            },
            padding: '10 10 5',
            items: [{
            	xtype: 'button',
                text: '登录',
                width: 140,
                handler: function() {
                    var form = this.up('form').getForm();
                    form.submit({
                        clientValidation: true,
                        url: 'login.do',
                        success: function(form, action) {
                           alert("登录成功!!");
                        },
                        failure: function(form, action) {
                            alert("登录出错!!!");
                        }
                    });
                    
                }
            }]
        }]
	});
});
</script>
</head>
<body>

</body>
</html>

 

你可能感兴趣的:(ext)