当前位置:首页 > 开发 > Web前端 > Ext > 正文

EXT实例

发表于: 2015-05-02   作者:tntxia   来源:转载   浏览:
ext
摘要:   (1) 增加一个按钮   JSP:   <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); Stri

 

(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实例

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
在《Ext2.0布局类初探》一文我简单的分析了一下Ext 2.0的布局类,但是缺乏例子。本篇文章的目的就是
在《Ext2.0布局类初探》一文我简单的分析了一下Ext 2.0的布局类,但是缺乏例子。本篇文章的目的就是
在《Ext2.0布局类初探》一文我简单的分析了一下Ext 2.0的布局类,但是缺乏例子。本篇文章的目的就是
在《Ext2.0布局类初探》一文我简单的分析了一下Ext 2.0的布局类,但是缺乏例子。本篇文章的目的就是
如果我的博文能帮到你,我感到非常荣幸。能力所限,对于我所写的内容如有不详不对,你们能给一些意
在做eclipse插件时经常会用的属性列表,也没有做好记录,现在都不知道是怎么做的了,只是觉得当时做
如果我的博文能帮到你,我感到非常荣幸。能力所限,对于我所写的内容如有不详不对,你们能给一些意
1:简单实例 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%
1:简单介绍 A combobox control with support for autocomplete, remote loading, and many other
使用Ext可以说最多的就是Grid了,它可以方便的展示列表数据并能够对数据分页和排序。 下面从最简单G
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号