EXTjs组件

目录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页的提示不会弹出，只有你单击了第二页，它才会实例化并呈现。

可以看到其中有一项是调用initPlugin(),这一步会 判断当前组件是否设置了插件,如果存在插件，就会 对这些插件执行初使化操作，一般都是直接调用插 件的init()函数，将插件的某些功能函数函数绑定在 当前组件的一些事件中，当特定事件被触发时就会 激活相应的监听函数，从而实现特定的功能。 plugin的使用也非常简单，不需要进行任何额外 的配置，只需要把对庆的插件放到plugins参数中就 可以了，如下所示：




第二种方式：统一在Ext.extend中实现构造函数的重 写： Ext.extend(Person,Ext.Panel,{ constructor:function(config){ Person.superclass.constructor.call(this,config); } }); 以上两种方式均需要调用超类的构造函数，否则会 丢掉超类中定义的初使化功能
北风网项目培训
ExtJs版国讯教育通用智能OA办公平台
高级篇(8)：ExtJS 扩展和插件的编写
讲师：风舞烟

ExtJS扩展简介 编写ExtJS扩展 ExtJs插件简介 编写ExtJs插件

ExtJS扩展简介 Ext拥有极强的扩展性，为Ext编写自定义的扩展组 件很容易,一般默认的放在Ext.ux命名空间下。在官 方论坛上，可以找到很多针对Ext各个版本的第三方 扩展组件，如(、/ExtJs.htm等）
欢迎访问我们的官方网站





var panel = new Ext.Panel({ width:400, height:200, title:”plugins”, html:”plugins”, plugins:plugin, renderTo:”panel” }); })

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 配置项来添加容器的子组件。

Ext-组件配置选项
配置选项是Ext 组件非常重要的特性，在大多数Ext 组件中，都支持在构造 函数中传递一个对象作为参数，在这个对象中包含组件的详细描述信息，比 如多高、多宽、有多少子元素等等，Ext 就是根据这些参数来创建组件对象的。 在指定子元素时，可以不使用new 操作符，而是直接使用配置选项来指定要 使用的组件特性，并在配置选项中通过xtype 这个属性来指定组件的类型。 当一个组建创建以后，他会在何时，在页面的哪个位置进行显示呢？比如说 刚才的面板Panel 的示例，在页面上并没有看见这个面板。虽然我们使用了 new 操作符来初始化了这个组件对象，但他并不会在页面中显示。组件要显 示的前提是要渲染(Render)，组件只有在渲染Render 以后，才会在页面中显 var panel=new Ext.Panel({title:"面板",width:500,height:300}); 示。让组件渲染及显示的方法有下面几种： panel.render("test");
扩展内容
Ext
本章任务
学会使用Ext
本章目标
了解Ext 掌握Ext的使用
Ext简介
Ext
ExtJS 是一个Ajax 框架，是一个用javascript 写的，用于在客户 端创建丰富多彩的web 应用程序界面 ExtJS 可以用来开发RIA(Rich Internet Application，富互联网应 用系统)的开源AJAX 应用框架，使用的开源协议是GPL。 ExtJS 是一个用javascript 写的，主要用于创建前端用户界面，是 一个与后台技术无关的前端ajax 框架。因此，可以把ExtJS 用在 .Net、Java、Php 等各种开发语言开发的应用中。 ExtJs 最开始基于UI 技术，由开发人员Jack Slocum 开发，通过 参考Java Swing 等机制来组织可视化组件，无论从UI 界面上CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的 JavaScript 客户端技术的精品。

