Extjs複習筆記（六）--完整的浮動窗口

時間 2021-07-14 標籤 EXT JavaScript CSS Ajax

前面搞了這麼久的基礎，下面該來做這個界面了：

這是一個浮動窗口，可以在頁面內到處拉動。

<!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)\/