EXTjs组件
- 格式:doc
- 大小:214.00 KB
- 文档页数:14
目录Ext框架之button (2)Extjs buttons 的用法: (2)button的配置: (3)常用的方法: (4)Extjs框架之window组件 (6)属性: (6)方法 (6)事件 (6)应用举例 (6)Ext框架之buttonExtjs buttons 的用法:Ext.QuickTips.init();var buttonName = new Ext.Button({id:"buttonName",text:"Button组件基本用法",tooltip:"提示信息:Button组件基本用法",//提示信息,如果需要显示提示信息,需要使用Ext.QuickTips.init();tooltipType:"title", //定义显示提示信息的类型,有qtip和title两种方式,默认是qtiptype:"button", //按钮类型:可以是submit, reset or button 默认是buttonautoShow:true, //默认false,自动显示Array hidden:false, //默认false,是否隐藏hideMode:"offsets", //隐藏方式,默认display,可以取值:display,offsets,visibilitycls:"cssButton", //样式定义,默认""disabled:false, //是否可用,默认falsedisabledClass:"", //默认x-item-disabledenableToggle:true, //默认falsepressed:false, //设置按钮是否已经被按下,默认是falsehtml:"Ext",//默认""handleMouseEvents:true, //默认true,如果为false,那么mouseoutmouseover 就不能被触发//x:number,y:number,在容器中的x,y 坐标handler:function(){Ext.Msg.alert('提示消息框','测试Button 组件:handler 事件!');},//添加事件listeners:{//添加监听事件 可以结合handler 测试这两个事件哪个最先执行"click":function(){Ext.Msg.alert('提示消息框','测试Button 组件:listeners 事件!');Ext.getCmp("buttonName").hide();//隐藏按钮}},cls:"x-btn-text-icon",//添加图标前需要设置该属性icon:"house.gif", //图标的地址//plugins : Object/Array 扩展插件时使用repeat:false, //默认false ,如果为true,需要设置mouseover 事件renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID}); button 的配置:1. id:"buttonName",2. text:"Button 组件基本用法",3. tooltip:"提示信息:Button 组件基本用法", //提示信息,如果需要显示提示信息,需要使用Ext.QuickTips.init();4. ooltipType:"title", //定义显示提示信息的类型,有qtip 和title 两种方式,默认是qtip5. ype:"button", //按钮类型:可以是submit, reset or button 默认是button6. autoShow:true, //默认false,自动显示7. hidden:false, //默认false ,是否隐藏8. hideMode:"offsets", //隐藏方式,默认display,可以取值:display ,offsets,visibility9. cls:"cssButton", //样式定义,默认""10. disabled:false, //是否可用,默认false11. disabledClass:"", //默认x-item-disabled12. enableToggle:true, //默认false13. pressed:false, //设置按钮是否已经被按下,默认是false14. html:"Ext",//默认""15. handleMouseEvents:true, //默认true,如果为false,那么mouseoutmouseover就不能被触发16. x:number,y:number,在容器中的x,y坐标17. handler:function(){Ext.Msg.alert('提示消息框','测试Button组件:handler事件!');},//添加事件18. listeners:{//添加监听事件可以结合handler测试这两个事件哪个最先执行"click":function(){Ext.Msg.alert('提示消息框','测试Button组件:listeners事件!');Ext.getCmp("buttonName").hide();//隐藏按钮}},19. cls:"x-btn-text-icon",//添加图标前需要设置该属性20. icon:"house.gif", //图标的地址21. plugins : Object/Array 扩展插件时使用22. repeat:false, //默认false ,如果为true,需要设置mouseover事件23. renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID常用的方法:1. enable();激活按钮2. disable();禁用按钮3. destroy();消灭按钮4. focus();按钮获取焦点5. getText();获取按钮上的文本6. hide();隐藏按钮7. show();显示按钮8. setText( String text );设置按钮上的文本9. setVisible( Boolean visible );设置按钮是否隐藏10. buttonName.purgeListeners();//使用该方法,意思是清除所有的监听事件,所以当执行该句后就不会再执行listeners的click事件了。
【ExtJS】关于⾃定义组件(⼀)⼀、⽬的: ExtJS中提供了下拉⽇期选择控件Ext.form.field.Date与下拉时间选择控件Ext.form.field.Time。
不过没有⼀个在选择⽇期时选择时间的控件datetimefield。
⽬的就是运⽤⾃定义组件的⽅法,来扩展下拉⽇期选择控件Ext.form.field.Date,在下拉框中添加时间选择的组件。
⽬标效果:⼆、⼀些知识的梳理: 当⾃定义创建⼀个新类时,最好根据需要继承⼀个功能相近的基类,这是因为Ext JS 提供的⾃动化⽣命周期管理将会被合适的布局管理器管理并且在从容器中移除时会⾃动销毁。
这样很简单就能写⼀个新的组件类,并且它能够在组件层次结构中占有⼀席之地,⽽不是⼀个包含Ext JS 组件的新类,还必须在外部对它进⾏渲染和管理。
接下来有两个知识点需要弄清楚: 1、模版Template和XTemplate: 模板就是按预前给定的模样⽣产出来。
这个预前给定的模样就是模板。
1.1 Ext.Template: 代表⼀个HTML⽚段模板。
基本格式: {name[:][format][(params)]} 其中,name为传⼊对象的属性名称,format为调⽤的格式函数及参数(可选)。
格式函数有: ellipsis(length) – 对⼤于指定长度部分的字符串,进⾏裁剪,增加省略号(“…”)的显⽰。
适⽤于只显⽰前N位的字符,然后提供详细页⾯的场合。
undef -检查⼀个值是否为underfined,如果是的转换为空值 htmlEncode – 转换(&, <, >, and ‘) 字符 trim – 对⼀段⽂本的前后多余的空格裁剪 substr(start, length) – 返回⼀个从指定位置开始的指定长度的⼦字符串。
lowercase – 返回⼀个字符串,该字符串中的字母被转换为⼩写字母。
uppercase – 返回⼀个字符串,该字符串中的字母被转换为⼤写字母。
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:输入值是否严格为待选列表中存在的值。
ExtJS自定义组件有时候需要自定义组件使得Web程序更加丰富,ExtJS也提供了自定义组件的功能,主要通过Ext.define来实现。
下面先新建一个MyPanel.html文件,其内容如下:<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01//EN"><html><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8; user-scalable=no"><title>自定义Panel</title><link rel="stylesheet" type="text/css"href="resources/css/ext-all.css"/><scripttype="text/javascript"src="bootstrap.js"></script><script type="text/javascript"src="MyPanel.js"></script></head><body><div id="myDiv"width="100%" height="100%" /></body></html>然后新建一个MyPanel.js和XZYPanel.js文件,自定义的组件名称为XZYPanel,XZYPanel.js 文件的内容如下:Ext.define('XZY.XZYPanel',{extend:'Ext.panel.Panel', //继承的组件alias:'widget.mypanel',requires: ['Ext.window.MessageBox'],title:'这是自定义的组件',html:'你好,这是来自于自定义的组件!<br/>这是显示的内容。
组件每个ExtJS应用程序都是由一或多个称为组件(components)的部件(widgets)组成的.所有的组件都是ponent的子类,ponent包含自动化生命周期管理的功能,如创建、渲染、尺寸控制、定位和销毁等,因此所有组件都自动拥有这些功能。
ExtJS提供了非常多可直接使用的组件,并且从这些组件继承并扩展自己的自定义组件也是很容易的一件事情。
组件层次结构容器(Container)是一种可以包含其他组件的特殊组件。
一个典型的应用程序是由许多按树状机构嵌套在一起的组件组成的,称之为组件层次结构。
容器负责管理子组件的生命周期,包括子组件的创建、渲染、尺寸控制、定位和销毁。
一个典型的应用程序组件层次结构一般使用Viewport作为顶级容器,它的子元素可以包含其他嵌套的容器或者非容器组件:容器的items属性配置用来添加子组件。
以下这个例子使用Ext.create创建了两个Panel,然后将这两个Panel作为子组件添加到一个Viewport中:容器使用布局管理器(LayoutManagers)来管理容器中子组件的尺寸和定位。
XType(组件类型)和延迟实例化每个组件都有一个用来表示类型的名字,称为xtype。
例如,组件Ext.panel.Panel的xtype为'panel'。
上面那个例子展示了如何添加已经创建好的组件到容器中。
如果在容器的子元素(items)配置中,为子元素指定xtype,子元素不会马上实例化,而是由容器决定子元素何时该实例化。
例如:一个使用到TabPanel(选项卡)的应用程序,选项卡的每一tab页只有在用户单击的时候才会去渲染。
下面的示例代码中每个tab页都会监听各自的渲染完成(rendered,在渲染结束后触发)事件,在渲染后弹出提示。
运行这个示例马上会弹出一个提示,那是因为运行后默认tab页被渲染并立即呈现在容器中了。
第二tab页的提示不会弹出,只有你单击了第二页,它才会实例化并呈现。
ExtJs 2.3常用组件样式修改工具栏样式修改在ExtJS中,工具栏对应的类为:Ext.Toolbar。
Ext.Toolbar类样式在ext2\resources\css\toolbar.css文件中定义。
在Ext.Toolbar类中提供了供开发人员修改工具栏样式的熟悉:1、cls : String功能:使用该属性可以为Ext.Toolbar指定自定义的CSS样式。
示例代码:<style type="text/css">.button1{background-image:url(images/homePage.gif)!important;}.button2{background-image:url(images/open.gif)!important;}.button3{background-image:url(images/buy.gif)!important;}.myToolbar{border-color:#6080ff;border-style:solid;border-width:003px0;display:marker;padding:5px;background:#d0def0url(../extjs2/resources/images/vista/toolbar/gray-bg.gif)repeat-xtopleft;position:relative;zoom:1;}</style><script type="text/javascript">Ext.onReady(function(){var toolBar = new Ext.Toolbar({ //创建工具栏applyTo:'ToolBar',width:300,cls:'myToolbar'});toolBar.addButton([ //向工具栏中添加按钮{text:'主页', //按钮上显示的文字handler:onButtonClick, //单击按钮的处理函数iconCls:'button1'//在按钮上显示的图标},{text:'打开',handler:onButtonClick,iconCls:'button2'},{text:'购买',handler:onButtonClick,iconCls:'button3'}]);//单击按钮时调用的处理函数function onButtonClick(btn){alert(btn.text); //取得按钮上的文字}});</script><div id="ToolBar"></div>运行效果如下图所示:菜单样式修改Ext.menu.Item样式修改:1、activeClass : String功能:当鼠标经过时,发生样式改变。
ext.js用法-回复ext.js是一个用于构建用户界面的JavaScript框架,它提供了丰富的组件和工具,可以帮助开发人员快速创建功能强大且交互性强的Web应用程序。
本文将一步一步回答有关ext.js的用法及其相关主题。
1. 什么是ext.js?ext.js是一个开源的JavaScript框架,由Sencha公司开发。
它基于MVC (模型-视图-控制器)架构和面向对象编程的思想,并专注于提供丰富的用户界面组件。
ext.js提供了大量的易于使用的API,可以帮助开发人员快速构建现代化的Web应用程序。
2. 安装ext.js要使用ext.js,首先需要下载它的开发版本。
可以从官方网站(3. 创建组件ext.js提供了各种各样的用户界面组件,例如按钮、表格、表单、菜单等,开发人员可以使用这些组件来构建功能强大的Web应用程序。
要创建一个组件,首先需要定义一个扩展了相应基类的JavaScript类。
例如,要创建一个按钮组件,可以使用Ext.Button类来定义一个新的JavaScript类:javascriptExt.define('MyApp.view.Button', {extend: 'Ext.Button',text: 'Click me',handler: function() {alert('Button clicked!');}});上面的代码创建了一个名为`MyApp.view.Button`的新类,该类扩展了`Ext.Button`基类。
在类的定义中,我们可以指定各种属性,例如按钮的文本和点击事件的处理函数。
4. 渲染组件在创建完组件类后,我们需要将它渲染到页面上。
对于按钮组件,可以使用`Ext.create`方法来创建实例,并将它添加到页面上的某个元素中:javascriptvar button = Ext.create('MyApp.view.Button');button.render('myContainer');上面的代码创建了一个按钮实例,并将它渲染到id为`myContainer`的元素中。
子组件通过容器的items加入到容器中,下面这个例子通过Ext.create方法创建了两var childPanel1 = Ext.create('Ext.panel.Panel', {title: 'Child Panel 1',html: 'A Panel'});var childPanel2 = Ext.create('Ext.panel.Panel', {title: 'Child Panel 2',html: 'Another Panel'});Ext.create('Ext.container.Viewport', {items: [ childPanel1, childPanel2 ]});容器通过“布局管理器(Layout Manager)”管理子组件的尺寸和位置。
关于布局和容器的详细内容可以查看《ExtJS 4 布局和容器》XTypes and Lazy Instantiation xtype和延迟加载每个组件都有⼀一个代称叫做xtype,例如Ext.panel.Panel的xtype是panel。
所有组件的xtype在API Docs for Component中有列出。
上面那个例子说明了如何添加已经初始化的组件到⼀一个容器中。
在大的应用中,这种方式是不可行的,因为这种方法需要每个组件都是初始化过的,但是大的应用中,由于使用的方式有些组件可能根本没有被用到(比如有100个页面的应用,⼀一个用户登录进来只操作了两个页面,这时把其他98个页面的组件全部初始化是不合理的),例如⼀一个用到TabPanel的应用,TabPanel的每个tab只当用户点击它的时候再渲染即可。
这就是引入xtype机制的原因,有了xtype可以让⼀一个容器的子组件事先定义好,到真正需要的时候再初始化。
ExtJS 4 官方指南翻译:组件ComponentsExtJS程序由不同的器件所组成,器件也称作“组件”。
所有组件皆是ponent其子类,目的在于能够参与生存周期的自动化管理,包括实例化、渲染、大小调整与定位、销毁的问题。
ExtJS不但直接提供了一个广阔且实用的组件模型,而且使得任意组件都可以轻松地扩展出新的组件。
An Ext JS application's UI is made up of one or many widgets called Component s. All Components are subclasses of the ponent class which allows them to participate in automated lifecycle management including instantiation, rendering, sizing and positioning, and destruction. Ext JS provides a wide range of useful Components out of the box, and any Component can easily be extended to create a customized Component.1 组件层次The Component Hierarchy容器是组件的一种特殊类型,用于承载其他组件之用。
一个典型的应用程序是由若干嵌套的组件而成,这有点像树状的结构。
容器负责管理子组件的生存周期,包括实例化、渲染、大小调整与定位、销毁的问题。
一个典型的组件层次以“视口Viewport ”为顶点,然后其他的容器或者组件嵌套于内:A Container is a special type of Component that can contain other Components. A typical application is made up of many nested Components in a tree-like structure that is referred to as the Component hierarchy. Containers are responsible for managing the Component lifecycle of their children, which includes creation, rendering, sizing and positioning, and destruction. A typical application's Component hierarchy starts with a Viewport at the top, which has other Containers and/or Components nested within it:可以通过容器的items 配置项来添加容器的子组件。
extjs基本控件1.Ext xtype类型Ext xtype类型xtypeClass------------- ------------------box Ext.BoxCom ponen t 具有边框属性的组件button Ext.Button按钮colorp alett e Ext.ColorP alett e 调色板compon ent pon ent组件contai ner Ext.Contai ner容器cycle Ext.CycleB uttondatavi ew Ext.DataVi ew 数据显示视图datepi cker Ext.DatePi cker日期选择面板editor Ext.Editor编辑器editor grid Ext.grid.Editor GridP anel可编辑的表格grid Ext.grid.GridPa nel 表格paging Ext.Paging Toolb ar 工具栏中的间隔panelExt.Panel面板progre ss Ext.Progre ssBar进度条splitb utton Ext.SplitB utton可分裂的按钮tabpan el Ext.TabPan el选项面板treepa nel Ext.tree.TreePa nel 树viewpo rt Ext.ViewPo rt 视图window Ext.Window窗口工具栏组件有---------------------------------------toolba r Ext.Toolba r工具栏tbbutt on Ext.Toolba r.Button按钮tbfill Ext.Toolba r.Fill文件tbitem Ext.Toolba r.Item工具条项目tbsepa rator Ext.Toolba r.Separa tor工具栏分隔符tbspac er Ext.Toolba r.Spacer工具栏空白tbspli t Ext.Toolba r.SplitB utton工具栏分隔按钮tbtext Ext.Toolba r.TextIt em工具栏文本项表单及字段组件包含:---------------------------------------form Ext.FormPa nel Form面板checkb ox Ext.form.Checkb ox checkb ox录入框comboboB ox combo选择项datefi eld Ext.form.DateFi eld日期选择项fieldExt.form.Field表单字段fields et Ext.form.FieldS et表单字段组hidden Ext.form.Hidden表单隐藏域htmled itor Ext.form.HtmlEd itorhtml编辑器number field Ext.form.Number Field数字编辑器radio Ext.form.Radio单选按钮textar ea Ext.form.TextAr ea区域文本框textfi eld Ext.form.TextFi eld表单文本框timefi eld Ext.form.TimeFi eld时间录入项trigge r Ext.form.Trigge rFiel d触发录入项如果要使输入域为密码类型可以使用inputT ype: 'passwo rd'如果:{xtype:'textfi eld',inputT ype: 'passwo rd',fieldL abel:'密码',name: 'PASSWO RD',allowB lank:false,anchor:'95%'}2.Ext.form.TextFi eld组件//这里是把Te xtFie ld很重要的属性列出来实际在应用的时候不需要将每个属性都列出也许只需要一个属性就够了。
Extjs表单组件及属性Extjs表单组件及属性Ext.form.Action配置项:success:执行成功后回调的函数,包括两个参数:form和actionfailure:执行失败后回调的函数,包括两个参数:form和action method:表单的提交方式,有效值包括GET、P OS Tparams:传递到请求中的参数url:动作提交的路径waitMsg:动作执行时显示的等待信息属性:Action.CL IE NT_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属性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和action clientValidation:是否客户端验证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 ):持久化表单数据到记录集中Ext.form.FormPanel配置项:items:一个元素或元素数组buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为centerlabelWidth:表单标签的宽度labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为leftlabelSeparator:字段标签与字段之间的分隔符,默认为':'minButtonWidth:按钮的最小宽度,默认为75方法:getForm() : Ext.form.BasicFormload( Object options )startMonitoring()stopMonitoring()Ext.form.Field配置项:name:字段名value:字段的初始化值disabled:字段是否不可用,默认为falsefieldLabel:字段标签说明hideLabel:隐藏字段标签,默认为falselabelSeparator:字段标签与字段之间的分隔符,默认为':'labelStyle:字段标签样式inputType:默认为textinvalidClass:默认为x-form-invalidinvalidText:字段非法文本提示msgTarget:错误信息显示的位置,默认为qtipqtip:显示一个浮动的提示信息title:显示一个浏览器的浮动提示信息under:在字段下方显示一个提示信息side:在字段右边显示一个提示信息readOnly:字段是否只读,默认为false validateOnBlur:字段在失去焦点时被验证,默认为true 方法:clearInvalid():getRawValue()setRawValue( Mixed value )getValue()setValue( Mixed value )isDirty():字段值在装载后是否被修改过isValid( Boolean preventMark ):当前字段值是否合法markInvalid( [String msg] )validate()reset()bel配置项:html:text:Ext.form.T extField配置项:allowBlank:是否允许为空,默认为trueblankT ext:空验证失败后显示的提示信息emptyT ext:在一个空字段中默认显示的信息grow:字段是否自动伸展和收缩,默认为falsegrowMin:收缩的最小宽度growMax:伸展的最大宽度inputType:字段类型:默认为textmaskRe:用于过滤不匹配字符输入的正则表达式maxLength:字段允许输入的最大长度maxLengthT ext:最大长度验证失败后显示的提示信息minLength:字段允许输入的最小长度minLengthText:最小长度验证失败后显示的提示信息regex:正则表达式regexText:正则表达式验证失败后显示的提示信息vtype:验证类型的名字alpha:限制只能输入字母alphanum:限制只能输入字母和数字emailurlvtypeText:验证失败时的提示信息validator:自定义验证函数selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为falseExt.form.T extArea配置项:preventScrollbars:是否禁止出现滚动条,默认为falseExt.form.NumberField配置项:allowDecimals:是否允许输入小数,默认为trueallowNegative:是否允许输入负数,默认为truebaseChars:输入的有效数字集合,默认为'0123456789'decimalPrecision:数字的精度,默认保留小数点后2位decimalSeparator:十进制分隔符,默认为'.'maxValue:允许输入的最大数值maxText:超过最大值之后的提示信息minValue:允许输入的最小数值minT ext:超过最小值之后的提示信息nanText:输入非有效数值之后的提示信息Ext.form.Checkbox配置项:boxLabel:复选框的文字描述checked:复选框是否被选择,默认为falsehandler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checkedinputValue:方法:getValue():返回复选框的checked状态setValue( Boolean/String checked ):Ext.form.CheckboxGroup配置项:allowBlank:是否允许不选择,默认为trueblankT ext:columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)items:对象数组vertical:是否垂直方向显示对象,默认为falseExt.form.Radio方法:getGroupValue():setValue( value {String/Boolean} ):Ext.form.RadioGroup配置项:allowBlank:blankT ext:boBox配置项:displayField:被显示在下拉框中的字段名editable:是否可编辑,默认为trueforceSelection:输入值是否严格为待选列表中存在的值。
ExtJS关于组件Component⽣命周期extjs组件⽣命周期⼤体分为3个阶段:初始化、渲染、销毁。
第⼀阶段:初始化 初始化⼯作开始于组件的诞⽣,所有必须的配置设定、事件注册、预渲染处理等都在此时进⾏。
1、应⽤组件的配置: 当初始化⼀个组件的实例时,传递的组件配置对象包含了希望让组件拥有的所有功能,这些都是在ponent基类的前⼏⾏代码完成的。
2、注册事件: 诸如enable/disable,show,hide,render,destory,state restore,state save等等事件,是所有继承于ponent的组件都会默认拥有的基本事件,它们将会在执⾏某些⾏为之前或之后被触发。
3、ComponentMgr注册组件实例: 在这⾥,每⼀个组件的实例都会⽣成⼀个字符串作为其ID值,供Ext.Cmp()⽅法来获得该实例的引⽤。
在实例的配置中,可以通过配置id值给其传递ID 值,不过如果设置了同样的ID值,Ext.Cmp()⽅法找到的实例引⽤将会是最后⼀个设置了该ID的组件。
也就是说,最后设置的ID值将会覆盖前⾯的所有相同ID 值。
4、调⽤initComponent()⽅法: 关于initComponent()⽅法,在直接或间接继承了ponent基类的组件中,该⽅法会在Component的构造函数constructor中被调⽤。
这⾥来看看其回调顺序: Ext.Window ==> Ext.Panel ==> Ext.Container ==> Ext.BoxComponent ==> ponent 在⾃定义组件时,⼀般都会覆盖⽗类的initComponent()⽅法,并且在最后⽤this.callParent()来回调⽗类函数,则在实例化组件的过程中,container的initComponent⽅法⾥的this已经变成了该实例对象本⾝。
如果不这么做,譬如直接将itsms写⼊配置中,则在内部调⽤container的initComponent⽅法时,this所指的对象将不是⽬标实例化的对象。
Extjs6编写⾃⼰的富⽂本组件(以ueditor为基础)⼀、下载ueditor地址:⼆、将ueitor资源引⼊⾃⼰的项⽬在index.html中引⼊ueditor.config.js、ueditor.all.js、语⾔包(例如中⽂)zh-cn.js三、编写Ext富⽂本组件⾸先想好⾃⼰的组件中是否还需要包含Ext的组件,本组件不需要,所以继承ponent进⾏开发根据ueditor⽂档,ueditor是script标签进⾏初始化,所以将此组件标记为scriptautoEl:{tag:'script',type:'text/plain'},初始化ueditor,组件的ue属性接收onRender:function(){var me = this;me.callParent(arguments);//初始化Ueditorme.ue=UE.getEditor(me.getId(),Ext.apply({//此处可以添加ueidot默认的配置},me.ueditorConfig));//当Ueditor 内容改变时,传回viewModel,实现双向绑定me.ue.on("contentChange",function(){me.publishState("value",me.ue.getContent());me.isSet=true;})},实现数据的双向绑定(set和get)set:setValue:function(value){var me=this;//避免Ueditor内容更改时再⼜重新赋值if(me.isSet){me.isSet=false;}else{me.ue.ready(function(){me.ue.setContent(value, false);});}},get:ueitor内容改变时,应该实时传递给它绑定的model,所以此处使⽤ueitor的contentChange事件,并⽤publishState⽅法更改model实现组件的销毁ponent关闭时,会调⽤onDestroy⽅法,所以我们重新此⽅法,在组件关闭的同时销毁ueditor onDestroy:function(){var me = this;me.callParent(arguments);if (me.rendered) {try {me.ue.destroy();delete me.ue;} catch (e) { }}}封装ueditor常⽤⽅法//给Ueditor赋值setValue:function(value){var me=this;//避免Ueditor内容更改时再⼜重新赋值if(me.isSet){me.isSet=false;}else{me.ue.ready(function(){me.ue.setContent(value, false);});}},//获取内容getValue:function(){var me = this;return me.ue.getContent();},//获得纯⽂本getContentText:function(){var me=this;return me.ue.getContentTxt();},//在内容最后添加内容addContent:function(value){var me=this;me.ue.setContent(value,true);},//指定位置追加内容insertHtml:function(value){var me=this;me.ue.execCommand('insertHtml', value);},//注销toDestroy:function(){var me=this;me.ue.destroy();},组件的具体使⽤(注意必须给value绑定)xtype:'ueditor',height:500,width:500,bind:{value:'{XXXXx}'}完整代码//author status404 v1.0Ext.define("webapp.view.ueditor.Ueditor",{extend:"ponent",alias: 'widget.ueditor',width:500,height:900,autoEl:{tag:'script',type:'text/plain'},initComponent: function () {var me = this;me.callParent(arguments);},onRender:function(){var me = this;me.callParent(arguments);//初始化Ueditorme.ue=UE.getEditor(me.getId(),Ext.apply({//此处可以添加ueidot默认的配置},me.ueditorConfig));//当Ueditor 内容改变时,传回viewModel,实现双向绑定 me.ue.on("contentChange",function(){me.publishState("value",me.ue.getContent());me.isSet=true;})},//给Ueditor赋值setValue:function(value){var me=this;//避免Ueditor内容更改时再⼜重新赋值if(me.isSet){me.isSet=false;}else{me.ue.ready(function(){me.ue.setContent(value, false);});}},//获取内容getValue:function(){var me = this;return me.ue.getContent();},//获得纯⽂本getContentText:function(){var me=this;return me.ue.getContentTxt();},//在内容最后添加内容addContent:function(value){var me=this;me.ue.setContent(value,true);},//指定位置追加内容insertHtml:function(value){var me=this;me.ue.execCommand('insertHtml', value);},//注销toDestroy:function(){var me=this;me.ue.destroy();},//组件关闭时,销毁Ueditor实例 onDestroy:function(){var me = this;me.callParent(arguments);if (me.rendered) {try {me.ue.destroy();delete me.ue;} catch (e) { }}}});。
组件
每个ExtJS应用程序都是由一或多个称为组件(components)的部件(widgets)组成的.所有的组件都是ponent的子类,ponent包含自动化生命周期管理的功能,如创建、渲染、尺寸控制、定位和销毁等,因此所有组件都自动拥有这些功能。
ExtJS提供了非常多可直接使用的组件,并且从这些组件继承并扩展自己的自定义组件也是很容易的一件事情。
组件层次结构
容器(Container)是一种可以包含其他组件的特殊组件。
一个典型的应用程序是由许多按树状机构嵌套在一起的组件组成的,称之为组件层次结构。
容器负责管理子组件的生命周期,包括子组件的创建、渲染、尺寸控制、定位和销毁。
一个典型的应用程序组件层次结构一般使用Viewport作为顶级容器,它的子元素可以包含其他嵌套的容器或者非容器组件:
容器的items属性配置用来添加子组件。
以下这个例子使用Ext.create创建了两个Panel,然后将这两个Panel作为子组件添加到一个Viewport中:
容器使用布局管理器(LayoutManagers)来管理容器中子组件的尺寸和定位。
XType(组件类型)和延迟实例化
每个组件都有一个用来表示类型的名字,称为xtype。
例如,组件Ext.panel.Panel的xtype为'panel'。
上面那个例子展示了如何添加已经创建好的组件到容器中。
如果在容器的子元素(items)配置中,为子元素指定xtype,子元素不会马上实例化,而是由容器决定子元素何时该实例化。
例如:一个使用到TabPanel(选项卡)的应用程序,选项卡的每一tab页只有在用户单击的时候才会去渲染。
下面的示例代码中每个tab页都会监听各自的渲染完成(rendered,在渲染结束后触发)事件,在渲染后弹出提示。
运行这个示例马上会弹出一个提示,那是因为运行后默认tab页被渲染并立即呈现在容器中了。
第二tab页的提示不会弹出,只有你单击了第二页,它才会实例化并呈现。
这说明了tab页会按需进行实例化和渲染。
显示和隐藏
所有组件都有内建的显示(show)和隐藏(hide)方法。
组件的隐藏方法默认使用css属性“display:none“,但是你可以使用hideMode属性修改隐藏方法的配置:
浮动组件
浮动组件,指的是使用css绝对定位(position:absolute)
让组件脱离浏览器文档流,并且不参与其容器的布局。
一些组件默认就是浮动的,如窗体组件(windows),并且所有组件都可以使用浮动(floating)属性设置为浮动。
上面的代码实例化了一个Panel组件,但并没有马上呈现它。
通常一个组件需要配置一个renderTo(呈现到哪里)属性,或者添加到容器中作为容器的一个子元素,但是如果配置了浮动属性,则不需要这些配置。
浮动组件将在第一次显示(一般是调用show方法)的时候自动添加到body中:
如果你使用浮动组件,以下这些配置需要注意下:draggable shadow alignTo() center()
创建自定义组件
组合和扩展
要创建一个实现自己所需功能的自定义组件,你必须决定你要定义的组件(一般是一个类)是要包含一个组件的实例(组合),还是扩展一个组件(继承)。
建议将自己要实现的功能最相近的现有组件作为基类来扩展(尽量复用已有的功能)。
这是因为如果你继承了现有组件,则你的组件就拥有自动管理生命周期不同阶段行为的功能,如:按需呈现,自定控制尺寸,根据布局管理器(layoutmanager)管理组件定位,从容器中移除时自动销毁等。
使用继承的方式去创建新的组件类比组合的方式更符合组件层次结构的要求,并且可以从类的外部去管理类本身。
子类
Ext的类系统让你可以很容易从现有组件中扩展。
下面这个例子创建一个ponent的子类,但添加任何的扩展功能。
模板方法
Extjs用模版方法模式(Template method pattern)委托到子类,方法的具体行为实现由具体的子类实现.
这意味着在组件的生命周期中,继承链里的每一个类都可以添加自己特定的逻辑。
每个类都实现自己的特定逻辑,同时允许继承链中的其它类继续添加自己的逻辑。
渲染(render)方法即是一个典型的例子。
render是组件(Component)超类中的一个私有方法,抽象组件(AbstractCompnent)负责启动组件生命周期中的呈现阶段。
render不可以重载,但是render会调用onRender方法以允许子类在onRender中添加特定逻辑。
每个onRender方法都必须在添加自己的特定逻辑之前先调用父类的onRender方法。
render方法首先被调用(由布局管理器负责),这个方法不允许重载,并且它是在Ext基类实现的。
render内部调用在当前子类中实现的this.onRender方法。
onRender内部又会调用父类的onRender方法.最终,每个子类中的onRender都添加了自己的功能,并且控制返回给render方法的值。
下面的例子是一个实现了onRender方法的组件子类。
值得注意的是,很多模版方法都拥有一个相应的事件.例如render事件在组件渲染后触发.在子类中,很有必要使用模版方法来执行类生命周期中的各种逻辑,而不是使用事件.因为事件是可以被调用事件的代码暂停,或者被事件处理器停止的。
下面的列表是Component基类中已经实现的模版方法。
具体见附件
选择继承哪个类
考虑到开发效率问题,应该选择一个最佳的类来扩展,并且
要考虑基类能提供哪些已有的功能。
如果你有一堆组件集需要渲染和管理(即你的自定义组件是作为容器),则应尽量从
Ext.Panel类继承.
Panel类:
如果不需要这些功能,则从Panel继承会浪费资源(应该考
虑继承其他更简单的类).
扩展:如果你要创建的组件需要用到头部(header),页脚(footer)和工具条(toolbars),最好从Ext.Panel扩展。
注意:Panel是一个容器,因此要记住使用哪种布局(Layout)来渲染和管理子组件。
继承Ext.Panel类以定义新组件通常是为应用程序高度定
制的,并且通常使用布局配置用于聚合其他组件(一般是其他容
器或者表单域),并且提供操作包含的组件和按钮的方法.
Panel拥有以下模版方法:
ponent
如果你要创建的组件不需要包含其他组件(不是作为容器),也就是说,它只是按你的需要封装了某种形式的HTML,那么,继承ponent以实现自己的组件是最恰当的。
例如,下面这个类是一个包含了一个HTML图片元素的组件,并且允许获取和设置图片的src属性。
并且在图片加载完毕后触发一个load事件:
使用示例:
这个示例只是演示用的。
在真实的开发场景中,应该使用Ext.Img类.
容器
如果你要创建的组件需要包含其他组件(即作为容器),但是你并不需要前面提到的Panel的各种功能,那从
Ext.container.Container继承是最恰当的.使用容器,应该注意用来渲染和管理子组件的布局(Layout)是哪一种.
容器拥有以下模版方法:。