Extjs复习笔记（六）--完整的浮动窗口

最新推荐文章于 2022-05-20 10:35:35 发布

lybacm

最新推荐文章于 2022-05-20 10:35:35 发布

阅读量433

点赞数

分类专栏： Extjs等js的Ajax框架文章标签： EXT JavaScript CSS 360 Ajax ViewUI

本文链接：https://blog.csdn.net/lybacm/article/details/83739671

版权

Extjs等js的Ajax框架专栏收录该内容

27 篇文章 0 订阅

订阅专栏

前面搞了这么久的基础，下面该来做这个界面了：

这是一个浮动窗口，可以在页面内到处拉动。

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

lybacm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs复习笔记（六）--完整的浮动窗口

前面搞了这么久的基础，下面该来做这个界面了：这是一个浮动窗口，可以在页面内到处拉动。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www...
复制链接

扫一扫

专栏目录