ExtJS第一步：登录界面

最新推荐文章于 2013-04-12 00:56:00 发布

comliu

最新推荐文章于 2013-04-12 00:56:00 发布

阅读量4.9k

点赞数

分类专栏： RIA 文章标签： extjs stylesheet class login div html

本文链接：https://blog.csdn.net/comliu/article/details/4055799

版权

RIA 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

思路：整体布局不依赖于Viewport,而是通过Div+CSS的传统方式完成整体布局，只在居中时使用Ext.el.center()方法。

同时，尽可能通过设置Panel和组件的class属性，使用外部CSS控制样式。

这只是一个粗略的实现，很多细节没有调整，也没有实现与服务器的交互。

<%@ 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="/lib/extjs/resources/css/ext-all.css" />
<script src="/lib/extjs/adapter/ext/ext-base.js"></script>
<script src="/lib/extjs/ext-all-debug.js"></script>
<script src="/lib/extjs/build/locale/ext-lang-zh_CN-min.js"></script>
<script src="/lib/extjs/ext/BorderLayoutUtil.js"></script>
<style>
.main{
  width:100%;
  text-align:center;
  vertical-align:center;
}
.login{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width:500px;
  height:200px;
}
.form{
  margin-left:auto;
  margin-right:auto;
  padding-top:5px;
  text-align:left;
  border-style:solid;
  border-width:1px;
  border-color:black;
  background-color:#FFE4B5;
  width:250px;

}
.item{
  text-align:left;
}
.panel{
  background-color:#FFE4B5;
  padding-top:10px;
  padding-left:20px;
  padding-right:20px;
}
</style>
</head>
<body>
<div class="main" id="main">
  <div style="font-size:50px;">系统后台登录</div>
  <div class="login" id="login">
   <div class="form" id="form"></div>
  </div>
</div>
<script>
  Ext.onReady(function(){
   var form=new Ext.form.FormPanel({
    renderTo:"form",
    labelAlign:"left",
    labelPad:0,
    labelWidth:50,
    autoHeigh:true,
    border:false,
    buttonAlign:"center",
    baseCls:"panel",
    itemCls:"item",
    items:[
     {
      id:"userName",
      xtype:"textfield",
      name:"userName",
      fieldLabel:"用户名"
     },
     {
      id:"password",
      xtype:"textfield",
      name:"password",
      fieldLabel:"密码"
     },
     {
      id:"validate",
      xtype:"textfield",
      name:"validate",
      fieldLabel:"验证码"
     }

    ],
    buttons:[
        {
         text:"登录",
         type:"submit"

     }
    ]

   });
   Ext.get("main").center();
   Ext.get("x-form-el-validate").dom.innerHTML+="<br/><img src='http://www.google.cn/intl/zh-CN/images/logo_cn.gif' width='100' height='30'/>";
  });
</script>

</body>
</html>

comliu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS第一步：登录界面

思路：整体布局不依赖于Viewport,而是通过Div+CSS的传统方式完成整体布局，只在居中时使用Ext.el.center()方法。同时，尽可能通过设置Panel和组件的class属性，使用外部CSS控制样式。这只是一个粗略的实现，很多细节没有调整，也没有实现与服务器的交互。 pageEncoding="UTF-8"%>http://www.w3.org/TR/htm
复制链接

扫一扫

专栏目录