Ext-FieldSet组件说明
ext课件大体介绍
triggerAction
String(query、all默认query)
点击下列按钮时数据显示方式
listeWidth
Number
下列列表的宽度
常用事件
单击事件click(before) 双击事件dbclick(before) 右击事件contextmenu 加载事件load(before) 选择事件select(before) 值改变事件change(before) 失去焦点事件blur 获得焦点事件focus 键盘事件keydown、keyup 、keypress
border cls frame items
Boolean(默认false)
Boolean(默认true) string Boolean(默认false) Object/Array
是否自适应宽度
是否显示边框 引用的样式 是否显示背景色 容器子组件
listeners
renderTo title
Object
extjs入门重要的容器panel标准容器formpanel表单容器gridpanel列表容器treepanel树容器tabpanel标签容器重要的表单组件textfield文本框textarea多行文本checkbox多选框combobox下拉框compositefield组合组件datefield日期框datetimefield日期时间框displayfield显示框radio单选框重要的布局form表单布局formtable表单布局column列布局panel重要属性名称类型说明autoheightboolean默认false是否自适应高度autoscrollboolean默认false是否显示滚动条autowidthboolean默认false是否自适应宽度borderboolean默认true是否显示边框clsstring引用的样式frameboolean默认false是否显示背景色itemsobjectarray容器子组件listenersobject事件监听rendertomixed注入到对应的dom节点中titlestring标题formpanel重要属性名称类型说明autoheightboolean默认false是否自适应高度autowidthboolean默认false是否自适应宽度buttonalignstringleftcenterright默认right按钮对齐方式buttonsarray按钮数组clsstring引用的样式collapsibleboolean默认false容器是否可收缩defauletypestring默认组件类型frameboolean默认false是否显示背景色itemsobjectarray容器子组件labelalignstringlefttopright默认left标签对齐方式labelwidthnumber标签宽度layoutstring布局方式layoutconfigobject布局配置listenersobject事件监听titlestring标题gridpanel常用属性名称类型说明autoheightboolean默认false是否自适应高度autowidthboolean默认false是否自适应宽度clsstring引用的样式columnlineboolean默认false是否显示表格竖线columnsarray定义列表每列标题listenersob
ext 教程
序言ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力。
ExtJS是一个用javascript编写,与后台技术无关的前端ajax框架。
因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
最近我们在几个应用都使用到了ExtJS,对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造,使得整个系统在用户体验上有了非常大的变化。
本教程记录了前段时间本人学习ExtJS的一些心得及小结,希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。
教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等,是一个非常适合新手的ExtJS入门教程。
本教程主要是针对ExtJS2.0进行介绍,全部代码、截图等都是基于ExtJS2.0。
在学习了本教程后,可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码,这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统,系统源码整体质量比较高,通过学习这套源代码相邻一定能提高您ExtJS的综合水平。
本教程比较适合ExtJS的新手作为入门教程及手册使用,并在我的博客/blog/lengyu/上进行发布;应一些朋友的要求,根据本教程的写作思路,我还编写了比本教程更为详细的《ExtJS实用开发指南》,包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍,与服务器端集成及一个完整的示例应用系统介绍等内容,适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。
该《指南》当前在作为VIP文档发布,供该站的VIP用户阅读及下载。
凡是购买了《ExtJS 实用开发指南》文档的VIP用户,都可以在该指南印刷版出版后均会免费得到相应的印刷版本。
最后,希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们,让我们一起共同学习、共同进步,下面让我们一起进入精彩的ExtJS世界吧。
EXT各个控件属性(7)
1:按钮的禁用于否:属性: disabled : true, 初始化时为禁用Ext.getCmp('updateb').disable(); //禁用按钮Ext.getCmp('deleteb').enable(); //恢复可用2:面板Ext.getCmp('rulepanel').setVisible(true); //使面板可见Ext.getCmp('rulepanel').setVisible(false); //使面板不可见Ext.getCmp('rulepanel').collapse(true); //使rulepanel收缩Ext.getCmp('rulepanel').expand(true); //使rulepanel展开3:checkbox属性:inputValue 类似其valueview plaincopy to clipboardprint?var popSelect = Ext.getCmp('panel3').findByType('checkbox'); for(var i=0,j=0;i<popSelect.length;i++){if(popSelect[i].checked){pop[j++] = popSelect[i].inputValue;if(popSelect[i].inputValue=='103'){selectorder = Ext.getCmp('ruleid').getValue();}}}var popSelect = Ext.getCmp('panel3').findByType('checkbox');for(var i=0,j=0;i<popSelect.length;i++){if(popSelect[i].checked){pop[j++] = popSelect[i].inputValue;if(popSelect[i].inputValue=='103'){selectorder = Ext.getCmp('ruleid').getValue();}}}body : Ext.Element它是指向panel的body的Element引用。
extjs基础篇
ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA也即富客户端的AJAX应用ExtJS是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。
因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs最开始基于YUI技术,由开发人员Jack Slocum开发,通过参考Java Swing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。
朋友问我,Ext怎么学习,我记得自己学的时候纯纯因为它的简单和视觉效果特别好,因为喜欢了才有努力的坚持不懈的激情.有朋友说能否写点简单的示例方便入门,我是觉得自己写的都是很浅陋东西,实在不知道怎么简单了,昨天晚上想了许久,觉得自己还是无比的粗浅,但依然有人说看不懂,我想可能是言语没有说清楚,或者你在等到天上掉馅饼吧.因为,我觉得开始学习就是不断的模仿,只要知道它的大致概念,在自己的项目中不断的接触,一天一天就会成长起来,建议最好根据自己的学习进度写个小网站,将所学的知识融会贯通一下,就像我写了好几个Ext的网站,虽然暂时都没有发布出去,但自己经常看看也是对自己的工作的激励吧.接下来一段日子,尽量写一些Ext2.2所有的对象的最简单的用法.如果能够坚持,以后会写一个对应的提高系列.下面就开始Ext之旅吧Ext是什么?答曰:Ext是一个用jscript(javascript)所写的一个ajax框架(我想大家都知道什么是ajax 了吧,假想你已经知道,那我就不说了).而javascript也是更知道它的概念了,就更不用说了吧,好,那就也不说了.什么是Ext呢,结合javascript和ajax,我想你闭眼猜都能够猜出它的功能了吧.那就用自己的语言说下什么是Ext吧,呵呵,思考真的很重要的.学习的重要环节就是要不断的自己总结,总结就来自自己的思考.Ext有多好呢?答曰:仁者见仁, 自己好好看看吧,它的绚丽多姿是无法用语言描述的,你可能会很惊叹,但我还要告诉你,这个并没有把Ext的所有的功能都罗列出来,仅仅是一部分,有更多的有太多的等你去发现,星哥说了:太阳已经落山了,时间不等人滴.Ext难吗?答曰:太多的人问这个问题,就像我开始学习java一样,我问了好多好多人,都说难,让我学习的信心到最后都剩的没有一点儿了,于是学了当时身边谁也不懂的.呵呵.如果有人问我这个问题,我告诉你,真的很简单,不是说我会了才这么说,其实,我想说的是:大家玩游戏基本上都是无师自通的吧,现在明白了吧,如果你有玩游戏的那份精神和斗志,靠,天下事难难难者亦易易易也.在哪里下载Ext呢?答曰:好,你能够这么问,看来我做说客还是可以的(信心指数又增加了),因为我是从2.0版本,2.1版本,到现在的2.2版本,我真的说不出来他们到底有何具体的差别,但明显的看见它明显壮大了,不仅仅是体积,更是它的力量. 官方的版本,有各个版本的,我建议学习最新的吧.Ext有核心吗?答曰:看来只有我才能够问这个问题呀,当年比干无心而死,看来框架也是一样的,没有核心怎么可以呢.我想在javascript中大家也都知道什么是类了吧,简单的说就是一个函数就是一个类,类里面还可以有很多的类,可以无限嵌套.而Ext就是有很多的类库组成,也就是有很多的函数组成,只是现在天上飞的水里游的都成了对象了,所以很多技术也都用对象的语言来描述.Ext就是主要有哪些类库组成呢?有人说肯定有API层,是的,有的,有些人总是喜欢称底层是API(API是什么意思,全称Application Programming Interface 应用编程接口),喜欢就喜欢吧,我管不着.但Ext说了,要改变这样的称呼,于是Ext称之为Core,为什么呢?因为Ext的底层在Core这个文件夹里面.core是什么意思呢?core[kC:]n.果核, 中心, 核心,我觉得称底层为Core确实不错,而且大写的CORE还有一个意思:CORE=Congress of Racial Equality 争取种族平等大会.感觉Ext的作者Jack Slocum是具有很浓烈的浪漫主义情怀的追求完美的一个程序员. 说到Core了:core对Ext的DoM操作,事件处理以及所有的直接在页面上可以展示的和不可以展示的组件等提供了基础的功能.刚刚提到可显示的控件也叫组件,我们在程序中可以直接通过这些控件来实现非常友好,并且交互性也很好的应用.特别一提的是在那些不可见的组件中,有一个utils类,该类提供了很多的很实用的功能,可以方便实现对接收和发送的数据进行各种操作,实在是Ext框架不可或缺的一部分.如何介绍Ext的组件呢?答曰:这个问题我确实想了很长时间,因为像很多软件的帮助教程一样,它们总是把该软件的所有功能都罗列出来,然后再逐个详解,甚至很多功能可能你都从来都不需要,但你并不知道自己是否需要,就像最近在学习flash,总感到自己有茫然不知所措的感觉,学习的态度都会转变.但,也不能够说人家的帮助教程不好呀,毕竟是追求完整性和可用性方面,每个人的见解并不一样. 好吧,我下定决心了.先简单把组件说下,然后对这些组件再详细解说加示例,而且每个示例都追求可用和简单,将来再写一个深入的就能够达到完整性,倒不是说一定要追求完整,而是,如果你仅仅写了入门,却没有提高的版本,感觉自己并没有把事情做好做完整,毕竟人人都希望有始有终呀.毕竟自己还想早点介绍点关于Flex的故事呢,唉,总是没有时间. Ext的组件有哪些呢?答曰:Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. 下面就是这些可以使用了控件的列表了,我直接从它的帮助文档复制过来,并同时加上了它的英文原文,因为每次看到这段我总是能够想起什么,呵呵:Ext组件主要包括一些常用组件,如表单组件,数据组件,导航组件,相信大家看名称就知道什么意思了.xtype Class基本组件---------------------------------------box Ext.BoxComponentbutton Ext.Buttoncolorpalette Ext.ColorPalettecomponent ponentcontainer Ext.Containercycle Ext.CycleButtondataview Ext.DataViewdatepicker Ext.DatePickereditor Ext.Editoreditorgrid Ext.grid.EditorGridPanel grid Ext.grid.GridPanelpaging Ext.PagingToolbarpanel Ext.Panelprogress Ext.ProgressBar propertygrid Ext.grid.PropertyGrid slider Ext.Slidersplitbutton Ext.SplitButtonstatusbar Ext.StatusBartabpanel Ext.T abPaneltreepanel Ext.tree.TreePanel viewport Ext.Viewportwindow Ext.Window导航组件--------------------------------------- toolbar Ext.Toolbartbbutton Ext.Toolbar.Buttontbfill Ext.Toolbar.Filltbitem Ext.Toolbar.Item tbseparator Ext.Toolbar.Separator tbspacer Ext.Toolbar.Spacer tbsplit Ext.Toolbar.SplitButton tbtext Ext.Toolbar.TextItem窗体组件--------------------------------------- form Ext.FormPanel checkbox Ext.form.Checkbox combo boBox datefield Ext.form.DateFieldfield Ext.form.Fieldfieldset Ext.form.FieldSethidden Ext.form.Hidden htmleditor Ext.form.HtmlEditor label bel numberfield Ext.form.NumberFieldradio Ext.form.Radiotextarea Ext.form.TextAreatextfield Ext.form.TextFieldtimefield Ext.form.TimeFieldtrigger Ext.form.TriggerFieldExt的每个组件都是有一个指定的Xtype属性值,通过该值就可以得到该组件的类型,同时也可以根据该组件来定义一个组件例如:{xtype:"button",id:"btnEnter",text:"确定"} //这就是定义了一个按钮的组件. {xtype:"field",id:"txtName"} //这就是定义了一个输入框的组件. {xtype:"field",id:"txtPwd",inputType:"password"} //这就是定义了一个密码框的组件.当然你可以不用xtype 比如:var btnEnter = new Ext.Button({id:"btnEnter",text:"确定"} );//这就是定义了一个按钮的组件.var txtName = new Ext.form.Textfield({id:"txtName"} );//这就是定义了一个输入框的组件.var txtPwd = newExt.form.Textfield({id:"txtPwd",inputType:"password"} );//这就是定义了一个密码框的组件.是不是很简单,在下面会解说具体的示例,包括它的基本的语法结构,同时,你需要明确,这和你在javascript里面的用法不会有不同的地方,只是有些方法Ext已经给我们封装好了,我们只要有拿来主义的精神就可以.特别一说的是:Ext的一些很实用的类都是全局的,无须new了,直接用就可以.在下节会介绍一些Ext的很好的很实用的也很简单就能够使用的Util类.精美的消息框截图了感觉就像写书一样,好难,不过我有玩游戏的精神,难亦易也.如果你看到了上文,那么我想你手上现在应该有Ext2.2的文件了吧.这里再说一次,所有的程序除非有说明,则全部是以2008 c#.net为前提,虽然Ext不在乎你使用什么语言,但我只会.net.好,首先建立一个新的网站吧,然后把你下载的Ext2.2文件复制到网站的任何一个目录里面,在页面设置正确的路径即可.如下图所示:需要说明一点,以后所有的程序都不再罗列整个页面,只写出<body></body>之间的语句<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns="" ><head runat="server"><title>无标题页</title>//下面是整个Ext框架所必备的文件,除了中文映射老外不需要外<link rel="Stylesheet" type="text/css"href="../ExtJS/resources/css/ext-all.css" />//样式文件<script type="text/javascript"src="../ExtJS/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../ExtJS/ext-all.js"></script><script type="text/javascript"src="../ExtJS/ext-lang-zh_CN.js"></script> //中文映射</head><%--这是一个的页面头部分.在里面输入正确访问Ext的路径.顺序更要注意哦,而且绝对不可以颠倒.有了上面的正确的引用后,我们就要开始实战演练了.好吧,我们也是从hello世界开始吧!--%><body><form id="form1" runat="server"><div><%--既然Ext是基于javascript的,所以我们要把Ext的东东包裹在javascript里面--%><script type="text/javascript">//定义一个函数,在里面定义一个弹出按钮,当网页上出现弹出按钮后,点击就会出现hello世界了.function ready(){// 下面openMs就是出发事件后所执行的函数var openMsg = function(){//alert("good");比较下ext的弹出消息框是多么多么的令人狂喜Ext.Msg.alert("提示消息,可以自定义","hello世界-hello世界-hello世界-hello世界");};//定义Ext的按钮var 弹出按钮= new Ext.Button({id:"btnOpen", //定义按钮的IDtext:"弹出按钮", //定义按钮的标题handler:openMsg, //定义按钮出发的事件,handler后面直接写函数的名称openMsg//也可以写成下面这样,本质是一样的,效果也是一样的//handler:function(){Ext.Msg.alert("提示消息,可以自定义","hello世界-hello世界-hello世界-hello世界"); },renderTo:document.body//将弹出按钮渲染到窗体上});}Ext.onReady(ready);//里面的参数就是上面定义的函数//onReady是使用Ext的入口,只有在上面所说的Ext框架全部加载完成后,才会执行Ext.onReady里面所包含的函数,就是说具体执行什么函数,由Ext的onReady方法指定.//当然onReady这个Ext方法总共有三个参数,为了力求简单,这里先使用一个参数,在提高篇里面则会详细讲解.</script></div></form></body></html>上面是一个完整的网页,路径正确后,就可以直接在页面显示出来.精美的消息框截图了另外,提一句,Ext的所有消息框都封装在Ext.Msg类里面.【原】基础篇:第三篇,常用的一些Ext方法在开始编写每个Ext的组件用法之前,先对自己在工作中常用的一些Ext方法总结出来.只罗列一些经常用到的,偶尔也会用到的仅仅说明下.Ext框架把一些我们平时在工作经常遇到的情况封装成了方法,有兴趣的朋友读读它的源代码,会发现里面封装的语句和我们平时写的没有什么区别.提一句,它的源代码读起来真的是一种享受,虽然有很多地方我还看不懂,但,我觉得它的源代码确实是学习javascript的最好的教程.ext-all-debug.js 和ext-core-debug.js这两个文件是调试文件,非常清晰,假如我有2个月的时间休假,我是愿意把时间全部花在上面的.第一想说的方法想来想去,觉得还是再说一次Ext类的onReady()方法吧,它的作用就是指定当Ext类的全部框架全部加载完成后执行什么函数.具体执行什么函数就是它的参数.第一:Ext.getCmp("对象ID"):该方法只有一个参数,就是组件的ID说明:在执行下面的语句后,点击确定会弹出定义的Ext按钮的一些属性值,同时将原来的值由"确定"更改为"取消"<body><form id="form1" runat="server"><div><script type="text/javascript">function ready(){//这个函数的主要作用有两个://一个获取定义的buttonName按钮。
ExtJs控件的定义及使用方法(二)
ExtJs控件的定义及使用方法(二)第三种控件:单击按钮,弹出窗口,选择数据,将数据传回按钮控件,然后执行操作,例如将传回的数据添加到gridPanel中-------------------------------------------1.调用控件界面Ext.ns("ff.cd.cd");/*** 综合组设置信息明细设置* @param {} config*/ff.cd.cd.showgoods = function(config) {config = Ext.apply({prefix : "showgoods"}, config);this.init = function() {// 判断是否存在此对象,如果不存在则新建,否则直接返回var _showpanel = Ext.getCmp(this.genId("main"));if (_showpanel) {return _showpanel;}var _this = this;this.setRecord = function(record){_this.record = record;if(record){mainform.form.loadRecord(this.record);Ext.getCmp(_this.genId('rate')).setValue(record.get("rate")*10 0);Ext.getCmp(_this.genId('merchrate')).setValue(record.get("m erchrate")*100);}}/*** 这是一个回调函数,将cdgoods中的数据回调过来,方便以后做处理* @param {Object} ss*/this.fn_query=function(ss){var mm="check";alert(ss+'将数据添加到grid中');}/***调用控件,调用的方法1*/var _merchcp=showgoodsButton({id:'',fn:this.fn_query});/*** 对弹出窗体做弹出前的判断*/this.fn_msg=function(){Ext.Msg.confirm('提示', "是否打开弹出窗口",function(btn){ if(btn=='yes'){_merchcp.pop();}});}/*/*** 单击按钮执行的操作*/_merchcp.onClick = function(){_this.fn_msg();};*/this.btn_save=function(){//var _merchcp=showgoodsButton();var m=_merchcp.getValues();}panel=new ff.cd.cd.cdgoods();//商户清算合同设置var mainform = new Ext.form.FormPanel({title: "商品控件",id: this.genId("main"),closable: true,// bodyStyle: 'padding:5px',autoHeight: false,autoWidth: false,autoScroll: true,loadMask : true,frame: true,// layout:'fit',width:480,height:180,labelAlign : 'right',buttonAlign :'center',items: [{xtype:'panel',layout:'table',buttonAlign:'center',layoutConfig: {// The total column count must be specified here columns: 4},items:[{xtype:'label',text:"商品:"},{colspan:3,items:[_merchcp],},{colspan:4,items:[{xtype : 'textfield',id : this.genId("pid"), name : 'pid',hidden:true}]},{colspan:4,items:[{xtype : 'textfield',id : this.genId("id"), name : 'id',hidden:true}]},{colspan:4,items:[{xtype : 'textfield',id : this.genId("corpcode"), name : 'corpcode', hidden:true}]},{colspan:4,items:[{xtype : 'textfield',id : this.genId("corpid"), name : 'corpid', hidden:true}]}],buttons:[{//调用控件的方法2:调用封装控件searchgoodsbutton xtype:'searchgoodsbutton',id:this.genId('btn_exit'),icon:"image/exit.png",width:100,text:"商品控件1",windFn :this.fn_query,handler:this.btn_exit},{////调用控件的方法3:直接调用控件searchbuttonxtype:'searchbutton',id:this.genId('btn_exit'),//icon:"image/exit.png",windWidth : 600,windHeight : 400,text:"商品控件2",windItem : panel,windArray:panel.getArray,windFn :this.fn_query,handler:this.btn_exit}]}]});return mainform;}ff.cd.cd.showgoods.superclass.constructor.call(this, config); }Ext.extend(ff.cd.cd.showgoods, Ext.sydev.Sheet);---------------------------------------------------------------------------------------------------------------具体代码如下:代码里都有注释----------------------------------------------------showgoodsButton函数/*** 单位信息模式窗体查询** @return {}*/showgoodsButton=function(config) {/*** 这里传递的参数是用来接收调用该控件页面的配置信息的,* 所以名字不可以更改,并且页面调用的配置参数名称必须与这里保持一致* @param {Object} id* @return {TypeName}*/this.id=config.id;/*** 指定回调函数* @param {Object} id* @return {TypeName}*/this.fn=config.fn;/*** 调用指定回调函数,因为参数名与参数值不能相同(windFn : windFn 不可以),所以这样定义* @param {Object} id* @return {TypeName}*/this.windFn=config.windFn;if(this.windFn){fn=this.windFn;}if(id == undefined || id == null){id = Ext.id();}//var panel = doWindow;panel=new ff.cd.cd.cdgoods();return new Ext.custom.SearchButton({columnWidth: .7,xtype : "searchbutton",id : id,name:"corpname",width : 70,text:'商品控件',windItem : panel,windArray:panel.getArray,windWidth : 600,windHeight : 400,anchor : '90%',windFn : fn});}Ext.extend(showgoodsButton,Ext.custom.SearchButton);Ext.reg("searchgoodsbutton",showgoodsButton);------------------------------------------------------searchText.js//*** 需求:点击按钮,弹出一个窗口,选择记录,返回给前台这些数据,在弹出窗口中this.WindArray方法是必须的.* this.getGridValues是一个回调函数,用来与调用此窗口的页面进行交互* config:配置参数,接受调用此控件的对象传递过来的参数**function showgoodsButton(id,fn) {* if(id == undefined || id == null){* id = Ext.id();* }* var panel = new ff.cd.cd.cdgoods({typeAll : 'all'});* return new Ext.custom.SearchButton({* columnWidth: .7,* xtype : "searchbutton",* id : id,* name:"corpname",* width : 200,* windItem : panel,* windArray:panel.getArray,* windWidth : 600,* windHeight : 400,* anchor : '90%',* windFn : fn** });** }* 其他页面调用上面的过程,并传递一个fn方法进来,接受返回的数据*/Ext.ns("Ext.custom");Ext.custom.SearchButton = function(config){//定义按钮的显示样式this.triggerClass = 'x-form-search-trigger',this.defaultAutoCreate = {tag: "input", type: "button", size: "10", autocomplete: "off"},/***********************定义窗体的属性**************************//*** 窗体的宽* @type String*/this.windWidth = 200;/*** 窗体的高* @type String*/this.windHeight = 300;/*** 窗体的标题* @type String*/this.windTitle = null;/*** 是否把高设为自动* @type Boolean*/this.windAutoHeight = false;/*** 是否将宽设为自动* @type Boolean*/this.windAutoWidth = false;/*** 是否显示滚动条* @type Boolean*/this.windAutoScroll = true;/*** 传到window中的内容* @type Object*/this.windItem = null;/*** 从窗体上传过来的值* @type Object*/this.windArray = null;/*** 从窗体返回到文本框中的值,是否自定义格式,false:表示默认以逗号隔开,否则自定义格式并返回* @type Boolean*/this.isDefindValue = false;/**** @memberOf {TypeName}* @return {TypeName}*/this.windFn=null;/*******************定义属性**************************************//*** 只读属性*/this.readOnly = true;/*** 实际字段,也就说我们常说的隐藏值,一般由系统内部使用,或者用户输入的字段名称* @type:String*/this.valueField = null;/*** 显示字段,一般该字段值从系统里查出来并显示在控件里,用户易懂* @type String*/this.displayField = null;/*** 实际值* @type String*/this.values = null;/*** 显示值* @type String*/this.dispalyValue = null;/*** 根据valueField查出来的json数据保存在该字段里面* @type json*/this.jsonData = null;/**** @type 正则表达式*/this.regex = null;/*** 该类型为输入数据的类型,具体的参数如下:* 0-任意字符;1-数字;2-正数;3-负数;4-非0;5-字母;6-小写字母;7-大写字母;8:中文字;9:非中文字;其他。
EXT表单组件常见属性介绍
EXT表单组件常见属性介绍(一)文章分类:Web前端1、Ext.form.Action配置项:success:执行成功后回调的函数,包括两个参数:form和actionfailure:执行失败后回调的函数,包括两个参数:form和actionmethod:表单的提交方式,有效值包括GET、POSTparams:传递到请求中的参数url:动作提交的路径waitMsg:动作执行时显示的等待信息属性:Action.CLIENT_INVALID:客户端验证错误Action.CONNECT_FAILURE:通信错误Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回Action.SERVER_INVALID:服务端验证错误failureType:错误类型result:包含布尔类型的success属性和其他属性,如{success: true, msg: 'ok'}type:动作类型,可选值有submit和loadExt.form.Action.Submit:返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success属性和一个data 属性2、Ext.form.BasicForm配置项:baseParams:传递到请求中的参数method:表单的提交方式,有效值包括GET、POSTurl:表单默认的提交路径fileUpload:表单是否进行文件上传timeout:表单动作的超时时间,默认为30秒trackResetOnLoad:是否在表单初次创建时清楚数据方法:doAction( String/Object actionName, [Object options] ):执行一个预订的动作,可用选项包括:url:动作提交的路径method:表单的提交方式,有效值包括GET、POSTparams:传递到请求中的参数headers:success:执行成功后回调的函数,包括两个参数:form和actionfailure:执行失败后回调的函数,包括两个参数:form和actionclientValidation:是否客户端验证clearInvalid():清除表单中所有的无效验证信息findField( String id ):查找表单字段getValues( [Boolean asString] ):isDirty():表单数据是否被更改过isValid():客户端验证是否成功load( Object options ):执行表单读取动作loadRecord( Record record ):从一个数据记录中读取数据到表单中markInvalid( Array/Object errors ):成批设置表单字段为验证无效reset():重置表单setValues( Array/Object values ):成批设置表单字段值submit( Object options ):执行表单提交动作updateRecord( Record record ):持久化表单数据到记录集中3、Ext.form.FormPanel配置项:items:一个元素或元素数组buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为center labelWidth:表单标签的宽度labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为leftlabelSeparator:字段标签与字段之间的分隔符,默认为':'minButtonWidth:按钮的最小宽度,默认为75方法:getForm() : Ext.form.BasicFormload( Object options )startMonitoring()stopMonitoring()4、Ext.form.Field配置项:name:字段名value:字段的初始化值disabled:字段是否不可用,默认为falsefieldLabel:字段标签说明hideLabel:隐藏字段标签,默认为falselabelSeparator:字段标签与字段之间的分隔符,默认为':'labelStyle:字段标签样式inputType:默认为textinvalidClass:默认为x-form-invalidinvalidText:字段非法文本提示msgTarget:错误信息显示的位置,默认为qtipqtip:显示一个浮动的提示信息title:显示一个浏览器的浮动提示信息under:在字段下方显示一个提示信息side:在字段右边显示一个提示信息readOnly:字段是否只读,默认为falsevalidateOnBlur:字段在失去焦点时被验证,默认为true 方法:clearInvalid():getRawValue()setRawValue( Mixed value )getValue()setValue( Mixed value )isDirty():字段值在装载后是否被修改过isValid( Boolean preventMark ):当前字段值是否合法markInvalid( [String msg] )validate()reset()EXT表单组件常见属性介绍(二)文章分类:Web前端1、Ext.form.Hidden2、bel配置项:html:text:3、Ext.form.TextField配置项:allowBlank:是否允许为空,默认为trueblankText:空验证失败后显示的提示信息emptyText:在一个空字段中默认显示的信息grow:字段是否自动伸展和收缩,默认为falsegrowMin:收缩的最小宽度growMax:伸展的最大宽度inputType:字段类型:默认为textmaskRe:用于过滤不匹配字符输入的正则表达式maxLength:字段允许输入的最大长度maxLengthText:最大长度验证失败后显示的提示信息minLength:字段允许输入的最小长度minLengthText:最小长度验证失败后显示的提示信息regex:正则表达式regexText:正则表达式验证失败后显示的提示信息vtype:验证类型的名字alpha:限制只能输入字母alphanum:限制只能输入字母和数字emailurlvtypeText:验证失败时的提示信息validator:自定义验证函数selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false4、Ext.form.TextArea配置项:preventScrollbars:是否禁止出现滚动条,默认为false5、Ext.form.NumberField配置项:allowDecimals:是否允许输入小数,默认为trueallowNegative:是否允许输入负数,默认为truebaseChars:输入的有效数字集合,默认为'0123456789'decimalPrecision:数字的精度,默认保留小数点后2位decimalSeparator:十进制分隔符,默认为'.'maxValue:允许输入的最大数值maxText:超过最大值之后的提示信息minValue:允许输入的最小数值minText:超过最小值之后的提示信息nanText:输入非有效数值之后的提示信息6、Ext.form.Checkbox配置项:boxLabel:复选框的文字描述checked:复选框是否被选择,默认为falsehandler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checked inputValue:方法:getValue():返回复选框的checked状态setValue( Boolean/String checked ):7、Ext.form.CheckboxGroup配置项:allowBlank:是否允许不选择,默认为trueblankText:columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)items:对象数组vertical:是否垂直方向显示对象,默认为false8、Ext.form.Radio方法:getGroupValue():setValue( value {String/Boolean} ):9、Ext.form.RadioGroup配置项:allowBlank:blankText:10、boBox配置项:displayField:被显示在下拉框中的字段名editable:是否可编辑,默认为trueforceSelection:输入值是否严格为待选列表中存在的值。
EXT表单组件常见属性介绍(二)
EXT表单组件常见属性介绍(二)EXT表单组件常见属性介绍(二)文章分类:Web前端1、Ext.form.Hidden2、bel配置项:html:text:3、Ext.form.TextField配置项:allowBlank:是否允许为空,默认为trueblankT ext:空验证失败后显示的提示信息emptyT ext:在一个空字段中默认显示的信息grow:字段是否自动伸展和收缩,默认为falsegrowMin:收缩的最小宽度growMax:伸展的最大宽度inputType:字段类型:默认为textmaskRe:用于过滤不匹配字符输入的正则表达式maxLength:字段允许输入的最大长度maxLengthT ext:最大长度验证失败后显示的提示信息minLength:字段允许输入的最小长度minLengthText:最小长度验证失败后显示的提示信息regex:正则表达式regexText:正则表达式验证失败后显示的提示信息vtype:验证类型的名字alpha:限制只能输入字母alphanum:限制只能输入字母和数字emailurlvtypeText:验证失败时的提示信息validator:自定义验证函数selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false4、Ext.form.TextArea配置项:preventScrollbars:是否禁止出现滚动条,默认为false5、Ext.form.NumberField配置项:allowDecimals:是否允许输入小数,默认为trueallowNegative:是否允许输入负数,默认为truebaseChars:输入的有效数字集合,默认为'0123456789'decimalPrecision:数字的精度,默认保留小数点后2位decimalSeparator:十进制分隔符,默认为'.'maxValue:允许输入的最大数值maxText:超过最大值之后的提示信息minValue:允许输入的最小数值minT ext:超过最小值之后的提示信息nanText:输入非有效数值之后的提示信息6、Ext.form.Checkbox配置项:boxLabel:复选框的文字描述checked:复选框是否被选择,默认为falsehandler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checkedinputValue:方法:getValue():返回复选框的checked状态setValue( Boolean/String checked ):7、Ext.form.CheckboxGroup配置项:allowBlank:是否允许不选择,默认为trueblankT ext:columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)items:对象数组vertical:是否垂直方向显示对象,默认为false8、Ext.form.Radio方法:getGroupValue():setValue( value {String/Boolean} ):9、Ext.form.RadioGroup配置项:allowBlank:blankT ext:10、boBox配置项:displayField:被显示在下拉框中的字段名editable:是否可编辑,默认为trueforceSelection:输入值是否严格为待选列表中存在的值。
EXT各个控件属性(6)
ext3.1 全选/反选/取消/临时数据集1.定义数据集/* 默认源字符串*/var Regular_Data = {totalProperty:2,root:[]}/* 临时数据源*/var Regular_store = new Ext.data.Store({proxy: new Ext.data.MemoryProxy(),reader: new Ext.data.JsonReader({root: 'root',totalProperty: 'totalProperty',fields: [{name: 'Regular_name', type: 'string'}]})});Regular_store.loadData(Regular_Data);2.临时数据集添加数据var Data_1001 = Ext.data.Record.create([{name: 'Regular_name'}]);var a = SmRegulartree.getSelections();Ext.each( a,function (item,index,allItems){var foundItem = Regular_store.find('Regular_name', );if (foundItem == -1) {Regular_store.add(new Data_1001({Regular_name:item.data['name']}));}});3.全选反选取消bbar :[{text:'全选',handler:function(){var count = Regular_store.getCount();if(count>0){var a= new Array();for(var i=0;i<count;i++){a[i]=i;}}regularg1.getSelectionModel().selectRows(a);}},'-',{text:'反选',handler:function(){var trims = "";var str = "";var id = "";var count = Regular_store.getCount();if(count>0){var a= new Array();for(var i=0;i<count;i++){a[i]=Regular_store.data.items[i].id+"-"+i;}}var list2 = regularg1.selModel.getSelections();for(var k=0; k<a.length; k++){str = a[k].split("-");for (var j=0; j<list2.length; j++){id = list2[j].id.split("-");if(str[2]==id[2]){break;}}if (j<list2.length){continue;}if (trims!='') {trims+=',';}trims+=k.toString();}regularg1.getSelectionModel().selectRows(trims);//Ext.MessageBox.alert('提示', result);}},'-',{text:'取消',handler:function(){regularg1.getSelectionModel().clearSelections();}}]grid表格的操作行选择模式:Js代码var rowcount = grid.getSelectionNode().getSelections();var rowcount = grid.getSelectionNode().getSelections();可以获取全部选中的记录,得到的rowcount将是一个Array,比如想获取sex列的数据,语句如下Js代码v ar strsex = rowcount*i+.get(‘sex’);var strsex = rowcount*i+.get(‘sex’);单元格选择模式如果在GridPanel的配置属性增加sm属性如下Js代码sm:new Ext.grid.CellSelectionModel();sm:new Ext.grid.CellSelectionModel();则表格的选择模式为单元格选择模式。
ExtJs入门详细的介绍版
ExtJs2.0学习系列(1)--Ext.MessageBox(详细版)大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个系列的文章.个人认为用extjs做后台很不错,布局比较完美!1.Ext.MessageBox.alert()有四个参数,为简单起见,主要介绍前面三个参数:alert( title , msg , function(){} );其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发.【注意】Ext.MessageBox.alert("title","msg",function(e){alert("按钮的值:"+e);});参数e: 两种值 (ok,cancel).2.Ext.MessageBox.confirm()基本上同 alert() 方法一模一样.【注意】Ext.MessageBox.confirm("title","msg",function(e){alert("按钮的值:"+e);});参数e:三种值(yes,no,cancel).3.Ext.MessageBox.prompt()有六个参数,比前面alert方法多一个返回值和是否多行.Ext.MessageBox.prompt("title","msg");【注意】e是按钮返回值,text是文本框中的输入容,true为多行,this表示作用域4.Ext.MessageBox.show()功能很强大,采用config配置形式,比前面的方法使用更方便.参数很多,在此列举最常用的配置参数:a)animEl:对话框弹出和关闭时的动画效果,比如设置为”id1”,则从id1处弹出并产生动画,收缩则相反;b)buttons:弹出框按钮的设置,【Ext.Msg.OK】【Ext.Msg.OKCANCEL】【Ext.Msg.CAMCEL】【Ext.Msg.YESNO】【Ext.Msg.YESNOCANCEL】可以自定义按钮上面的字:{"ok","我本来是ok的"},若设为false,则不显示任何按钮,默认为false.c)closable:如果为false,则不显示右上角的小叉叉,默认为true;d)msg:消息的容;e)title:标题;f)fn:关闭弹出框后执行的函数;g)icon:弹出框容前面的图标,【】【Ext.MessageBox.ERROR】【Ext.MessageBox.WARNING】【Ext.MessageBox.QUESTION】h)width:弹出框的宽度,不带单位;i)prompt:设为true,则弹出框带有输入框,默认为false;j)multiline:设为true,则弹出框带有多行输入框k)progress:设为true,显示进度条,(但是是死的)l)progressText:显示在进度条上的字m)wait:设为true,动态显示progressn)5.Ext.MessageBox.show()中的进度条的使用首先必须知道另外两个方法Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道意思), 【注意】value为0-1之间的数,表示进度条的进度.第一种:(通过进度的大小控制进度,满进度为1)Ext.get("btn1").on("click",function(){Ext.MessageBox.show({title:"df",msg:"dfd",progress:true,width:300,closable:true});var f=function(v){return function(){if(v==12) {Ext.MessageBox.hide();}Else{var i=v/11;Ext.MessageBox.updateProgress(i,Math.round(100*i)+"% completed",i);}}}for(var i=1;i<13;i++){setTimeout(f(i),i*500);//从点击时就开始计时,所以500*i表示每500ms就执行一次}});第二种:(通过固定时间控制进度加载)Ext.get("btn1").on("click",function(){Ext.MessageBox.show({title:"时间进度条",msg:"5s后关闭进度框",progress:true,width:300,wait:true,waitConfig:{interval:600},//0.6s进度条自动加载一定长度closable:true});setTimeout(function(){Ext.MessageBox.hide()},5000);//5后执行关闭窗口函数}最后关于那个waitConfig的参数,在此说明下:a)interval:进度的频率b)duration:执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度狂也不会消失.c)fn:duration的时间到后执行的函数所以,上面的通过时间控制进度另外一种写法为:Ext.get("btn1").on("click",function(){Ext.MessageBox.show({title:"时间进度条",msg:"5s后关闭进度框",progress:true,width:300,wait:true,waitConfig:{interval:600,duration:5000,ExtJs2.0学习系列(2)--Ext.Panel今天介绍 extjs 中的 Panel 组件.因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel 组件,所以非常有必要介绍Panel组件的配置参数和相关的属性、方法.//配置参数(只列举部分常用参数)a)autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据b)autoScroll:设为true 则容溢出的时候产生滚动条,默认为falsec)autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为falsed)bbar:底部条,显示在主体, //代码:bbar:[{text:'底部工具栏bottomToolbar'}]e)tbar:顶部条,显示在主体, //代码:tbar:[{text:'顶部工具栏topToolbar'}]f)buttons:按钮集合,自动添加到footer中(footer参数,显示在主体外)// 代码 :buttons:[{text:"按钮位于footer"}]g)buttonAlign:footer中按钮的位置,枚举值为:"left","right","center",默认为righth)collapsible:设为true,显示右上角的收缩按钮,默认为falsei)draggable:true则可拖动,但需要你提供操作过程,默认为falsej)html:主体的容k)id:id值,通过id可以找到这个组件,建议一般加上这个id值l)width:宽度m)height:高度n)title:标题o)titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.p)applyTo:(id)呈现在哪个html元素里面q)contentEl:(id)呈现哪个html元素里面,把el的容呈现r)renderTo:(id)呈现在哪个html元素里面// 关于这三个参数的区别(个人认为:applyTo和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去);关于contentEl有资料如下:ContentEl - This config option is used to take existing content and place it in the bod y of a new panel. It is not going to be the actual panel itself. (It will actually copy t he innerHTML of the el and use it for the body). You should add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.ApplyTo - This config option allows you to use pre-defined markup to create an entire Pa nel. By entire, I mean you can include the header, tbar, body, footer, etc. These elements m ust be in the correct order/hierarchy. Any components which are not found and need to be cre ated will be autogenerated.RenderTo - This config option allows you to render a Panel as its created. This would b e the same as saying myPanel.render(ELEMENT_TO_RENDER_TO);考虑到入门,方法事件会在以后的文章中以实例穿插.1.可拖动的panel实例下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件.}).show(); //在这里也可以不show()但是还不能拖到其他的地方,我们需要改写draggable:draggable:{insertProxy: false,//拖动时不虚线显示原始位置onDrag : function(e){var pel = this.proxy.getEl();this.x = pel.getLeft(true);this.y = pel.getTop(true);//获取拖动时panel的坐标},endDrag : function(e){this.panel.setPosition(this.x, this.y);//移动到最终位置}}实现了可保存的拖动,如图:拖动的时候阴影还在原位置,我们再在draggable中的onDrag事件中添加代码: //shadow的realign方法的四个参数,改变shadow的位置大小属性var s = this.panel.getEl().shadow;if (s) {s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());}最后这个可拖动的panel的代码为:var p=new Ext.Panel({title: 'Drag me',x: 100,y: 100,renderTo: Ext.getBody(),floating: true,width: 400,height: 200,draggable: {insertProxy: false,onDrag : function(e){var pel = this.proxy.getEl();this.x = pel.getLeft(true);this.y = pel.getTop(true);var s = this.panel.getEl().shadow;if (s) {s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());}},endDrag : function(e){this.panel.setPosition(this.x, this.y);}}})2.带顶部,底部,脚部工具栏的panel我们已经在各种工具栏上添加了按钮,但是却没有激发事件,下面我们来添加按钮事件代码: tbar:[{text:"按钮1",handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")}},{text:"按钮2"}],改写tbar,添加handler句柄,点击顶部工具栏上按钮1,弹出提示框,效果图大家想象下,就不贴出来了当然,一般情况下,我们只要一个工具栏,这里只是为了演示!3.panel工具栏添加下面的代码到panel配置参数中:tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],//id控制按钮,handler控制相应的事件id的枚举值为:toggle (collapsable为true时的默认值)close minimize maximize restore gear pinunpin right left up down refreshminus plus help search save printExtJs2.0学习系列(3)--Ext.Window介绍window组件,它继承自panel.先介绍个最简单例子<!-- html代码 --><div id="win" class="x-hidden"></div>//js代码var w=new Ext.Window({contentEl:"win",//主体显示的html元素,也可以写为el:"win"width:300,height:200,title:"标题"});w.show();参数介绍:因为前面已经介绍了panel组件,下面只介绍window组件的几个其他特别的配置参数//几个前面没有介绍的window自己的配置参数a)closeAction:枚举值为:close(默认值),当点击关闭后,关闭window窗口,关闭后,只是hidden窗口b)closable:true在右上角显示小叉叉的关闭按钮,默认为truec)constrain:true则强制此window控制在viewport,默认为falsed)modal:true为模式窗口,后面的容都不能操作,默认为falsee)plain://true则主体背景透明,false则主体有小差别的背景色,默认为falsew.show()//需要显示下show()方法,默认的窗口是可拖动的,可关闭的,可拖动大小的实例介绍:1.嵌套了tabpanel的windowvar w=new Ext.Window({contentEl:"win",width:300,height:200,items:new Ext.TabPanel({activeTab:0,//当前标签为第1个tab(从0开始索引)border:false,items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]}),plain:true,//true则主体背景透明,false则主体有小差别的背景色,默认为falsetitle:"标题"});w.show();我们通过items把TabPanel组件嵌套在window的主体中去了.我们再添加工具栏看看bbar:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//bottom部buttons:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//footer部buttonAlign:"center",//footer部按钮排列位置,这里是中间其他工具栏方法一样.关于window中嵌套复杂的布局,等我们谈完了extjs布局再举例说明.ExtJs2.0学习系列(4)--Ext.FormPanel之第一式上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel组件的使用. 首先弄清楚这个问题,创建的时候:Ext.form.FormPanel = Ext.FormPanel;//查看源代码便知,两种方法是一样的我们还是从最简单的代码实例开始吧:<!--html代码--><div id="form1"></div>//js代码var form1 = new Ext.form.FormPanel({width:350,frame:true,//圆角和浅蓝色背景renderTo:"form1",//呈现在哪个控件里title:"FormPanel",bodyStyle:"padding:5px 5px 0",items:[{fieldLabel:"UserName",//文本框标题xtype:"textfield", //表单文本框name:"user",id:"user",width:200},{fieldLabel:"PassWord",xtype:"textfield",name:"pass",id:"pass",width:200}],buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件!");}}] });都是通过items属性参数把表单元素添加到这个表单中.我们发现两个文本框的类型和宽度是一样的,我们还可以把items里面的相同项提取出来,以简化代码: //简化代码,和上面的代码效果一样var form1 = new Ext.form.FormPanel({width:350,frame:true,renderTo:"form1",title:"FormPanel",bodyStyle:"padding:5px 5px 0",defaults:{width:200,xtype:"textfield"},//*****简化****//items:[{fieldLabel:"UserName",//xtype:"textfield",name:"user",id:"user",//width:200},{fieldLabel:"PassWord",//xtype:"textfield",name:"pass",id:"pass",inputType:"password",//width:200}],buttons:[{text:"确定"},{text:"取消",handler:function(){alert();}}] });关于inputType参数(同input类型相同,只列举几个典型的)如下:radio check text(默认) file password等等关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:a)labelAlign:fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right"b)labelWidth:fieldlabel的占位宽c)method:"get"或"post"d)url:"提交的地址"e)submit:提交函数因为容太多,我们先看一个例子.1.FormPanel的fieldset应用//把前面代码重写items属性items:[{xtype:'fieldset',title: '个人信息',collapsible: true,autoHeight:true,width:330,defaults: {width: 150},defaultType: 'textfield',items :[{fieldLabel: '爱好',name: 'hobby',value: '.cnblogs.'},{xtype:"combo",name: 'sex',store:["男","女",""],//数据源为一数组fieldLabel:"性别",emptyText:'请选择性别.'}]}]这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的容中详细探讨.2.关于xtype的类型,在extjs的form表单(其他的请参考api)中已经定义的有:Form componentsa)form Ext.FormPanelb)checkbox Ext.form.Checkboxc)combo boBoxd)datefield Ext.form.DateFielde)field Ext.form.Fieldf)fieldset Ext.form.FieldSetg)hidden Ext.form.Hiddenh)htmleditor Ext.form.HtmlEditori)label belj)numberfield Ext.form.NumberFieldk)radio Ext.form.Radiol)textarea Ext.form.TextAream)textfield Ext.form.TextFieldn)timefield Ext.form.TimeFieldo)trigger Ext.form.TriggerField不早了,FormPanel还有很多的东西要了解,但是今天不能再讲了,太多了,大家都没有兴致看下去,明天继续.extjs的东西很庞大,但是还没有一个人用中文系统的分析写文章,所以资料都很可贵,现在我想做这件事,请大家多多支持,我才有动力.ExtJs2.0学习系列(5)--Ext.FormPanel之第二式3.可选的fieldset实例其实就是带个chechbox,有点像论坛注册时有一部分是选填信息的那种效果,主要知识点:●checkboxToggle:true//true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为false●checkboxName:string//当上面为true时,作为checkbox的name,方便表单操作autoHeight:true,//使自适应展开排版items:[{fieldLabel:"UserName",name:"user",anchor:"95%"//330px-labelWidth剩下的宽度的95%,留下5%作为后面提到的验证错误提示},{fieldLabel:"PassWord",inputType:"password",//密码文本name:"pass",anchor:"95%"}]}4.表单验证实例(空验证,密码确认验证,email验证)我们可以用单独的js写表单验证,但是extjs已经为我们想到了(自己单独写反而不方便).在验证之前,我不得不提两个小知识点(大家在很多的extjs代码中都看到了这两个,他们都起提示作用的):●Ext.QuickTips.init(); //支持tips提示●Ext.form.Field.prototype.msgTarget='side';//提示的方式,枚举值为"qtip","title","under","side",id(元素id)//side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示,其他的我就不介绍了,可自行验证大家可以分别去掉这两行代码,看效果就会明白他们的作用,(放在onReady的function(){}中)✧我们看一个最简单的例子:空验证(其实这不算是一个专门的验证例子)//空验证的两个参数a)allowBlank:false//false则不能为空,默认为trueb)blankText:string//当为空时的错误提示信息js代码为:var form1 = new Ext.form.FormPanel({width:350,frame:true,renderTo:"form1",labelWidth:80,title:"FormPanel",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格式进行简单的验证.在此举验证的例子,重写上面代码的items配置:items:[{fieldLabel:"不能为空",vtype:"email", //email格式验证vtypeText:"不是有效的地址",//错误提示信息,默认值我就不说了id:"blanktest",anchor:"90%"}]你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:●alpha //只能输入字母,无法输入其他(如数字,特殊符号等)●alphanum//只能输入字母和数字,无法输入其他●email//email验证,要求的格式是langsingmail.●url//url格式验证,要求的格式是.langsin.✧确认密码验证(高级自定义验证)前面的验证都是extjs已经提供的验证,我们也可以自定义验证函数,比上面要复杂点了.我们一起做一个密码确认的例子.我们修改前面的代码://先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)Ext.apply(Ext.form.VTypes,{password:function(val,field){//val指这里的文本框值,field指这个文本框组件,大家要明白这个意思if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值return (val==pwd.getValue());}return true;}});//配置items参数items:[{fieldLabel:"密码",id:"pass1",anchor:"90%"},{fieldLabel:"确认密码",id:"pass2",vtype:"password",//自定义的验证类型vtypeText:"两次密码不一致!",confirmTo:"pass1",//要比较的另外一个的组件的idanchor:"90%"}]关于vtype的容还有很多容要挖掘,但现在我们就点到这里为止,以后有机会再讨论它的其他高级验证.ExtJs2.0学习系列(6)-- Ext.FormPanel之第三式(ComboBox篇)上篇ExtJs2.0学习系列(5)--Ext.FormPanel之第二式中我们讨论了下fieldset和表单验证的知识,今天我们接着深入解析表单元素中ComboBox组件的使用.会涉及到.net简单服务器数据交互,但暂不做深入讨论,以后会详细分析服务器交互相关,不过可能要等较长一段时间,呵呵!5.服务器数据作为ComboBox的数据源实例首先从服务器获取json数据://cs后台代码,要注意字符串格式(新手注意,下面的代码放在类里面,不是放在方法里)public String ServerData="['','','']";//aspx前台js介绍代码Ext.onReady(function(){var combo=new boBox({store:<%=ServerData%>,emptyText:'请选择一个省份....',applyTo: 'combo'});});<!-- aspx前台html代码 --><input type="text" id="combo" size="20"/>我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数据.问题来了,js和html怎么调用c#后台的变量和方法?(变量的调用上面刚刚介绍)6.js和html怎么调用c#后台的变量和方法a)js调用c#后台变量,参考上面,注意,如果想获取string类型,请在js里用引号 var str="<%=ServerData%>"(返回"['','','']")b)js调用c#后台方法:c)js调用c#后台带参数的方法boBox的数据源store格式详解在前面的例子里面,我们一直给ComboBox的数据源store赋值一维数组,其实store支持多维和Store.data.Store类型.下面就几种数据以代码举例说明一维数组:["",""],值同时赋给ComboBox的value和text二维和多维数组:[["one","bbar","111"],["two","tbar","222"]],第一维和第二维分别赋值给value和text,其他维忽略store类型:包括GroupingStore, JsonStore, SimpleStore.我们分三步走:这里我们介绍了两个新的参数displayField和mode,请记住,后面不再专门说明.boBox的value获取添加listeners事件:ComboBox的事件很多(api),我们无法一一讲解,但是我们可以举一反三,select事件就是其中典型的一个listeners:{"select":function(){alert(Ext.get("combo").dom.value); //获取id为combo的值}}这里我们提供了一种不是很好的方法,在此不做过多停留9.把Extjs的ComboBox样式应用到select的下拉框中去核心参数介绍transform:id//用于转换样式的,TimeField作为ComboBox的子类也有此属性核心代码://js代码var ExtSelect=new boBox({transform:"select",//html中的idwidth:80//宽度});<!-- html代码 --><select id="select"><option value="1">浪曦</option><option value="2">博客园</option><option value="3">百度</option><option value="4">新浪</option></select>boBox的其他重要参数a)valueField:"valuefield" //value值字段b)displayField:"field" //显示文本字段c)editable:false //false则不可编辑,默认为trued)triggerAction:"all"//请设置为"all",否则默认为"query"的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为"all"的话,每次下拉均显示全部选项e)hiddenName:string //真正提交时此combo的name,请一定要注意f)typeAhead:true, //延时查询,与下面的参数配合g)typeAheadDelay:3000, //默认250关于combobox的其他花俏功能在此不多做介绍.最后一点,如何实现在aspx页面更灵活的分离cs数据和js数据的交互?因为我们都喜欢把js放在一个单独的文件,然后在aspx页面引用这样就有一个问题,我在js里直接获取cs数据就有点不方便.我认为可以这样,在aspx页面里获取数据,并作为js,你就js变量,你就可以在js里引用了,或者直接通过url地址获取.之所以这么啰嗦的讲combobox,是因为这个东西有时候真的让人又爱又恨!下篇中我们继续讲解form中其他的表单元素!ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)11.checkbox简单示例效果图:js代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:330,layout:"form",labelWidth:30,title:"checkbox简单示例",labelAlign:"left",renderTo:Ext.getBody(),items:[{xtype:"panel",layout:"column",//也可以是table,实现多列布局fieldLabel:'爱好',isFormField:true,//非常重要,否则panel默认不显示fieldLabelitems:[{columnWidth:.5,//宽度为50%xtype:"checkbox",boxLabel:"足球",//显示在复选框右边的文字name:""},{columnWidth:.5,xtype:"checkbox",boxLabel:"篮球",name:""}]}]});});关于多列布局,我们可以使用column或者table布局解决!a)checked:true//true则选中,默认为falseb)name:"**"//name值c)value:"" //初始化值,默认为undefine12.radio简单示例基本上和checkbox一样,不过注意一组单选框必须name值相同,才能单选.效果图:代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:330,layout:"form",labelWidth:30,title:"radio简单示例",labelAlign:"left",renderTo:Ext.getBody(),items:[{xtype:"panel",layout:"column",fieldLabel:'性别',isFormField:true,items:[{columnWidth:.5,xtype:"radio",boxLabel:"男",name:"sex"//inputValue},{columnWidth:.5,checked:true,xtype:"radio",boxLabel:"女",name:"sex"}]}]});});13.htmleditor简单示例效果图:js代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:600,layout:"form",labelWidth:50,title:"htmleditor简单示例",labelAlign:"top",//items中的标签的位置renderTo:Ext.getBody(),items:[{xtype:"htmleditor",id:"he",fieldLabel:"编辑器",anchor:"99%"}]});});在这里我啰嗦个参数:labelAlign:此参数是指form表单中items各项的label位置,默认值为left,枚举值有left,right,top 我看见过有朋友认为此参数指title的位置,是错误的!几个其他的参数:a)hideLabel:true//默认为false,还适用于有标签的所有表单组件//下面的一组参数控制编辑器的工具栏选项,都是默认值为trueb)enableColors:true//默认为true,显示字体颜色,字体背景颜色c)enableAlignments:true//左,中,右对齐d)enableFont:true//字体e)enableFontSize:false//字体大小,就是A旁边有个小箭头的f)enableFormat:false//粗体,斜体,下划线g)enableLinks:true//h)enableLists:true//列表i)enableSourceEdit:true//源代码编辑14.datefield简单示例效果图:js代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:200,layout:"form",labelWidth:30,title:"dateditor简单示例",labelAlign:"left",renderTo:Ext.getBody(),items:[{xtype:"datefield",fieldLabel:"生日",anchor:"99%"}]});});15.timefield简单示例把上面的例子中datefield改为timefield,效果图:16.numberfield简单示例:把上面的datefield改为numberfield,就只能输入数字了17.triggerfield简单示例说明:它提供了一个触发的事件onTriggerClick,datefield和combox都是继承它效果图:(点击右边下拉按钮)js代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:200,layout:"form",好了,关于form的几个基本组件我们都蜻蜓点水的看了一遍,相信大家感性上知道是怎么回事啦!(总算快写完了formpanel)前面有朋友说要做个一行多个控件,中间有文字的那种form布局,支持!下篇我们就做一个复杂点的form组件,还能提交服务器的综合示例!敬请期待!ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)在上篇和前面的介绍中,我们基本上对form表单中常见组件有了简单的认识,今天我们做个综合点的例子,向服务器提交下!其实这篇文章很简单,没有什么发光点,暂放首页半天,忘各位理解!先来个简单的例子,以说明formpanel如何把数据传给其他页面.效果图:现在我们要实现的效果是:点击确定,把值传到另一页面!,如下:原页面js代码为:Ext.onReady(function(){Ext.QuickTips.init();var form=new Ext.FormPanel({frame:true,width:300,//monitorValid:true,//绑定验证layout:"form",labelWidth:70,title:"添加个人信息",labelAlign:"left",renderTo:Ext.getBody(),submit: function(){this.getEl().dom.action = 'GetForm.aspx',this.getEl().dom.method='POST',this.getEl().dom.submit();},items:[{xtype:"textfield",fieldLabel:"用户名",//id:"UserName",allowBlank:false,blankText:"不能为空,请正确填写",name:"UserName",anchor:"90%"接受页面GetForm.aspx的cs代码为:因为很简单,我做个简要说明://几点说明1.首先定义submit参数的执行函数,即:2.为按钮添加触发相应的提交(取消)事件(这样就不是默认的ajax提交):3.如果你想绑定验证,在form表单添加参数monitorValid:true,然后在按钮配置参数中添加formBind:true,如buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]则只有所有的填写字段都满足条件时,"确定"方可提交!如下图,好了,一个简单的formpanel的提交的原理弄清楚啦!有关form提交数据的方法有多种,大家可以参考.17ext./showtopic-55.aspx(三种ext提交数据的方式), 下面我们来做个复杂点(只是样子)的form,示例一下(还是上面的原理)!效果图:传到GetForm.aspx页面后显示:不过在传过来的页面要记得ValidateRequest="false",安全编码我就暂且不讨论了! js代码:Ext.onReady(function(){Ext.QuickTips.init();var form=new Ext.FormPanel({frame:true,width:500,monitorValid:true,//把有formBind:true的按钮和验证绑定layout:"form",labelWidth:55,title:"添加个人信息",labelAlign:"right",renderTo:Ext.getBody(),submit: function(){this.getEl().dom.action = 'GetForm.aspx',this.getEl().dom.method='POST',this.getEl().dom.submit();},items:[{xtype:"panel",layout:"column",fieldLabel:"用户名",isFormField:true,items:[{columnWidth:.5,xtype:"textfield",allowBlank:false,blankText:"不能为空,请填写",name:"UserName",anchor:"90%"},{columnWidth:.20,layout:"form",labelWidth:40,labelAlign:"right",items:[{xtype:"radio",fieldLabel:"性别",boxLabel:"男",name:"Sex",checked:true,inputValue:"man",//这里如果用value,值是on,所以用inputValue(出现这种情况的是radio,checkbox)anchor:"95%"}]},{columnWidth:.30,layout:"form",labelWidth:1,//让标签宽度为很小的值(奇怪的是为0时反而不行)items:[{xtype:"radio",boxLabel:"女",labelSeparator:"",//去除分隔符”:”name:"Sex",inputValue:"woman",anchor:"95%"}]}]},{//上面是第一行xtype:"panel",layout:"column",fieldLabel:"出生日期",isFormField:true,items:[{columnWidth:.5,xtype:"datefield",name:"BirthDate",anchor:"90%"},{columnWidth:.5,layout:"form",labelWidth:40,//注意,这个参数在这里可以调整简单fieldLabel的布局位置items:[{xtype:"combo",name:"Degree",fieldLabel:"学位",store:["小学","初中","高中","专科","本科","硕士","博士"],emptyText:"请选择适合你的学历",anchor:"90%"}]}]},{ //上面是第二行xtype:"panel",layout:"column",isFormField:true,fieldLabel:"使用框架",items:[{columnWidth:.2,xtype:"checkbox",boxLabel:"",name:"SpringNet",inputValue:"spring"//这里如果用value,值是on,所以用inputValue },{columnWidth:.2,layout:"form",labelWidth:1,items:[{xtype:"checkbox",boxLabel:"Nhibernate",labelSeparator:"",name:"NHibernate",inputValue:"nhibernate",anchor:"95%"}]},{columnWidth:.6,layout:"form",labelWidth:1,items:[{xtype:"checkbox",boxLabel:"Linq",labelSeparator:"",name:"Linq",inputValue:"linq",anchor:"95%"}]}]},{ //上面是第三行xtype:"textfield",fieldLabel:"Email",name:"Email",vtype:"email",//email验证,如果想自定义验证的话,请参见前面的文章vtypeText:"email格式错误!",anchor:"56%"//控制文本框的长度},{ //上面是第四行xtype:"textarea",fieldLabel:"个性签名",name:"OneWord",height:50,anchor:"95%"},{ //上面是第五行xtype:"htmleditor",fieldLabel:"想说的话",name:"WantToSay",anchor:"95%",enableAlignments:false,//去除左右对齐工具栏enableLists:false//去除列表工具栏}],buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}] });function login(){form.form.submit();}function reset(){form.form.reset();}});ExtJs2.0学习系列(9)--Ext.TabPanel之第一式照旧,看个最简单的先,后面再详细说复杂的!效果图片:js代码:Ext.onReady(function(){var tabsDemo=new Ext.TabPanel({renderTo:Ext.getBody(),width:300,activeTab:0,//当前激活标签frame:true,items:[{contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)title:"浪曦",closable:true//是否现实关闭按钮,默认为false},{contentEl:"tabTwo",title:"博客园兄弟们可好"}]});});html代码:<!-- html代码 --><body style="margin:10px;"><div><div id="tabOne" class="x-hide-display">i am tabOne!</div><div id="tabTwo" class="x-hide-display">i am tabTwo!</div></div></body><!--注意class类型,设为x-hide-display,以正常显示-->在这里例举几个参数:●tabPosition:"bottom"//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)●tabTip:"提示"//必须先调用Ext.QuickTips.init();才有效果经常我们有这么个情况,一个选项卡加载一个页面,这里我提供一种不是很好但是很稳定的简单方法(已经在项目中验证没有出现问题).就是:使用iframe作为tab的标签页容.1.用iframe加载其他完整页面的tabpanel.效果图:。
EXT表单组件常见属性介绍(三)
EXT表单组件常见属性介绍(三)本范例展⽰如何使⽤表单的各种组件。
下拉框组件展⽰了5种使⽤范例:普通下拉框、绑定HTML组件的下拉框、树形下拉框、分页下拉框、多选下拉框等。
Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";3. Ext.QuickTips.init();4. Ext.form.Field.prototype.msgTarget = "qtip";5.6. //component7. var hiddenField = new Ext.form.Hidden({8. name: "hiddenField",9. value: "1"10. });11.12. var usernameField = new Ext.form.TextField({13. name: "username",14. fieldLabel: "⽤户名",15. allowBlank: true,16. blankText: "请输⼊⽤户名!"17. });18.19. var pwdField = new Ext.form.TextField({20. name: "password",21. fieldLabel: "密码",22. allowBlank: true,23. blankText: "请输⼊密码!",24. inputType: "password"25. });26.27. var ageField = new Ext.form.NumberField({28. name: "age",29. allowBlank: true,30. blankText: "请输⼊年龄!",31. fieldLabel: "年龄",32. allowDecimals: false,33. allowNegative: false,34. minValue: 18,35. minText: "年龄不能少于18",36. maxValue: 100,37. maxText: "年龄不能⼤于100"38. });39.40. var love1 = new Ext.form.Checkbox({41. name: "love1",42. boxLabel: "打球",43. inputValue: "1"44. });45.46. var love2 = new Ext.form.Checkbox({47. name: "love2",48. boxLabel: "游泳",49. inputValue: "2"50. });51.52. var love3 = new Ext.form.Checkbox({53. name: "love3",54. boxLabel: "登⼭",55. inputValue: "3"56. });57.58. var loveGroup = new Ext.form.CheckboxGroup({59. name: "love",60. columns: [80, 80, 1.0],61. fieldLabel: "爱好",62. items: [love1, love2, love3]63. });64.65. var sex1 = new Ext.form.Radio({66. name: "sex1",67. boxLabel: "男",68. inputValue: "1"69. });70.71. var sex2 = new Ext.form.Radio({72. name: "sex1",73. boxLabel: "⼥",74. inputValue: "0"75. });76.77. var sexGroup = new Ext.form.RadioGroup({78. name: "sex",79. columns: [80, 1.0],80. fieldLabel: "性别",81. items: [sex1, sex2]82. });83.84. //本地数据源的组合框85. var store = new Ext.data.SimpleStore({86. fields: ["code", "name"],87. data: [88. ["1", "北京"],89. ["5", "上海"],90. ["4", "⼴东"]91. ]92. });93. var cmbProvince = new boBox({94. id: "cmbProvince",95. hiddenName: "province.id",96. fieldLabel: "省份",97. resizable: true,98. editable: false,99. width: 100,100. emptyText: "请选择...",101. store: store,102. valueField: "code",103. displayField: "name",104. triggerAction: "all",105. mode: "local"106. });107.108. //远程数据源的组合框109. var store2 = new Ext.data.SimpleStore({110. fields: ["name"],111. proxy: new Ext.data.HttpProxy({112. url: "../testForm!loadData.action"113. })114. });115.116. var cmbManager = new boBox({117. hiddenName: "manager",118. fieldLabel: "经理",119. editable: false,120. triggerAction: "all",121. mode: "local",122. maxHeight: 200,123. store: new Ext.data.SimpleStore({fields:[],data:[[]]}),124. onSelect: Ext.emptyFn,125. tpl: "<tpl for='.'><div id='tree'></div></tpl>"126. });127.128. var root = new Ext.tree.TreeNode({129. nodeId: 1,130. text: "根节点",131. expanded: true132. });133. root.appendChild(new Ext.tree.TreeNode({nodeId:2, text:"节点A", leaf:true})); 134. root.appendChild(new Ext.tree.TreeNode({nodeId:3, text:"节点B", leaf:true})); 135.136. var tree = new Ext.tree.TreePanel({137. root: root,138. border: false,139. autoHeight: true,140. autoScroll: true141. });142.143. tree.on("click", function(node){144. if(!node.isLeaf()) return; //只能选择叶节点145. //下拉框的隐藏值146. if(cmbManager.hiddenField){147. cmbManager.hiddenField.value = node.attributes.nodeId; 148. }149. cmbManager.setRawValue(node.text); //下拉框的显⽰值150. cmbManager.collapse(); //折叠下拉框151. });152.153. cmbManager.on("expand", function(){154. tree.render("tree");155. });156.157. //分页远程数据源的组合框158. var store3 = new Ext.data.JsonStore({159. url: "../testForm!loadData3.action",160. totalProperty: "totalNum",161. root: "books",162. fields: ["id", "name"]163. });164. var cmbBook = new boBox({165. hiddenName: "books",166. fieldLabel: "书籍",167. store: store3,168. valueField: "name",169. displayField: "name",170. triggerAction: "all",171. mode: "remote",172. queryParam: "books",173. loadingText: "正在装载数据...",174. width: 180,175. minChars: 1,176. editable: false,177. listWidth: 250,178. pageSize: 3179. });180.181. //HTML标准组件182. var cmbPass = new boBox({183. hiddenName: "status",184. fieldLabel: "是否有效",185. triggerAction: "all",186. editable: false,187. width: 100,188. transform: "isPass",189. lazyRender: true190. });191.192. var cmbTimes = new Ext.form.TimeField({193. hiddenName: "time",194. fieldLabel: "时间",195. minValue: "09:00",196. minText: "所选时间应⼤于{0}",197. maxValue: "18:00",198. maxText: "所选时间应⼩于{0}",199. format: "H时i分",200. increment: 30,201. invalidText: "时间格式⽆效!",202. maxHeight: 200,203. width: 100,204. value: "09时00分",205. editable: false206. });207.208. var cmbMonths = new Ext.ux.MultiSelectCombo({209. hiddenName: "months",210. fieldLabel: "⽉份",211. maxHeight: 200,212. editable: false,213. store: [["201010","201010"], ["201009","201009"], ["201008","201008"], ["201007","201007"], ["201006","201006"]], 214. mode: "local",215. width: 180,216. maxItemsCount: 3,217. maxItemsCountText: "最多只能选择三个选项!"218. });219.220. var cmbBirths = new Ext.form.DateField({221. name: "births",222. fieldLabel: "出⽣⽇期",223. disabledDays: [0,6],224. disabledDaysText: "禁⽌选择周末!",225. width: 100,226. readOnly: true,227. format: "Y-m-d",228. invalidText: "不是有效的⽇期值!"229. });230.231. var fieldSet1 = new Ext.form.FieldSet({232. title: "下拉框",233. checkboxName: "fieldSet1",234. checkboxToggle: true,235. autoHeight: true,236. layout: "table",237. layoutConfig: {238. columns: 3239. },240. defaults: {241. style:"margin-left:8px; margin-top:3px; margin-right:8px; margin-bottom:3px; valign:top",242. layout:"form",243. labelAlign: "right"244. },245. items: [246. {rowspan:1, colspan:1, items:[cmbProvince]},247. {rowspan:1, colspan:1, items:[cmbManager]},248. {rowspan:1, colspan:1, items:[cmbBook]},249. {rowspan:1, colspan:1, items:[cmbPass]},250. {rowspan:1, colspan:1, items:[cmbTimes]},251. {rowspan:1, colspan:1, items:[cmbMonths]},252. {rowspan:1, colspan:1, items:[cmbBirths]}]253. });254.255. var remarksField = new Ext.form.TextArea({256. name: "remarks",257. fieldLabel: "备注",258. width: 400,259. height: 80260. });261.262. var form = new Ext.form.FormPanel({263. id: "frmAddUser",264. title: "新增⽤户",265. autoWidth: true,266. autoHeight: true,267. frame: true,268. renderTo: Ext.getBody(),269. labelWidth: 70,270. tbar: toolbar,271. items: [hiddenField, usernameField, pwdField, ageField, loveGroup, sexGroup, 272. fieldSet1, remarksField],273. url: "../testForm!ajaxSubmitForm.action"274. });275. });Js代码1. Ext.onReady(function(){2. Ext.BLANK_IMAGE_URL = "/widgets/ext-2.2/resources/images/default/s.gif";。
ExtJs教程,一个示例带你学会所有表单控件
一个例子带你学完EXTJS form表单所有控件在开始之前,还是简单说说ext需要引入的包,ext有两个包是必引的,ext-all.js、ext-all.css,我用的ExtJs 4.2。
配置方式如下:<link rel="stylesheet"type="text/css" href="../resources/css/ext-all.css"/><script type="text/javascript"src="../js/ext-all.js">注意里面的路径,我这里写的是相对路径,你们配置的时候自己注意。
Form表单效果如下:JS代码如下:<script type="text/javascript">//完整的form表单Ext.onReady(function () {//HTMLeditor需要这个,初始化编辑器Ext.QuickTips.init();var form = new Ext.form.FormPanel({ //创建一个FormPanelbuttonAlign:'center', //按键居中pageX:300, //距离页面左边距300pxpageY:80, //距离页面上边距80pxwidth:600, //FormPanel宽600title:'个人信息', //FormPanel标题frame:true, //对Ext的Panel界面组件,如果配置它的frame为true,则Panel是圆角框显示,并且增加paddingfieldDefaults:{labelAlign:'right', //标签靠右排列labelWidth:70},items:[{xtype:'container', //类型为容器layout:'column', //列布局,只能纵向items:[{columnWidth:0.7, //宽占比:70%xtype:'fieldset', //类型html中framesetcheckboxToggle:true, //true-使fieldSet可折叠title:'单纯输入',autoHeight:true, //自动调节高度defaults:{width:300},defaultType:'textfield',items:[{fieldLabel:'文本', //文本名称name:'text'//类型为文本输入控件},{xtype:'numberfield', //类型为数字输入控件,带校验功能fieldLabel:'数字', //文本名称name:'number'},{xtype:'combo', //多选fieldLabel:'选择',name:'combo',store:new Ext.data.SimpleStore({fields:['value','text'], //类似key-valuedata:[['haha','hehe'],['xixi','wuwu']] //创建静态数据}),displayField:'text',valueField:'value',mode:'local', //读取本地数据emptyText:'请选择'//若为空则显示},{xtype:'datafield', //日期控件fieldLabel:'日期',name:'data',},{xtype:'timefield', //时间控件fieldLabel:'时间',name:'time'},{xtype:'textarea', //文本域控件fieldLabel:'文本域',name:'textarea'},{xtype:'hidden', //隐藏控件name:'hidden'}]},{xtype:'container',columnWidth:0.3,layout:'form', //表单布局items:[{xtype:'fieldset',checkboxToggle:true, //true-使fieldSet 可折叠title:'多选',autoHeight:true,defaultType:'checkbox', //多选控件hideLabels:true, //是否隐藏字段标签style:'margin-left:10px;',bodyStyle:'margin-left:20px;',items:[{boxLabel:'吃饭',name:'check',value:'1',checked:'true',width:'auto'},{boxLabel:'睡觉',name:'check',value:'2',checked:'true',width:'auto'},{boxLabel:'打豆豆',name:'check',value:'3',width:'auto'}]},{xtype:'fieldset',checkboxToggle:true,title:'单选',autoHeight:true, //自动调节高度defaultType:'radio', //单选控件hideLabels:true,style:'margin-left:10px;',bodyStyle:'margin-left:20px;',items:[{boxLabel:'单机',name:'single',value:'1',checked:true,width:'auto'},{boxLabel:'联网',name:'single',value:'2',width:'auto'}]}]}]},{xtype:'container',layout:'form',items:[{labelAlign:'top', //顶部对其xtype:'htmleditor', //编辑器控件fieldLabel:'在线编辑器',id:'editor',anchor:'98%', //columnWidth的值乘以anchor的值,即为本组件所占的长度。
EXT中文手册6
注意:留意几种不同的方法加入子菜单!还有even handing函数和Coloritem、DataMenu匿名函数之间的区别。
练一练Ok我们用上述的方法,创建了toolbar和menu,看起来应该是这样的:上文提及menu可摆放在UI的任何位置,这里将为你演示menu如何与Toolbars、MeneuButtons、Context Menus's配合工作,包括一些有用的方法和动态添加的功能。
MenuButton这条Toolbar有两个按钮。
一个分隔符,和一个纯图标的按钮(附Quicktips)。
你可尝试这样做,把zip文件中.gif加入一些代码片段,有助你提高效率,留意注释!现在你已经了解菜单组件是如何工作了。
下面的资源有助您进一步更深入学习菜单:模板(Templates)起步首先建议读者先下载本例的代码,以配合文本的说明。
有效的例子在这里。
第一步您的HTML模板第一个步骤没有任何特别,这里的HTML可以说是用来格式化你的数据。
花括号里面的关键字就是你数据中的{id},{url} 和{text}的容器(placeholder)。
或者用纯数字{0},{1},{2}来表示,但是关键字的命名第二步,将数据加入到模板中这里我们将使用append方法加入两行的数据。
正如你所见,元素的“id”、“url”和“text”相对应于上述模板的容器。
这就是模板的基本知识点,对于你来这说非常简单吧?下一步如果你想换个地方,文档区便是一个绝佳的好地方。
看看范例Feed V iewer,里面就大量使用了模板。
学习利用模板(Templates)的格式化功能本教程基于Ext的模板引擎展开详述,亦是对Shea Frederick“模板入门”教程一文的补充。
假设读者已经初步接触过模板(Templates),和格式化函数的基本语法为“{V ARIABLE:[(可选的参数)]}”。
正式开始假设我们打算从一变量中,打印出内容,但当中的内容有可能会占用过多的空间。
Ext 主要控件总结
Ext 主要控件Ext.form.TimeField:配置项:maxValue:列表中允许的最大时间maxText:当时间大于最大值时的错误提示信息minValue:列表中允许的最小时间minText:当时间小于最小值时的错误提示信息increment:两个相邻选项间的时间间隔,默认为15分钟format:显示格式,默认为“g:i A”。
一般使用“H:i:s”H:带前缀0的24小时i:带前缀0的分钟s:带前缀0的秒invalidText:当时间值非法时显示的提示信息altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割Ext.form.FieldSetanimCollapse:动画折叠,默认为falsecheckboxToggle:设置是否显示字段集的checkbox选择框,默认为falsecheckboxName:指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效labelWidth:字段标签的宽度,可以级联到子容器layout:布局,默认为formExt.form.DateFiedmaxValue:允许选择的最大日期maxText:当日期大于最大值时的错误提示信息minValue:允许选择的最小时间minText:当日期小于最小值时的错误提示信息format:日期显示格式,默认为“m/d/y”,一般使用“Y-m-d”Y:四位年份m:带前缀0的月份d:带前缀0的日期y:两位年份n:不带前缀0的月份j:不带前缀0的日期w:星期的数字,0表示星期日,1代表星期一showToday:是否显示今天按钮,默认为truealtFormats:多个日期输入格式组成的字符串,不同的格式之间使用“|”进行分割,默认值为'm/d/Y|n/j/Y|n/j/y|m/j /y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'disabledDates:禁止选择的日期组成的数组disabledDatesText:选择禁选日期时显示的提示信息disabledDays:禁止选择的星期组成的数组,0代表星期日,1代表星期一disabledDaysText:选择禁选星期时显示的提示信息invalidText:当日期值非法时显示的提示信息方法:getValue():取得日期值boBoxdisplayField:被显示在下拉框中的字段名editable:是否可编辑,默认为trueforceSelection:输入值是否严格为待选列表中存在的值。
Ext.form.FieldSet的用法
Ext.form.FieldSet的用法一、Ext.form.FieldSet的常用配置项:1、checkboxToggle : MixedTrue表示在lengend标签之前fieldset的范围内渲染一个checkbox,或者送入一个DomHelper的配置对象制定checkbox(默认为false)。
选择该checkbox会为展开、收起该面板服务。
2、checkboxName : String分配到fieldset的checkbox的名称,在#checkboxToggle = true的情况有效。
(默认为'[checkbox id]-checkbox')。
3、labelWidth : Number标签的宽度,该属性会影响下级的子容器。
4、itemCls : String关于容器的表单项元素的额外的CSS样式(默认为"",如容器的itemCls 有设置的话就用那个值)。
由于该样式是作用于整个条目容器的,这就会对在内的表单字段、label元素(若有指定)或其他元素只要属于条目内的元素都有效。
此组件只有在Ext.form.FormLayout FormLayout布局管理器控制的容器下渲染才有用。
5、baseCls : String作用在面板元素上的CSS样式类(默认为'x-panel')。
6、layout : String7、此容器所使用的布局类型。
如不指定,则使用缺省的yout.ContainerLayout类型。
当中有效的值可以是:accordion、anchor、border、cavd、column、fit、form和table。
针对所选择布局类型,可指定#layoutConfig进一步配置。
8、animCollapse : BooleanTrue 表示为面板闭合过程附有动画效果(默认为true,在类Ext.Fx 可用的情况下)。
9、bodyCfg : Object构成面板#body元素的Ext.DomHelper DomHelper配置对象。
EXT的各个组件的配置属性及具体的含义
由于所有的组件都继承自 ponent,因此在这里我们列出组件基类 Component 中的配置属性 简单介绍。
配置属性名称 allowDomMove applyTo
Ext.onReady(function(){ Ext.get("btnAlert").on("click",a,this,{delay:2000});
});
由于在调用 addListener 的时候传递指定的 delay 为 2000,因此当用户点击按钮的时候,不会马上执 行事件响应函数,而是在 2000 毫秒,也就是两秒后才会弹出提示信息框。
Ext.onReady(function(){ Ext.get("btnAlert").addListener("click",a);
}); </script> <input id="btnAlert" type="button" value="alert 框" />
Ext.get("btnAlert")得到一个与页面中按钮 btn Alert 关联的 Ext.Element 对象,可以直接调用该对象上 的 addListener 方法来给对象添加事件,同样实现前面的效果。在调用 addListener 方法的代码中,第一 个参数表示事件名称,第二个参数表示事件处理器或整个响应函数。 ExtJS 支持事件队列,可以往对象的某一个事件中添加多个事件响应函数,看下面的代码:
关于 ExtJS 中组件的详细使用说明,包括 Component 的属性 Properties、方法及事件详细,请参考 中的 VIP 文档《ExtJS 组件 Component 详解(1)、(2)》。
fieldset标签用法
fieldset标签用法fieldset 标签定义了 HTML 中表现文本内容的边界,把它作为一个整体。
1. 什么是fieldset标签?fieldset标签是一个用来把某一部分表单的元素(像输入框、选择框等)包裹进一个容器里的标签。
它是 HTML 中表现文本内容的边界,把它作为一个整体。
它有一块标题,可以给用户一个对这一块内容的概括指导。
2. fieldset标签的基本语法fieldset 标签常常有一块标题(legend 标签),如:<fieldset><legend>标题</legend><!-- 内容 --></fieldset>其他属性如:name、disabled和form等:<fieldset disabled name =” disabled” form =” 表单ID”>3.fieldset标签的使用(1)表单表示:fieldset标签可以把表单的相关元素分组,便于形成良好的用户界面。
比较有用的例子是复选框组、单选框组和文本框组。
(2)分块布局:fieldset标签还可以用来把网页内容分块布局以形成较美观的页面布局。
(3)把文本信息包装起来:fieldset标签可以用来把文本信息封装起来,利于整套文本的解析和显示,而不仅仅是一单独的文本信息。
4.fieldset标签的注意事项(1)fieldset和legned只能放在form下,所以不能用作其他的布局标签,例如div 布局的We fei页面。
(2)fieldset和legend之间没有关系,如果没有legend标签,fieldset所包含的控件也会显示出来。
(3)fieldset 标签中,每个 input 表单都必须要有一个value值,而且name属性也必不可少,不然input表单并不能提交提交到后台。
(4)当一个元素的disabled属性为true时,提交表单查询数据时,这个元素的值将不会提交。
fieldset的边框样式 -回复
fieldset的边框样式-回复fieldset是HTML中的一个元素,用于将表单中的相关元素进行分组并添加边框样式。
它可以帮助我们更好地组织表单,并提升用户体验。
本文将一步一步回答[fieldset的边框样式]这个主题,介绍fieldset的基本用法、边框样式的设置方法,以及常见的边框样式效果。
下面是详细的内容:第一步:了解fieldset元素的基本用法(200字)fieldset是HTML中用于将表单元素进行分组的一个容器元素。
它会为包含在其内部的表单元素提供边框样式,并可以使用legend元素添加一个标题。
通过使用fieldset元素,我们可以将相关的表单元素分组在一起,提高表单的可读性和理解性。
下面是一个示例:<code><form><fieldset><legend>个人信息</legend><label for="name">姓名:</label><input type="text" id="name" name="name"><label for="email">邮箱:</label><input type="email" id="email" name="email"><label for="password">密码:</label><input type="password" id="password" name="password"></fieldset></form></code>在上面的示例中,我们使用了fieldset元素将“个人信息”表单元素进行了分组,并使用legend元素添加了一个标题。
fieldset 默认高度
fieldset 默认高度在网页设计中,我们经常会使用fieldset元素来创建表单,并且默认情况下,该元素的高度是根据标题的高度来决定的。
本文将探讨fieldset默认高度为标题的相关问题,并提供一些实用的技巧和建议。
在开始之前,我们先来了解一下fieldset元素的基本用法和特点。
fieldset是HTML中的一个表单元素,它可以将相关的表单控件组合在一起,并给它们一个共同的边框。
通常情况下,我们会在fieldset元素中使用legend元素来定义一个标题,以便描述该组表单控件的作用或用途。
在默认情况下,fieldset元素的高度是根据标题的高度来确定的。
也就是说,如果标题的高度发生变化,fieldset元素的高度也会相应地进行调整。
这种设计方式可以确保标题和表单控件之间的对齐和一致性,使整个表单看起来更加整洁和美观。
那么,如何改变fieldset元素的高度呢?其实,我们可以通过CSS 来实现。
通过设置fieldset元素的高度属性,我们可以改变它的高度。
例如,我们可以使用如下的CSS代码来设置fieldset元素的高度为200px:```fieldset {height: 200px;}```除了设置固定的高度外,我们还可以使用其他的CSS属性来调整fieldset元素的高度。
例如,我们可以使用max-height属性来限制fieldset元素的最大高度,这样当内容超出最大高度时,会自动出现滚动条。
具体的CSS代码如下所示:```fieldset {max-height: 200px;overflow: auto;}```这样一来,即使fieldset元素中的内容很多,也不会导致整个表单变得混乱和难以操作。
除了设置固定高度和最大高度外,我们还可以使用其他的CSS属性来调整fieldset元素的高度。
例如,我们可以使用min-height属性来设置fieldset元素的最小高度,以确保即使内容很少时,fieldset元素也能保持一定的高度。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
36、contentEl : String
用现有HTML节点的内容作为面板body的内容(缺省为'')。面板的afterRender方法负责了此HTML元素的加入到面板body中去。 该部分的内容又比#html HTML的显示位置而居后,所以render事件触发的时刻document还没有所说的HTML内容。
42、collapsedCls : String
当面板闭合时,面板元素的CSS样式类 (默认为 'x-panel-collapsed')。
43、maskDisabled : Boolean
True表示为当面板不可用时进行遮罩(默认为true)。当面板禁用时,总是会告知下面的元素亦要禁用,但遮罩是另外一种方式同样达到禁用的效果。
渲染该组件为禁用状态的(默认为false)。
41、autoHeight : Boolean
True表示为使用height:'auto',false表示为使用固定高度(缺省为false)。注意:尽管许多组件都会继承该配置选项,但是不是全部的'auto' height都有效。 autoHeight:true的设定表示会依照元素内容自适应大小,Ext就不会过问高度的问题。
投影偏移的象素值(默认为4)。注意此项只当floating = true时有效。
34、shim : Boolean
False表示为禁止用iframe填充,有些浏览器可能需要设置(默认为true)。 注意此项只当floating = true时有效
35、html : String/Object
该属性也可以是创建那个yer对象所用的配置项对象。
32、shadow : Boolean/String
True 表示为(或一个有效Ext.Shadow#mode值)在面板后显示投影效果(默认为'sides'四边)。 注意此项只当floating = true时有效。
33、shadowOffset : Number
8、animCollapse : Boolean
True 表示为面板闭合过程附有动画效果(默认为true,在类 Ext.Fx 可用的情况下)。
9、bodyCfg : Object
构成面板#body元素的Ext.DomHelper DomHelper配置对象。
这可能会对body元素采用另外一套的结构。例如使用<center> 元素就代表将其中内容都居中显示。
4、itemCls : String
关于容器的表单项元素的额外的CSS样式(默认为"",如容器的itemCls有设置的话就用那个值)。由于该样式是作用于整个条目容器的,这就会对在内的表单字段、label元素(若有指定)或其他元素只要属于条目内的元素都有效。此组件只有在Ext.form.FormLayout FormLayout布局管理器控制的容器下渲染才有用。
22、bodyBorder : Boolean
True表示为显示出面板body元素的边框,false则隐藏(缺省为true),只有#border == true时有效。若border == true and bodyBorder == false,边框则为1px宽,可指定整个body元素的内置外观。
18、buttons : Array
在面板底部加入按钮,Ext.Button配置的数组。
19、autoLoad : Object/String/Function
一个特定的url反馈到Updater的Ext.Updater#update方法。若autoLoad非null,面板会尝试在渲染后立即加载内容。同时该面板#body元素的默认URL属性就是这URL,所以可随时调用Ext.Element#refresh refresh的方法。
39、tabTip : String
tooltip的innerHTML字符串(也可以html标签),当鼠标移至tab时会显示。 这时Ext.Panel充当的角色是 Ext.TabPanel某一子面板。记得Ext.QuickTips.init()必须初始化好。
40、disabled : Boolean
13、tbar : Object/Array
面板顶部的工具条。此项可以是Ext.Toolbar的实例、工具条的配置对象,或由按钮配置项对象构成的数组,以加入到工具条中。注意,此项属性渲染过后就不可用了,应使用#getTopToolbar的方法代替。
14、bbar : Object/Array
20、frame : Boolean
True表示为面板的边框外框可自定义的,false表示为边框可1px的点线(默认为false)。
21、border : Boolean
True表示为显示出面板body元素的边框,false则隐藏(缺省为true),默认下,边框是一套2px宽的内边框,但可在#bodyBorder中进一步设置
27、toolTemplate : Ext.Template/Ext.XTemplate
位于#header中的tools其模板是什么。默认是:
28、hideCollapseTool : Boolean
True表示为不出展开/收缩的轮换按钮,当#collapsible = true,false就显示(默认为false)。
23、bodyStyle : String/Object/Function
制定body元素的CSS样式。格式形如Ext.Element#applyStyles(缺省为null)。
24、iconCls : String
一个能提供背景图片的CSS样式类,用于面板头部的图标:(默认为'')。
37、keys : Object/Array
KeyMap的配置项对象(格式形如:Ext.KeyMap#addBinding)。可用于将key分配到此面板(缺省为null)。
38、draggable : Boolean
虽然Ext.Panel.DD是一个内部类并未归档的,但亦可自定义拖放(drag/drop)的实现,具体做法是传入一个Ext.Panel.DD的配置代替true值。它是Ext.dd.DragSource的子类,所以可在实现Ext.dd.DragDrop的接口方法的过程中加入具体行为:
一段HTML片段,或Ext.DomHelper DomHelper配置项作为面板body内容(默认为 '')。面板的afterRender方法负责HTML内容的加入这一过程
,所以render事件触发的时刻document还没有所说的HTML内容。该部分的内容又比#contentEl的显示位置而居前。
2、checkboxName : String
分配到fieldset的checkbox的名称,在#checkboxToggle = true的情况有效。(默认为'[checkbox id]-checkbox')。
3、labelWidth : Number
标签的宽度,该属性会影响下级的子容器。
25、collapsible : Boolean
True表示为面板是可收缩的,并自动渲染一个展开/收缩的轮换按钮在头部工具条。 false表示为保持面板为一个静止的尺寸(缺省为false)
26、tools : Array
一个按钮配置组成的数组,加入到头部的工具条区域。 渲染过程中,每一项工具都保存为Ext.Element Element对象,都集中保存在属性tools.<tool-type>之中。
44、headerAsText : Boolean
True表示为显示面板头部的标题(默认为 true)。
类全称: Ext.form.FieldSet
继承自于: Ext.Panel
针对某一组字段的标准容器。
配置项
1、checkboxToggle : Mixed
True表示在lengend标签之前fieldset的范围内渲染一个checkbox,或者送入一个DomHelper的配置对象制定 checkbox(默认为false)。选择该checkbox会为展开、收起该面板服务。
10、headerCfg : Object
面板#header元素的结构,符合Ext.DomHelper DomHelper配置的格式。
11、footerCfg : Object
面板#footer元素的结构,符合Ext.DomHelper DomHelper配置的格式。
12、applyTo : Mixed
29、titleCollapse : Boolean
True表示为允许单击头部区域任何一个位置都可收缩面板(当#collapsible = true)反之只允许单击工具按钮(默认为false)。
30、autoScroll : Boolean
True表示为在面板body元素上,设置overflow:'auto'和出现滚动条false表示为裁剪所有溢出的内容(默认为false)。
5、baseCls : String
作用在面板元素上的CSS样式类 (默认为 'x-panel')。
6、layout : String
7、此容器所使用的布局类型。如不指定,则使用缺省的yout.ContainerLayout类型。当中有效的值可以是:accordion、anchor、border、cavd、column、fit、form和table。针对所选择布局类型,可指定#layoutConfig进一步配置。
16、footer : Boolean
True表示为显式建立底部元素,false则是跳过创建。缺省下,就算不声明创建底部,若有一个或一个以上的按钮加入到面板的话,也创建底部,不指定按钮就不会生成。