`
lingyibin
  • 浏览: 196315 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Extjs复习笔记(六)--完整的浮动窗口

阅读更多

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

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

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

 

  • 大小: 38.2 KB
分享到:
评论

相关推荐

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    ExtJS笔记----FormPanel的使用

    NULL 博文链接:https://lucky16.iteye.com/blog/1490278

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    Extjs复习笔记(十八)-- TreePanel

    在本篇ExtJS复习笔记中,我们聚焦于TreePanel组件,它是ExtJS库中的一个核心组件,用于构建可扩展的树形结构数据视图。TreePanel不仅提供了展示层级关系的数据模型,还支持交互操作,如节点的选择、展开与折叠等。在...

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    Extjs复习笔记(十一)--换肤

    在EXTJS中,皮肤(Theme)是一组CSS和图像文件,它们定义了控件、窗口、表格等元素的视觉样式。 在给定的压缩包文件中,我们看到了多个以“xtheme-”开头的CSS文件,如xtheme-midnight.css、xtheme-indigo.css等。...

    Extjs复习笔记(二十)-- tree和grid结合

    在"Extjs复习笔记(二十)-- tree和grid结合"这篇博文中,博主探讨了如何在EXTJS中实现树形视图(Tree)与网格视图(Grid)的融合。 Tree组件在EXTJS中通常用于显示具有层级关系的数据,例如文件系统、组织架构等。...

    extjs2----关于extjs 的使用,操作

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端Web应用程序。在标题"extjs2----关于extjs 的使用,操作"中,我们可以看出这是一份关于ExtJS 2.0版本的使用指南,主要涵盖了其基本操作和应用。描述中提到内容...

    Extjs复习笔记(十七)-- 给grid里面的内容分组

    本篇复习笔记将聚焦于EXTJS Grid中的一个重要特性——内容分组,帮助你深入理解如何实现这一功能。 内容分组在EXTJS Grid中允许你将数据按照特定字段进行分类,这样可以更清晰地组织和展示数据。这在处理大量数据时...

    EXTJS开发包ext-3.2.0

    EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0

    Extjs复习笔记(十五)-- JsonReader

    在“Extjs复习笔记(十五)-- JsonReader”这篇博文中,博主探讨了ExtJS中的JsonReader,这是数据绑定和JSON数据解析的关键部分。 JsonReader是ExtJS数据包(Ext.data)的一部分,用于从服务器获取JSON格式的数据,...

    Extjs4.0学习笔记

    ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4...

    extJs例子-------

    ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子

    extjs-v7.0-cmd

    extjs-cmd 脚手架安装包2 extjs-cmd 脚手架安装包3 extjs-cmd 脚手架安装包4

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中,我们将会看到如何使用ExtJS来创建一个简单的“你好,世界!”应用。以下是对这个示例中涉及的主要知识点的详细解释: 1. **引入ExtJS库**:首先,你需要在HTML文件中引入ExtJS...

    extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip

    ExtJS 4.1.0 是一款流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据绑定机制、MVC架构以及强大的布局管理。社区版是开源的,允许开发者免费使用和定制,适合开发复杂的企业级应用...

    extjs实例--------嗖嗖嗖

    在ExtJS应用中,通常会引入这个文件以获取完整功能。不过,为了优化加载速度和减少页面大小,生产环境中往往会选择引入更小的定制版本,如`ext-core.js`或按需引入单个组件。 2. **resources**:这个目录通常包含...

Global site tag (gtag.js) - Google Analytics