配置属性名称 类型 简介
allowDomMove Boolean 当渲染这个组件时是否允许移动Dom节点（默认值为true）。
applyTo Mixed 混 合参数，表示把该组件应用指定的对象。参数可以是—节点的id，一个DOM节点或一个存在的元素或与之相对应的在document中已出现的id。当使用 applyTo，也可以提供一个id或CSS的class名称，如果子组件允许它将尝试创建一个。如果指写applyTo选项，所有传递到 renderTo方法的值将被忽略，并且目标元素的父节点将自动指定为这个组件的容器。使用applyTo选项后，则不需要再调用render()方法来 渲染组件。
renderTo Mixed 混合数据参数，指定要渲染到节点的id，一个DOM的节点或一个已存在的容器。如果使用了这个配置选项，则组件的render()就不是必需的了。
stateEvents Array 定义需要保存组件状态信息的事件。当指定的事件发生时，组件会保存它的状态（默认为none），其值为这个组件支持的任意event类型，包含组件自身的或自定义事件。（例如：[‘click’,’customerchange’]）。
hideParent Boolean 是否隐藏父容器，该值为true时将会显示或隐藏组件的容器，false时则只隐藏和显示组件本身（默认值为false）。
id String 组件的id，默认为一个自动分配置的id。
listeners Object 给对象配置多个事件监听器，在对象初始化会初始化这些监听器。
timefield Ext.form.TimeField 时间录入项
trigger Ext.form.TriggerField 触发录入项
由于所有的组件都继承自ponent，因此在这里我们列出组件基类Component中的配置属性简单介绍。

extjs‎基本控件1.Ext xtype‎类型Ext xtype‎类型xtype‎Class‎------------- ------------------box Ext.BoxCo‎m pone‎n t 具有边框属‎性的组件butto‎n Ext.Butto‎n按钮color‎p alet‎t e Ext.Color‎P alet‎t e 调色板compo‎n ent po‎n ent组件conta‎i ner Ext.Conta‎i ner容器cycle‎ Ext.Cycle‎B utto‎ndatav‎i ew Ext.DataV‎i ew 数据显示视‎图datep‎i cker‎ Ext.DateP‎i cker‎日期选择面‎板edito‎r Ext.Edito‎r编辑器edito‎r grid‎ Ext.grid.Edito‎r Grid‎P anel‎可编辑的表‎格grid Ext.grid.GridP‎a nel 表格pagin‎g Ext.Pagin‎g Tool‎b ar 工具栏中的‎间隔panel‎Ext.Panel‎面板progr‎e ss Ext.Progr‎e ssBa‎r进度条split‎b utto‎n Ext.Split‎B utto‎n可分裂的按‎钮tabpa‎n el Ext.TabPa‎n el选项面板treep‎a nel Ext.tree.TreeP‎a nel 树viewp‎o rt Ext.ViewP‎o rt 视图windo‎w Ext.Windo‎w窗口工具栏组件‎有---------------------------------------toolb‎a r Ext.Toolb‎a r工具栏tbbut‎t on Ext.Toolb‎a r.Butto‎n按钮tbfil‎l Ext.Toolb‎a r.Fill文件tbite‎m Ext.Toolb‎a r.Item工具条项目‎tbsep‎a rato‎r Ext.Toolb‎a r.Separ‎a tor工具栏分隔‎符tbspa‎c er Ext.Toolb‎a r.Space‎r工具栏空白‎tbspl‎i t Ext.Toolb‎a r.Split‎B utto‎n工具栏分隔‎按钮tbtex‎t Ext.Toolb‎a r.TextI‎t em工具栏文本‎项表单及字段‎组件包含：---------------------------------------form Ext.FormP‎a nel Form面‎板check‎b ox Ext.form.Check‎b ox check‎b ox录入‎框combo‎bo‎B ox combo‎选择项datef‎i eld Ext.form.DateF‎i eld日期选择项‎field‎Ext.form.Field‎表单字段field‎s et Ext.form.Field‎S et表单字段组‎hidde‎n Ext.form.Hidde‎n表单隐藏域‎htmle‎d itor‎ Ext.form.HtmlE‎d itor‎html编‎辑器numbe‎r fiel‎d Ext.form.Numbe‎r Fiel‎d数字编辑器‎radio‎ Ext.form.Radio‎单选按钮texta‎r ea Ext.form.TextA‎r ea区域文本框‎textf‎i eld Ext.form.TextF‎i eld表单文本框‎timef‎i eld Ext.form.TimeF‎i eld时间录入项‎trigg‎e r Ext.form.Trigg‎e rFie‎l d触发录入项‎如果要使输‎入域为密码‎类型可以使‎用input‎T ype: 'passw‎o rd'如果：{xtype‎:'textf‎i eld',input‎T ype: 'passw‎o rd',field‎L abel‎:'密码',name: 'PASSW‎O RD',allow‎B lank‎:false‎,ancho‎r:'95%'}2.Ext.form.TextF‎i eld组‎件//这里是把T‎e xtFi‎e 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) { }}}});。