前面搞了这么久的基础，下面该来做这个界面了：
这是一个浮动窗口，可以在页面内到处拉动。
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<title>登陆窗体</title>
<script type="text/javascript" src="../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../ext-all.js">
</script>
<script type="text/javascript" src="../../build/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
var win = new Ext.Window({
title:"添加个人信息",
width:440,
layout:"form",
labelWidth:55,
plain:true,
bodystyle:"padding:5px",
height:370,
buttonAlign:"center",
defaults:{xtype:"textfield",width:360},
items:[{
xtype:"panel",
baseCls:"x-plain", //base class 基类，和plain:true效果差不多
layout:"column",
style:"padding:5px",
items:[{
baseCls:"x-plain",
columnWidth:.5,
layout:"form",
labelWidth:55,
defaults:{xtype:"textfield",width:115},
items:[{
fieldLabel:"姓名"
},{
fieldLabel:"年龄",
readOnly:true //只读
},{
xtype:"datefield",
fieldLabel:"出生日期",
value:new Date(),//也可"2010-10-1"
//readOnly:true, //这个一设置，都不能选择了
editable:false, //不可编辑
format:"Y-m-d", //格式化成：2010-10-30
listeners:{
"blur":function(){ //当失去焦点的时候就触发此事件
var dayDif = new Date().getFullYear()-this.getValue().getFullYear();
//把年龄设成今年和出生日期之差
this.ownerCt.findByType("textfield")[1].setValue(dayDif);
}
}
},{
fieldLabel:"联系电话"
},{
fieldLabel:"手机号码"
},{
fieldLabel:"电子邮件"
},{
fieldLabel:"性别",
xtype:"combo",
editable:false,//不可编辑
mode:"local",
value:"男",
triggerAction:"all",//如果上面设置了value的话，这个就是必须的，它默认值是query
displayField:"sex",//数据选择列，下面的store之后会讲，这里面只是稍微知道有这么一个东西就行了
store:new Ext.data.SimpleStore({
fields:["sex"],
data:[["男"],["女"]]
})
}]
},{
baseCls:"x-plain",
columnWidth:.5,
layout:"form",
labelWidth:45,
items:{
xtype:"textfield",
fieldLabel:"照片",
width:150,
height:150,
inputType:"image" //设置成图片
}
}]
},{
fieldLabel:"身份证号"
},{
fieldLabel:"个体地址"
},{
fieldLabel:"职务"
}],
buttons:[{
text:"确定"
},{
text:"取消"
}],
listeners:{
"show":function(win){ //用“render”的话getEl()取不到值，所以只能用show
win.findByType("textfield")[7].getEl().dom.src="conan.png";
}
}
}).show();
});
</script>
</head>
<body>
</body>
</html>
?其中有两个地方需要再解释：
?
1、getEl（）的官方解释
Returns the Ext.Element which encapsulates this Component.
This will usually be a <DIV> element created by the class's onRender method, but that may be overridden using the autoEl config.
?
Note: this element will not be available until this Component has been rendered.
?
To add listeners for DOM events to this Component (as opposed to listeners for this Component's own Observable events), see the listeners config for a suggestion, or use a render listener directly:
new Ext.Panel({
?? ?title: 'The Clickable Panel',
?? ?listeners: {
?? ? ? ?render: function(p) {
?? ? ? ? ? ?// Append the Panel to the click handler's argument list.
?? ? ? ? ? ?p.getEl().on('click', handlePanelClick.createDelegate(null, [p], true));
?? ? ? ?},
?? ? ? ?single: true ?// Remove the listener after first invocation
?? ?}
});
Parameters:
None.
Returns:
Ext.Element
The Element which encapsulates this Component.
?
?
2、日期格式化用的字符串
Format ?Description ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Example returned values
------ ?----------------------------------- ? -----------------------
??d ? ? Day of the month, 2 digits with leading zeros ? ? ? ? ? ? ? ? ? ? ? ? ? ? 01 to 31
??D ? ? A short textual representation of the day of the week ? ? ? ? ? ? ? ? ? ? Mon to Sun
??j ? ? Day of the month without leading zeros ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1 to 31
??l ? ? A full textual representation of the day of the week ? ? ? ? ? ? ? ? ? ? ?Sunday to Saturday
??N ? ? ISO-8601 numeric representation of the day of the week ? ? ? ? ? ? ? ? ? ?1 (for Monday) through 7 (for Sunday)
??S ? ? English ordinal suffix for the day of the month, 2 characters ? ? ? ? ? ? st, nd, rd or th. Works well with j
??w ? ? Numeric representation of the day of the week ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0 (for Sunday) to 6 (for Saturday)
??z ? ? The day of the year (starting from 0) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 0 to 364 (365 in leap years)
??W ? ? ISO-8601 week number of year, weeks starting on Monday ? ? ? ? ? ? ? ? ? ?01 to 53
??F ? ? A full textual representation of a month, such as January or March ? ? ? ?January to December
??m ? ? Numeric representation of a month, with leading zeros ? ? ? ? ? ? ? ? ? ? 01 to 12
??M ? ? A short textual representation of a month ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Jan to Dec
??n ? ? Numeric representation of a month, without leading zeros ? ? ? ? ? ? ? ? ?1 to 12
??t ? ? Number of days in the given month ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 28 to 31
??L ? ? Whether it's a leap year ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1 if it is a leap year, 0 otherwise.
??o ? ? ISO-8601 year number (identical to (Y), but if the ISO week number (W) ? ?Examples: 1998 or 2004
?? ? ? ?belongs to the previous or next year, that year is used instead)
??Y ? ? A full numeric representation of a year, 4 digits ? ? ? ? ? ? ? ? ? ? ? ? Examples: 1999 or 2003
??y ? ? A two digit representation of a year ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Examples: 99 or 03
??a ? ? Lowercase Ante meridiem and Post meridiem ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? am or pm
??A ? ? Uppercase Ante meridiem and Post meridiem ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? AM or PM
??g ? ? 12-hour format of an hour without leading zeros ? ? ? ? ? ? ? ? ? ? ? ? ? 1 to 12
??G ? ? 24-hour format of an hour without leading zeros ? ? ? ? ? ? ? ? ? ? ? ? ? 0 to 23
??h ? ? 12-hour format of an hour with leading zeros ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?01 to 12
??H ? ? 24-hour format of an hour with leading zeros ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?00 to 23
??i ? ? Minutes, with leading zeros ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 00 to 59
??s ? ? Seconds, with leading zeros ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 00 to 59
??u ? ? Decimal fraction of a second ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Examples:
?? ? ? ?(minimum 1 digit, arbitrary number of digits allowed) ? ? ? ? ? ? ? ? ? ? 001 (i.e. 0.001s) or
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?100 (i.e. 0.100s) or
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?999 (i.e. 0.999s) or
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?999876543210 (i.e. 0.999876543210s)
??O ? ? Difference to Greenwich time (GMT) in hours and minutes ? ? ? ? ? ? ? ? ? Example: +1030
??P ? ? Difference to Greenwich time (GMT) with colon between hours and minutes ? Example: -08:00
??T ? ? Timezone abbreviation of the machine running the code ? ? ? ? ? ? ? ? ? ? Examples: EST, MDT, PDT ...
??Z ? ? Timezone offset in seconds (negative if west of UTC, positive if east) ? ?-43200 to 50400
??c ? ? ISO 8601 date
?? ? ? ?Notes: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Examples:
?? ? ? ?1) If unspecified, the month / day defaults to the current month / day, ? 1991 or
?? ? ? ? ? the time defaults to midnight, while the timezone defaults to the ? ? ?1992-10 or
?? ? ? ? ? browser's timezone. If a time is specified, it must include both hours 1993-09-20 or
?? ? ? ? ? and minutes. The "T" delimiter, seconds, milliseconds and timezone ? ? 1994-08-19T16:20+01:00 or
?? ? ? ? ? are optional. ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1995-07-18T17:21:28-02:00 or
?? ? ? ?2) The decimal fraction of a second, if specified, must contain at ? ? ? ?1996-06-17T18:22:29.98765+03:00 or
?? ? ? ? ? least 1 digit (there is no limit to the maximum number ? ? ? ? ? ? ? ? 1997-05-16T19:23:30,12345-0400 or
?? ? ? ? ? of digits allowed), and may be delimited by either a '.' or a ',' ? ? ?1998-04-15T20:24:31.2468Z or
?? ? ? ?Refer to the examples on the right for the various levels of ? ? ? ? ? ? ?1999-03-14T20:24:32Z or
?? ? ? ?date-time granularity which are supported, or see ? ? ? ? ? ? ? ? ? ? ? ? 2000-02-13T21:25:33
?? ? ? ?http://www.w3.org/TR/NOTE-datetime for more info. ? ? ? ? ? ? ? ? ? ? ? ? 2001-01-12 22:26:34
??U ? ? Seconds since the Unix Epoch (January 1 1970 00:00:00 GMT) ? ? ? ? ? ? ? ?1193432466 or -2138434463
??M$ ? ?Microsoft AJAX serialized dates ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? \/Date(1238606590509)\/ (i.e. UTC milliseconds since epoch) or
?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?\/Date(1238606590509+0800)\/
?