开发学院网页设计 JavaScript ExtJs 备忘录（1）—— Form表单（上） [ 控件使用... 阅读

ExtJs 备忘录（1）—— Form表单（上） [ 控件使用 ]

　2009-09-07 00:00:00　来源：WEB开发网　　　

核心提示： 根据配置文件指定Ext路径来加载ext的css和js文件，将来可方便的升级版本之用，ExtJs 备忘录（1）—— Form表单（上） [ 控件使用 ](3)，仅需修改配置文件即可完成升级，但是需要注意ext并没有完全100%的向下兼容！2.3add.aspxadd页面注意是继承PageBase，

根据配置文件指定Ext路径来加载ext的css和js文件，将来可方便的升级版本之用，仅需修改配置文件即可完成升级，但是需要注意ext并没有完全100%的向下兼容！

2.3　　add.aspx

add页面注意是继承PageBase，由于本文仅使用控件，而cs内代码为空，所以仅贴页面代码：

<%@　Page　Language="C#"　AutoEventWireup="true"　CodeFile="add.aspx.cs"　Inherits="add"　%> <!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　runat="server"> 　　　　<title>表单控件</title> </head> <body> 　　　　<form　id="form1"　runat="server"> <script　type="text/javascript"> 　　　　Ext.onReady(function()　{ 　　　　　　　　　　　　Ext.QuickTips.init(); 　　　　　　　　Ext.form.Field.prototype.msgTarget　=　'side'; 　　　　　　　　var　form1　=　new　Ext.FormPanel({ 　　　　　　　　　　　　layout:　'form', 　　　　　　　　　　　　collapsible:　true, 　　　　　　　　　　　　autoHeight:　true, 　　　　　　　　　　　　frame:　true, 　　　　　　　　　　　　renderTo:　Ext.getBody(), 　　　　　　　　　　　　title:　'<center　style="curor:hand"　onclick="window.location.reload();">表单控件</center>', 　　　　　　　　　　　　style:　'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;', 　　　　　　　　　　　　//设置标签对齐方式　　　　　　　　　　　　labelAlign:　'right', 　　　　　　　　　　　　//设置标签宽　　　　　　　　　　　　labelWidth:　170, 　　　　　　　　　　　　//设置按钮的对齐方式　　　　　　　　　　　　buttonAlign:'center', 　　　　　　　　　　　　//默认元素属性设置　　　　　　　　　　　　defaults:{ 　　　　　　　　　　　　　　　　　　　　width:180 　　　　　　　　　　　　　　　　}, 　　　　　　　　　　　　items:　[{ 　　　　　　　　　　　　　　　　fieldLabel:　'文本框控件', 　　　　　　　　　　　　　　　　name:　'TextBox', 　　　　　　　　　　　　　　　　xtype:　'textfield' 　　　　　　　　　　　　　　　　//,readOnly　:　true　　　　　　　　　　　　//只读　　　　　　　　　　　　　　　　//,emptyText　　　　:'请输入数据'　　　　//为空时显示的文本，注意不是value 　　　　　　　　　　　　},{ 　　　　　　　　　　　　　　　　fieldLabel:　'只允许输入数字' 　　　　　　　　　　　　　　　　,name:'TextBoxNumber' 　　　　　　　　　　　　　　　　,xtype:'numberfield' 　　　　　　　　　　　　　　　　//,allowDecimals:　false　　　　　//　允许小数点　　　　　　　　　　　　　　　　//,allowNegative:　false,　　　　　//　允许负数　　　　　　　　　　　　　　　　//,maxValue:1000　　　　　　//最大值　　　　　　　　　　　　　　　　//,minValue:0　　　　　　　　　　　　//最小值　　　　　　　　　　　　},{ 　　　　　　　　　　　　　　　　fieldLabel:　'下拉框控件', 　　　　　　　　　　　　　　　　name:　'DropDownList', 　　　　　　　　　　　　　　　　xtype:　'combo', 　　　　　　　　　　　　　　　　//本地数据源　　local/remote 　　　　　　　　　　　　　　　　mode:'local', 　　　　　　　　　　　　　　　　//设置为选项的text的字段　　　　　　　　　　　　　　　　displayField:　"Name",　　　　　　　　　　　　　　　　　　　　　　　//设置为选项的value的字段　　　　　　　　　　　　　　　　　valueField:　"Id", 　　　　　　　　　　　　　　　　//是否可以输入，还是只能选择下拉框中的选项　　　　　　　　　　　　　　　　editable　:　false,　　　　　　　　　　　　　　　　　typeAhead:　true, 　　　　　　　　　　　　　　　　//必须选择一项　　　　　　　　　　　　　　　　//forceSelection:　true, 　　　　　　　　　　　　　　　　//输入部分选项内容匹配的时候显示所有的选项　　　　　　　　　　　　　　　　triggerAction:　'all', 　　　　　　　　　　　　　　　　//selectOnFocus:true, 　　　　　　　　　　　　　　　　//数据　　　　　　　　　　　　　　　　store:new　Ext.data.SimpleStore({ 　　　　　　　　　　　　　　　　　　　　fields:　['Id',　'Name'], 　　　　　　　　　　　　　　　　　　　　data:　[　　[1,'男'],[0,'女']　] 　　　　　　　　　　　　　　　　}) 　　　　　　　　　　　　},　{ 　　　　　　　　　　　　　　　　fieldLabel:　'日历控件', 　　　　　　　　　　　　　　　　xtype:　'datefield', 　　　　　　　　　　　　　　　　name:　'DateControl', 　　　　　　　　　　　　　　　　format:　"Y-m-d", 　　　　　　　　　　　　　　　　editable　:　false 　　　　　　　　　　　　　　　　//,　默认当前日期　　　　　　　　　　　　　　　　//value:new　Date().dateFormat('Y-m-d') 　　　　　　　　　　　　},{ 　　　　　　　　　　　　　　　　fieldLabel:　'单选控件' 　　　　　　　　　　　　　　　　,xtype:'radiogroup' 　　　　　　　　　　　　　　　　,name:'Radios' 　　　　　　　　　　　　　　　　,items:[ 　　　　　　　　　　　　　　　　　　　　{name　:　'RadioItems',boxLabel:'选我',inputValue:'1',checked:true}, 　　　　　　　　　　　　　　　　　　　　{name　:　'RadioItems',boxLabel:'选我吧',inputValue:'0'} 　　　　　　　　　　　　　　　　] 　　　　　　　　　　　　},{ 　　　　　　　　　　　　　　　　fieldLabel:　'复选控件' 　　　　　　　　　　　　　　　　,xtype:'checkboxgroup' 　　　　　　　　　　　　　　　　,name:'Checkboxs' 　　　　　　　　　　　　　　　　//columns属性表示用2行来显示数据　　　　　　　　　　　　　　　　,columns:2 　　　　　　　　　　　　　　　　,items:[ 　　　　　　　　　　　　　　　　　　　　{name　:　'CheckboxItems',boxLabel:'香蕉',inputValue:'A'}, 　　　　　　　　　　　　　　　　　　　　{name　:　'CheckboxItems',boxLabel:'苹果',inputValue:'B'}, 　　　　　　　　　　　　　　　　　　　　{name　:　'CheckboxItems',boxLabel:'橘子',inputValue:'C'}, 　　　　　　　　　　　　　　　　　　　　{name　:　'CheckboxItems',boxLabel:'桃子',inputValue:'D'} 　　　　　　　　　　　　　　　　] 　　　　　　　　　　　　},{ 　　　　　　　　　　　　　　　　fieldLabel:　'文本域控件' 　　　　　　　　　　　　　　　　,xtype:'textarea' 　　　　　　　　　　　　　　　　,value:'可以输好多字！' 　　　　　　　　　　　　　　　　,height:50 　　　　　　　　　　　　},{ 　　　　　　　　　　　　　　　　fieldLabel:　'时间控件' 　　　　　　　　　　　　　　　　,xtype:'timefield' 　　　　　　　　　　　　　　　　//格式化输出　默认为　"g:i　A" 　　　　　　　　　　　　　　　　//"g:ia|g:iA|g:i　a|g:i　A|h:i|g:i|H:i|ga|ha|gA|h　a|g　a|g　A|gi|hi|gia|hia|g|H" 　　　　　　　　　　　　　　　　,format:'H:i' 　　　　　　　　　　　　　　　　//时间间隔(分钟) 　　　　　　　　　　　　　　　　,increment:　60 　　　　　　　　　　　　},{ 　　　　　　　　　　　　　　　　fieldLabel:　'标签页' 　　　　　　　　　　　　　　　　,xtype:'fieldset' 　　　　　　　　　　　　　　　　,title:　'标签页' 　　　　　　　　　　　　　　　　,autoHeight:true 　　　　　　　　　　　　　　　　,items　:[{ 　　　　　　　　　　　　　　　　　　　　xtype:　'panel', 　　　　　　　　　　　　　　　　　　　　title:　'标签页中的面板', 　　　　　　　　　　　　　　　　　　　　frame:　true, 　　　　　　　　　　　　　　　　　　　　height:　50 　　　　　　　　　　　　　　　　}] 　　　　　　　　　　　　},{ 　　　　　　　　　　　　　　　　fieldLabel:　'在线编辑器' 　　　　　　　　　　　　　　　　,xtype:'htmleditor' 　　　　　　　　　　　　　　　　,width:260 　　　　　　　　　　　　　　　　,height:100 　　　　　　　　　　　　　　　　//以下为默认选项，其他请参照源代码　　　　　　　　　　　　　　　　//,enableColors:　false 　　　　　　　　　　　　　　　　//,enableFormat　:　true 　　　　　　　　　　　　　　　　//,enableFontSize　:　true 　　　　　　　　　　　　　　　　//,enableAlignments　:　true 　　　　　　　　　　　　　　　　//,enableLists　:　true 　　　　　　　　　　　　　　　　//,enableSourceEdit　:　true 　　　　　　　　　　　　　　　　//,enableLinks　:　true 　　　　　　　　　　　　　　　　//,enableFont　:　true 　　　　　　　　　　　　}], 　　　　　　　　　　　　buttons:　[{ 　　　　　　　　　　　　　　　　text:　"保　存" 　　　　　　　　　　　　　　　　,handler:function(){ 　　　　　　　　　　　　　　　　　　　　MsgInfo('保存'); 　　　　　　　　　　　　　　　　} 　　　　　　　　　　　　},　{ 　　　　　　　　　　　　　　　　text:　"取　消" 　　　　　　　　　　　　　　　　,handler:function(){ 　　　　　　　　　　　　　　　　　　　　form1.form.reset(); 　　　　　　　　　　　　　　　　} 　　　　　　　　　　　　}] 　　　　　　　　}); 　　　　　　　　function　MsgInfo(str_msg) 　　　　　　　　{ 　　　　　　　　　　　　Ext.MessageBox.show({ 　　　　　　　　　　　　　　　　title:　'提示', 　　　　　　　　　　　　　　　　msg:　str_msg, 　　　　　　　　　　　　　　　　width:　400, 　　　　　　　　　　　　　　　　icon:Ext.MessageBox.INFO, 　　　　　　　　　　　　　　　　buttons:　Ext.MessageBox.OK 　　　　　　　　　　　　}); 　　　　　　　　} 　　　　}); 　　　　</script> 　　　　</form> </body> </html>

注意这里并没有引入Ext相关的js、css文件，这个都在PageBase中处理加载了，这样只要需要用Ext的页面继承PageBase即可，也方便大家将来升级ext，只需要改下配置文件即可。

三、对ExtJS的一点看法

就是上面那段代码得以让效果图中的那副美图与大家见面，虽然对于美工来讲并非难事，可对于非美工的我是极尽享受的，且兼容我当前电脑中三种浏览器IE6、Firefox3.5.2、谷歌浏览器2.0。

在使用IHttpHandler做权限控制中曾经提到过用PageBase中做权限控制，在ExtJs应用中也能很好的结合起来使用，节省了代码、解决了每次引用以及按顺序引用等问题，且便于版本迁移。

关于ExtJS慢这个问题。首先从适用性方面，如果你对于性能要求很高，基本上可以放弃，这本身就是富客户的应用，适合一些内部的管理系统、后台，对没有美工的小公司有很大的帮助；性能方面，大家可以google下关键字：“extjs 性能优化”，有相关的文件来建议你改进它的性能，从ext资源文件加载方面，可以使用客户端缓存技术，比如你可以把这个文件放到登录的页面里面，然后客户端缓存起来，具体可以参照js客户端缓存；还需要特别注意的是需要你在代码中指定Ext.BLANK_IMAGE_URL，因为他默认会去extjs的官方网站下载s.gif图片，这里我把已经它加在了ext-lang-zh_CN.js文件里。

编缉推荐阅读以下文章