进阶篇(2)-ExtJs中的Window对象与FormPanel详解
简述window对象
简述window对象window对象是Windows操作系统中最基本的用户界面元素之一,也是JavaScript语言中最常用的对象之一。
它是一个窗口对象,可以访问操作系统创建的Windows窗口,包括文本框、按钮、标签、菜单等控件。
以下是window对象的一些基本信息和用法:1. 基本属性window对象有以下几个基本属性:- 窗口标题(title):显示在窗口标题栏上的标题字符串。
- 窗口大小(width):窗口的宽度。
- 窗口高度(height):窗口的高度。
- 窗口位置(position):窗口在屏幕上的相对位置。
- 默认可见性(default visibility):如果窗口没有显式,则默认隐藏。
- 边框宽度(border width):窗口的边框宽度。
- 背景色(background color):窗口的背景色。
- 状态(status):窗口的状态,包括正在被使用时的显示状态和关闭时的隐藏状态。
2. 方法window对象有以下方法:- 显示(show):将窗口显示出来,如果窗口处于隐藏状态,则显示窗口标题。
- 隐藏(hide):将窗口隐藏起来,如果窗口处于显示状态,则隐藏窗口标题。
- 最大化(maximize):将窗口最大化,使其占据整个屏幕。
- 最小化(minimize):将窗口最小化,使其缩放到屏幕的右下角。
- 恢复(re还原):将窗口恢复到默认状态,如果窗口处于最小化状态,则恢复窗口标题。
- 移动(move):将窗口向上、向下、向左、向右移动,如果窗口处于固定状态,则只移动窗口标题。
- 旋转(rotate):将窗口旋转90度或270度,如果窗口处于固定状态,则只旋转窗口标题。
- 滚动(scroll):将窗口向上、向下、向左、向右滚动,如果窗口处于固定状态,则只滚动窗口标题。
- 关闭(close):关闭窗口,如果窗口处于显示状态,则关闭窗口标题。
- 显示消息(display message):在窗口中显示一条消息,可以显示文本、图像、链接等。
ExtJS—表单与输入控件
ExtJS—表单与输入控件表单在EXT中非常受欢迎，初看这些输入控件，好像只是修改了CSS样式而已，但是如果用Firebug查看一下DOM，似乎确实只有CSS发生了变化，隐藏在漂亮界面下的依然是原来的input控件，如果你想使用EXT提供的一些绚丽的功能，建议尝试EXT的表单(Form)和对应的输入控件。
本文就是简单介绍表单与输入控件的使用方法。
一、创建一个简单的表单1、具体配置信息参考上篇文章2、创建简单表单的实现代码如下所示：view plaincopy to clipboardprint?1.<mce:script type="text/javascript"><!--2.Ext.onReady(function(){3.var form=new Ext.form.FormPanel({4.defaultType:'textfield',belAlign:'right',6.title:'form',belWidth:50,8.frame:true,9.width:220,10.items:[{11.fieldLabel:' 文本框'12.}],13.buttons:[{14.text:'按钮'15.}]16.});17.form.render("div1");18.});19.20.// --></mce:script>3、注意HTML中无需定义太多东西，只需要定义个div id='div1'就可以实现，初始配置显然变得更紧凑，利用items和buttons指定包含的控件和按钮。
具体实现效果如图1所示。
图1 简单的表单二、FormPanel和BasicForm详解如上面的实例所示，我们需要定义一个Ext.form.FormPanel,然后在里面设置field,引入Ext.form.For mPanel 的最大好处就是利于布局，Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分，同时也可以利用items指定Ext.form.FormPanel内部的子组件。
学习ExtJs笔记
学习ExtJs笔记Grid表格1、添加数据的时候，将数据的属性设置为dirty。
因为在使用Ajax提交数据的时候，非dirty的数据不会自动保存到store的modifield属性中。
2、保存数据：（1）store.modifield.slice(start,end);作用：返回一个新数组，取得从start到end的所有元素，但不包括end元素。
如果参数只有一个0，则表示取得全部的数据；（2）each(m,function())(m为一个数组)，该方法主要作用是遍历数组m中的每一条记录，并且每条记录都按照function()方法进行处理。
不可在function方法里面加上循环，否则，将出现多重结果。
（3）listeners监听器：listeners: {"afterEdit": {fn: afterEdit,scope: this} }作用：监听afterEdit。
当单元格编辑完成或者退出编辑状态，自动调用fn方法，作用的范围是当前页面。
（4）当添加数据成功后，新添加的数据有三角行的标识，要除掉标识，可用Record 的commit方法。
3、读取数据（1）从Txt文件中读取数据将读取的数据编码eval(response.responseText),否则将不能正确读取数据。
（2）设置记录的字段的值var initValue = {name:'',gender:'',age:''};var p = new Record(initValue);p.set('name',data_get[i].name);p.set('gender',data_get[i].gender);p.set('age',data_get[i].age);Tree 树1、Tree的加载使用方法render。
Tree.render()方法将tree加载到tree的‘el’中。
ExtJs中表单formPanel的横向布局
xtype :"textfield",
fieldLabel :"音乐最爱",
width : 50
}]
}, {
layout :"form",
columnWidth : 0.2,
items : [{
xtype :"textfield",
fieldLabel :"明星最爱",
width : 50
layout :"form",//整个大的表单是form布局
labelWidth : 65,
labelAlign :"right",
items : [{//行1
layout :"column",//从左往右的布局
items : [{
columnWidth : .3,//该列有整行中所占百分比
layout :"form",//从上往下的布局
}]
}, {
layout :"form",
columnWidth : 0.2,
items : [{
xtype :"textfield",
fieldLabel :"运动最爱",
width : 50
}]
}]
}],
buttonAlign :"center",
buttons : [{
text :"提交"
}, {
items : [{
xtype :"textfield",
fieldLabel :"姓",
IFrame与window对象(contentWindow)
var detialIframe=document.all("detialIframe");此处的IFrame是从document取得的,即作作为document的子对象出现,虽然是文档(document)对象,但由于它是独立的页面,因而拥有自己的事件,拥有自己的窗口对象(contentWindow); Window.detialIframe 或Window.frames(detialIframe)将直接取得IFrame的Window对象IFRAMEIFRAME 元素也就是文档中的文档window 对象浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。
但是，如果一个文档定义了一个或多个框架(即，包含一个或多个 frame 或 iframe 标签)，浏览器就会为原始文档创建一个 window 对象，再为每个框架创建额外的window 对象。
这些额外的对象是原始窗口的子窗口，可能被原始窗口中发生的事件所影响。
例如，关闭原始窗口将导致关闭全部子窗口。
如果想要创建新窗口(以及对应的 window 对象)，可以使用像 open, showModalDialog 和showModelessDialog 这样的方法。
contentWindowcontentWindow属性是指指定的frame或者iframe所在的window对象在IE中iframe或者frame的contentWindow属性可以省略，但在Firefox 中如果要对iframe对象进行编辑则必须指定contentWindow属性。
function EnableEdit(){var editor;editor = document.getElementById("HtmlEdit").contentWindow;// 针对IE浏览器, make it editableeditor.document.designMode = 'On';editor.document.contentEditable = true;// For compatible with FireFox, it should open and write something to make it workeditor.document.open();editor.document.writeln('<html><head>');editor.document.writeln('<style>body {background:white;font-size:9pt;margin: 2px; padding: 0px;}</style>');editor.document.writeln('</head><body></body></html>');editor.document.close();}<iframe ID="HtmlEdit" MARGINHEIGHT="1" MARGINWIDTH="1" width="100%" height="312"></iframe><html><body><script>var ifr = document.createElement("iframe");document.body.appendChild(ifr);var ifrdoc = ifr.contentWindow.document;var s = fixingHTB.innerHTML; //进入可编辑模式前存好ifrdoc.designMode = "on"; //文档进入可编辑模式ifrdoc.open(); //打开流ifrdoc.write(s);ifrdoc.close(); //关闭流ifrdoc.designMode ="off"; //文档进入非可编辑模式</script></body></html>document.designMode的功能与使用方法介绍将文档设置为设计模式要将整个文档设置为设计模式，可以对文档对象本身设置designMode 属性。
window对象方法
window对象方法Window对象是JavaScript中的全局对象，提供了许多方法来操作与浏览器窗口相关的功能。
下面是几个常用的Window对象方法的介绍：1. alert()方法：该方法用于显示一个带有一段消息和一个确认按钮的警告框。
通过调用alert()方法，可以向用户提供一些必要的信息或警告。
2. confirm()方法：该方法用于显示一个带有一段消息、确认按钮和取消按钮的确认框。
用户点击确认按钮后，confirm()方法返回true；用户点击取消按钮后，confirm()方法返回false。
可以利用该方法获取用户的选择，并根据选择做出不同的处理。
3. prompt()方法：该方法用于显示一个带有消息、输入框和确认按钮的对话框，接受用户输入。
用户可以在输入框中输入文本，并点击确认按钮提交输入的内容。
prompt()方法返回用户输入的内容。
可以利用该方法获取用户的输入，并进行后续的操作。
4. open()方法：该方法用于打开一个新的浏览器窗口或者一个新的标签页。
可以指定打开页面的URL、窗口的大小、位置以及其他属性。
open()方法返回一个代表新窗口的Window对象，可以对该窗口进行进一步的操作。
5. close()方法：该方法用于关闭一个浏览器窗口或者一个标签页。
可以通过调用close()方法关闭当前窗口。
除了上述介绍的方法，Window对象还提供了许多其他方法，例如setTimeout()和setInterval()用于定时执行代码，以及location对象相关的方法用于获取或设置当前窗口的URL等。
总结来说，Window对象的方法可以方便地与浏览器窗口进行交互，提供了丰富的功能来展示信息、获取用户输入以及控制窗口的打开和关闭等操作。
在开发Web应用程序时，可以根据需求灵活使用这些方法，以提升用户体验和增强交互性。
ExtJS之FormPanel详细参数和公共事件
ExtJS之FormPanel详细参数和公共事件一、FormPanel详细参数介绍1、layout : String此容器所使用的布局类型。
如不指定，则使用缺省的yout.ContainerLayout 类型。
当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form 和table。
针对所选择布局类型，可指定#layoutConfig 进一步配置。
2、layoutConfig : Object选定好layout 布局后，其相应的配置属性就在这个对象上进行设置。
（即与#layout 配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类：yout.Absoluteyout.Accordionyout.AnchorLayoutyout.BorderLayoutyout.CardLayoutyout.ColumnLayoutyout.FitLayoutyout.FormLayoutyout.TableLayout3、bufferResize : Boolean/Number当设置为true（100 毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。
如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。
4、activeItem : String/Number组件id 的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。
例如，activeItem: 'item-1'或activeItem: 0 index 0 = 容器集合中的第一项）。
只有某些风格的布局可设置activeItem（如yout.Accordion、yout.CardLayout 和yout.FitLayout），以在某个时刻中显示一项内容。
相关内容请参阅yout.ContainerLayout#activeItem。
ext基础
ExtJS引用 ExtJS引用
到官方网站 /products/extjs/download.php下载必要 的核心包； 解压ext-4.0.7-gpl.zip； 在Html中引入相应文件。 <!—引入ExtJs的样式文件--> <link type="text/css" rel="Stylesheet" href="extjs/res ources/css/ext-all.css" /> <!—引入ExtJs的框架文件--> <script type=“text/javascript” src=“extjs/extall.js”></script>
表单与元素组件
radio Ext.form.field.Radio 单选按钮 textarea Ext.form.field.TextArea 区域文本 框 Text Ext.form. Field.Text 表单文本框 time Ext.form. field.Time时间录入项 trigger Ext.form.field.Trigger 触发录入项 在这些组件中最常用的组件有： grid、panel、treepanel、 form、 window等等
allowBlank: false },{ fieldLabel: 'Last Name', name: 'last', allowBlank: false }], buttons: [{ text: 'Reset', handler: function() { this.up('form').getForm().reset(); } }, { text: 'Submit',
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
参数介绍： 因为前面已经介绍了panel组件，下面只介绍window组件的几个其他 特别的配置参数 //几个前面没有介绍的window自己的配置参数 1.closeAction:枚举值为： close(默认值)，当点击关闭后，关闭window窗口 hide,关闭后，只是hidden窗口 2.closable:true在右上角显示小叉叉的关闭按钮，默认为true 3.constrain：true则强制此window控制在viewport，默认为false 4.modal:true为模式窗口，后面的内容都不能操作，默认为false 5.plain：//true则主体背景透明，false则主体有小差别的背景色，默认 为false //需要显示下show（）方法,默认的窗口是可拖动的，可关闭的，可拖 动大小的 w.show（）
例： //html代码 <div id="win" class="x-hidden"></div> //js代码 var w=new Ext.Window({ el:"win",//主体显示的html元素 width:300, height:200, title:"标题" }); w.show();
实例3:可选的fieldset实例 //因为觉得这个参数特别，特举一例以说明 1.checkboxToggle:true//true则呈现一个带checkbox的fieldset，选中则展 开，否则相反，默认为false 2.checkboxName:string//当上面为true时，作为checkbox的name，方便 表单操作 js核心代码贴出来 //在上一节的基础代码的items里面添加如下配置 { xtype:"fieldset", checkboxToggle:true,//关键参数，其他和以前的一样 checkboxName:"dfdf", title:"选填信息", defaultType:'textfield', width:330, autoHeight:true,//使自适应展开排版
items:[ { fieldLabel:"UserName",//文本框标题 xtype:"textfield",//表单文本框 name:"user", id:"user", width:200 },
{ fieldLabel:"PassWord", xtype:"textfield", name:"pass", id:"pass", width:200 }
实例4.表单验证实例（空验证，密码确认验证，email验证） 我们可以用单独的js写表单验证，但是extjs已经为我们想到 了（自己单独写反而不方便）。 在验证之前，我不得不提两个小知识点： //大家在很多的extjs代码中都看到了这两个，他们都起提示 作用的 Ext.QuickTips.init();//支持tips提示 Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举 值为"qtip","title","under","side",id(元素id) //side方式用的较多，右边出现红色感叹号，鼠标上去 出现错误提示，其他的我就不介绍了，可自行验证 //大家可以分别去掉这两行代码，看效果就会明白他们的作 用，（放在onReady的function（）{}中）
bodyStyle:"padding:5px 5px 0", defaults:{width:150,xtype:"textfield",inputType:"password"} , items:[ {fieldLabel:"不能为空", allowBlank:false,//不允许为空 blankText:"不能为空，请填写",//错误提示信息，默 认为This field is required! id:"blanktest", anchor:"90%" } ] });
你可以修改上面的vtype为以下的几种extjs的vtype默 认支持的验证： //form验证中vtype的默认支持类型 1.alpha //只能输入字母，无法输入其他（如数字， 特殊符号等） 2.alphanum//只能输入字母和数字，无法输入其他 3.email//email验证，要求的格式是 “langsin@” 4.url//url格式验证，要求的格式类似于
4-1.我们看一个最简单的例子：空验证 //空验证的两个参数 1.allowBlank:false//false则不能为空，默认为true 2.blankText:string//当为空时的错误提示信息 js代码为： var form1 = new Ext.form.FormPanel({ width:350, frame:true, renderTo:"form1", labelWidth:80, title:"FormPanel",
items :[{ fieldLabel: '爱好', name: 'hobby', value: '' },{ xtype:"combo", name: 'sex', store:["男","女","保密"],//数据源为一数组 fieldLabel:"性别", emptyText:'请选择性别.' }] }
北风网项目培训
ExtJs版国讯教育通用智能OA办公平台
进阶篇(2)-ExtJs中的Window对象与FormPanel详解
讲师：风舞烟
Ext.Window类 Ext.Window类实例 Ext.FormPanel类 Ext.FormPanel类实例
类Ext.Window 包： Ext 定义的文件 Window.js 类全称： Ext.Window 继承自于： Ext.Panel 说明： 一种专用于程序中的“视窗”（window）的特殊面板 。Window默认下是可拖动的draggable、浮动的窗体。窗体 可以最大化到整个视图、恢复原来的大小，还可以最小化 minimize。 Windows既可关联到Ext.WindowGroup或籍由 Ext.WindowManager来管理， 提供分组（grouping），活动 （activation），置前/置后（to front/back）或其它应用程序 特定的功能。 缺省状态下，窗体都渲染到document.body。要强制 constrain窗体以某个元素为依托就要使用renderTo方法。
添加工具栏 // bbar:[{text:“确定”},{text:“取消 ”,handler:function(){w.close();}}],//bottom部 buttons:[{text:“确定”},{text:“取消 ”,handler:function(){w.close();}}],//footer部 buttonAlign:“center”,//footer部按钮排列位置,这里 是中间 // collapsible:true,//右上角的收缩按钮 其他与Panel一样！
实例1 <!--html代码--> <body> <div id="form1"></div> </body> /js代码 var form1 = new Ext.form.FormPanel({ width:350, frame:true,//圆角和浅蓝色背景 renderTo:"form1",//呈现 title:"FormPanel", bodyStyle:"padding:5px 5px 0",
4-2:用vtype格式进行简单的验证。 在此举邮件验证的例子，重写上面代码的items配置 : items:[ {fieldLabel:"不能为空", vtype:"email",//email格式验证 vtypeText:"不是有效的邮箱地址",//错误提 示信息,默认值我就不说了 id:"blanktest", anchor:"90%" }
]
关于xtype的类型，在extjs的form表单（其他的请参考api）中已经定义的有 ： Form components --------------------------------------form Ext.FormPanel checkbox Ext.form.Checkbox combo boBox datefield Ext.form.DateField field Ext.form.Field fieldset Ext.form.FieldSet hidden Ext.form.Hidden htmleditor Ext.form.HtmlEditor label bel numberfield Ext.form.NumberField radio Ext.form.Radio textarea Ext.form.TextArea textfield Ext.form.TextField timefield Ext.form.TimeField trigger Ext.form.TriggerField