ExtJS4.2 登陆表单(Login)简单示例

来源:互联网 发布:千年软件下载 编辑:程序博客网 时间:2024/05/29 18:21

下面实例演示如何实现一个简单的extjs登陆表单,详细代码如下:

<%@ 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>Insert title here</title> <link href="../Extjs/ext4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />    <script type="text/javascript" src="../Extjs/ext4.2/bootstrap.js"></script>    <script type="text/javascript">    Ext.onReady(function () {    var loginForm = Ext.create("Ext.form.Panel", {        title: '用户登陆',        frame: true,        width: 320,        bodyPadding: 10,        defaultType: 'textfield',        defaults: {            anchor: '100%',            labelWidth: 50,            labelAlign: "right"        },        items: [            {                allowBlank: false,                fieldLabel: '用户名',                name: 'UserName',                emptyText: '用户名'            },            {                allowBlank: false,                fieldLabel: '密码',                name: 'Password',                emptyText: '密码',                inputType: 'password'            },            {                xtype: 'checkbox',                fieldLabel: '记住我',                name: 'remember'            }        ],        buttons: [            { text: '注册' },            { text: '登陆' }        ],        renderTo: "container"    });});    </script></head><body><div id="container"></div></body></html>

界面如下:






0 0
原创粉丝点击