EXT入门学习
今天，对EXT做了一下初步的了解，了解了一些基本用的函数、窗体对象、表单、文本域、按钮，一些基本的函数我列了出来，写了个登陆的demo，是根据别人的例子模仿出来的，见谅哈。
Ext.onReady();函数： ExtJS Application的入口，相当于java的main()函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆页面</title>
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="Ext/ext-all.js" ></script>
<link rel="stylesheet" href="Ext/resources/css/ext-all.css" />
<style type="text/css">
.loginicon
{
background-image: url(img/2012062119234296.gif) !important;
}
</style>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = "side";
var btnsubmitclick = function(){
if(form.getForm().isValid()){
Ext.MessageBox.alert("提示","登陆成功！");
}
}
var btnresetclick = function(){
form.getForm().reset();
}
var txtusername = new Ext.form.TextField({
width:147,
allowBlank:false,
maxLength:10,
fieldLabel:"用户名",
blankText:"请输入用户名",
maxLengthText:"用户名不能超过10个字符"
});
var txtpassword = new Ext.form.TextField({
width:147,
allowBlank:false,
maxLength:10,
name:"password",
fieldLabel:"密码",
blankText:"请输入密码",
maxLengthText:"密码不能超过10个字符"
});
var txtcheckcode = new Ext.form.TextField({
width:80,
allowBlank:false,
maxLength:4,
fieldLabel:"验证码",
id:"checkcode",
blankText:"请输入验证码",
maxLengthText:" 验证码为4个字符"
});
var btnsubmit = new Ext.Button({
text:"登陆",
handler:btnsubmitclick
});
var btnreset = new Ext.Button({
text:"重置",
handler:btnresetclick
});
var form = new Ext.form.FormPanel({
url:"********",
labelAlign:"right",
labelWidth:45,
cls:"loginform",
buttonAlign:"center",
frame:true,
width:230,
height:140,
style:"margin:3px",
html:"<div></div>",
items:[txtusername,txtpassword,txtcheckcode],
buttons:[btnsubmit,btnreset]
});
var win = new Ext.Window({
title:"登陆窗口",
iconCls:"loginicon",
plain:true,
width:250,
height:180,
resizable:false,
shadow:true,
modal:true,
html:"<div></div>",
closable:true,
maximizable:true,
minimizable:true,
animCollapse:true,
items:form
});
win.show();
var checkcode = Ext.getDom("checkcode");
var checkimage = Ext.get(checkcode.parentNode);
checkimage.createChild({
tag:"img",
src:"img/checkcode.gif",
align:"absbottom",
style:"padding-left:20px;cursor:pointer;"
});
}); </script>
</head>
<body> </body>
</html>
EXT入门学习的更多相关文章
- Ext入门学习系列（三）复杂自定义窗体
通过前2节的学习,基本掌握了Ext的语法和运行原理,可以作出一些简单的应用.本节我们一起来完成复杂点的对话框操作,因为在实际项目中经常要用到确认对话框等多种操作,然后根据客户的选择作出不同的响应. 一 ...
- Ext入门学习系列（二）弹出窗体
第二章 弹出窗体 上节学习了Ext的环境搭建和最基本的一个操作——弹出对话框,作为一个引子,本节讲述如何弹出一个新窗体,从实例讲解Ext的基本运行原理. 一.Ext的窗体长什么样? 先来看看几个效果, ...
- Ext入门学习系列（四）面板控件
第四章 使用面板 上节学习了Ext复杂对话框,更进一步了解了Ext的运行机制.本章重点来了解Ext所有控件的基础——面板控件. 一.Ext的面板是什么? 同样先来看看几个效果: 基本面板,点击右上角小 ...
- Ext入门学习系列（五）表格控件（3）
上节学习了Ext中如何绑定服务器端传递的数据.分别用asp.net和asp.net MVC.PHP.XML为例.本节主要介绍绑定之后的分页功能. 一.Ext的表格控件如何绑定? 分页是Ext自带的一个 ...
- Ext入门学习系列（五）表格控件（2）
上节学习了Ext中表格控件,从创建,到定义数据源.绑定显示,大体明白了一个基本的表格控件是怎么实现的.而我们用表格控件多用于从各种数据源接收数据并显示出来,并不是写死的.本章我们就不同数据源的不同实现 ...
- Ext入门学习系列（五）表格控件（1）
上节学习了Ext面板控件,为后面的各个控件学习奠定基础,在此基础上本章将学习网络开发最期待的功能——表格控件. 我们都知道网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net ...
- opengl入门学习
OpenGL入门学习 说起编程作图,大概还有很多人想起TC的#include <graphics.h>吧? 但是各位是否想过,那些画面绚丽的PC游戏是如何编写出来的?就靠TC那可怜的640 ...
- 【Ext.Net学习笔记】02：Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...
- OpenGL入门学习(转)
OpenGL入门学习 http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html 说起编程作图,大概还有很多人想起TC的#includ ...
随机推荐
- Python中的结构化数据分析利器-Pandas简介
Pandas是python的一个数据分析包,最初由AQR Capital Management于2008年4月开发,并于2009年底开源出来,目前由专注于Python数据包开发的PyData开发tea ...
- caffe中使用crop_size剪裁训练图片
layer { name: "data" type: "Data" top: "data" top: "label" i ...
- 在eclipse中安装html编辑器插件
1.下载插件( 点击下载) 解压后得到GEF-ALL-3.4.1.zip和tk.eclipse.plugin.htmleditor_2.2.0.jar 2.安装GE ...
- hdu 1698 线段树 区间更新 区间求和
Just a Hook Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...
- HDU 5586 (dp 思想)
Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submis ...
- Codeforces Round #508 (Div. 2) D. Slime
D. Slime 题目链接:https://codeforces.com/contest/1038/problem/D 题意: 给出两个数,然后每次可以对相邻的两个数合并,比如x,y,那么合并过后就是 ...
- HDU 5876 Sparse Graph BFS+set删点
Problem Description In graph theory, the complement of a graph G is a graph H on the same vertices s ...
- PHP日期时间操作
一.设置时区 date_default_timezone_set('PRC'); 二.获取当前时间的 Unix 时间戳(格林威治时间 1970 年 1 月 1 日 00:00:00到当前时间的秒数)和 ...
- MQTT协议－MQTT协议简介及协议原理
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的“轻量级”通讯协议,该协议构建 ...
- SSL 证书类型说明: DV OV EV
内容来自: ssl 证书的三种类型: dv (域名型) , ov (企业型) 和 ev (扩展型) OV.DV和EV证书的区别 另外: 浏览器兼容性测试报告 Symantec 证书为什么相比其他证书要 ...