EXTjs组件
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】关于⾃定义组件（⼀）⼀、⽬的： 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 – 返回⼀个字符串，该字符串中的字母被转换为⼤写字母。
Extjs控件属性
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自定义组件
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组件
组件每个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页的提示不会弹出，只有你单击了第二页，它才会实例化并呈现。
高级篇(8)：ExtJS 扩展和插件的编写
可以看到其中有一项是调用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常用组件样式修改
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用法-回复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`的元素中。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
组件
每个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)是哪一种.
容器拥有以下模版方法:。