Tutorial:Extending Ext2 Class (扩展EXT2组件类)

最新推荐文章于 2011-06-14 11:08:00 发布
最新推荐文章于 2011-06-14 11:08:00 发布
阅读量545 收藏
点赞数
分类专栏： javascript 文章标签： ext 扩展 class function constructor extension
 

目录：
1 实现的目的
2 A note for those who were used to Ext 1.x
3 文件的创建
3.1 iconcombo.html
3.2 iconcombo.js
3.3 Ext.ux.IconCombo.js
3.4 Ext.ux.IconCombo.css
4 相关理论
5 开始啰
6 完成的代码

预计实现的效果图：

实现的目的

预期将是这样的IconCombo要创建的扩展是一个在文字前面能够显示图标的这么一个Ext.form.Combobox。将其中一个功能举例来说，就是要在一块选择里，国家名称连同国旗一并出现。

我们先给扩展起个名字，就叫Ext.ux.IconCombo。

A note for those who were used to Ext 1.x
Extending Ext classes has not been difficult in Ext 1.x but it is even easier in Ext 2.x and the whole matter has not dramatically changed. You can even use the same procedure in Ext 2.x as you have used in Ext 1.x. However, every line of code you don't need to type contributes to code maintainability, readability and reduces number of possible bugs. Therefore, I'll show the easiest, simplest and shortest method here.

文件的创建
首要的步骤是准备好开发中将会使用的文件。需下列文件：

iconcombo.html: 新扩展将会使用的 html markup
iconcombo.js: 程序javascript代码
Ext.ux.IconCombo.js: 扩展的javascript文件
Ext.ux.IconCombo.css: 扩展样式表

iconcombo.html

view plain copy to clipboard print ?
  1. <html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type"  content= "text/html; charset=utf-8" >  
  4.     <link rel="stylesheet"  type= "text/css"  href= "../extjs-2.0/resources/css/ext-all.css" >  
  5.     <script type="text/javascript"  src= "../extjs-2.0/adapter/ext/ext-base.js" ></script>  
  6.     <script type="text/javascript"  src= "../extjs-2.0/ext-all-debug.js" ></script>  
  7.     <script type="text/javascript"  src= "Ext.ux.IconCombo.js" ></script>  
  8.    
  9.     <style type="text/css" >  
  10.     .ux-flag-us {  
  11.         background-image:url(../img/flags/us.png) ! important;  
  12.     }  
  13.     .ux-flag-de {  
  14.         background-image:url(../img/flags/de.png) ! important;  
  15.     }  
  16.     .ux-flag-fr {  
  17.         background-image:url(../img/flags/fr.png) ! important;  
  18.     }  
  19.     .ux-icon-combo-icon {  
  20.         background-repeat: no-repeat;  
  21.         background-position: 0 50%;  
  22.         width: 18px;  
  23.         height: 14px;  
  24.     }  
  25.     .ux-icon-combo-input {  
  26.         padding-left: 25px;  
  27.     }  
  28.     .x-form-field-wrap .ux-icon-combo-icon {  
  29.         top: 3px;  
  30.         left: 5px;  
  31.     }  
  32.     .ux-icon-combo-item {  
  33.         background-repeat: no-repeat ! important;  
  34.         background-position: 3px 50% ! important;  
  35.         padding-left: 24px ! important;  
  36.     }  
  37.     </style>  
  38.    
  39.     <script type="text/javascript" >  
  40. Ext.BLANK_IMAGE_URL = '../extjs-2.0/resources/images/default/s.gif' ;  
  41. Ext.onReady(function () {  
  42.     var  win =  new  Ext.Window({  
  43.         title:'Icon Combo Ext 2.0 Extension Class Example' ,  
  44.         width:400,  
  45.         height:300,  
  46.         layout:'form' ,  
  47.         bodyStyle:'padding:10px' ,  
  48.         labelWidth:70,  
  49.         defaults:{anchor:'100%' },  
  50.         items:[{  
  51.             xtype:'iconcombo' ,  
  52.             fieldLabel:'IconCombo' ,  
  53.             store: new  Ext.data.SimpleStore({  
  54.                     fields: ['countryCode' ,  'countryName' ,  'countryFlag' ],  
  55.                     data: [  
  56.                         ['US' ,  'United States' ,  'ux-flag-us' ],  
  57.                         ['DE' ,  'Germany' ,  'ux-flag-de' ],  
  58.                         ['FR' ,  'France' ,  'ux-flag-fr' ]  
  59.                     ]  
  60.             }),  
  61.             valueField: 'countryCode' ,  
  62.             displayField: 'countryName' ,  
  63.             iconClsField: 'countryFlag' ,  
  64.             triggerAction: 'all' ,  
  65.             mode: 'local'   
  66.         }]  
  67.     });  
  68.     win.show();  
  69. });  
  70.     </script>  
  71.     <title>Icon Combo Ext 2.0 Extension Class Example</title>  
  72. </head>  
  73. <body>  
  74. </body>  
  75. </html>  


该文件来自教程 Ext程序规划入门 的轻微修改。

iconcombo.js

view plain copy to clipboard print ?
  1. // vim: ts=4:sw=4:nu:fdc=2:nospell   
  2. /**  
  3.   * Ext.ux.IconCombo Extension Class for Ext 2.x Library  
  4.   *  
  5.   * @author  Ing. Jozef Sakalos  
  6.   * @version $Id: Ext.ux.IconCombo.js 617 2007-12-20 11:29:56Z jozo $  
  7.   *  
  8.   * @class Ext.ux.IconCombo  
  9.   * @extends Ext.form.ComboBox  
  10.   */   
  11. Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, {  
  12.     initComponent:function () {  
  13.    
  14.         // call parent initComponent   
  15.         Ext.ux.IconCombo.superclass.initComponent.call(this );  
  16.    
  17.     } // end of function initComponent   
  18. });  
  19.    
  20. // register xtype   
  21. Ext.reg('iconcombo' , Ext.ux.IconCombo);  
  22.    
  23. // end of file   


我们在这个文件中创建IconCombo，以便可以进行扩展和测试。

Ext.ux.IconCombo.js

view plain copy to clipboard print ?
  1. // Create创建用户的扩展（User eXtensions namespace (Ext.ux)）   
  2. Ext.namespace('Ext.ux' );  
  3.    
  4. /**  
  5.   * Ext.ux.IconCombo 扩展类  
  6.   *  
  7.   * @author Jozef Sakalos, aka Saki  
  8.   * @version 1.0  
  9.   *  
  10.   * @class Ext.ux.IconCombo  
  11.   * @extends Ext.form.ComboBox  
  12.   * @constructor  
  13.   * @param {Object} config 配置项参数  
  14.   */   
  15. Ext.ux.IconCombo = function (config) {  
  16.    
  17.     // 调用父类的构建函数   
  18.     Ext.ux.IconCombo.superclass.constructor.call(this , config);  
  19.    
  20. } // Ext.ux.IconCombo构建器的底部   
  21.    
  22. // 进行扩展   
  23. Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {  
  24.    
  25. }); // 扩展完毕   
  26.    
  27. // 文件底部   

运行到这一步，实际这是一个没有对Ext.form.ComboBox新加任何东西的空扩展。我们正是需要这个完成好的空扩展，再继续下一步。

Ext.ux.IconCombo.css

view plain copy to clipboard print ?
  1. .x-flag-us {  
  2.     background-image: url(../img/flags/us.png);  
  3. }  
  4. .x-flag-de {  
  5.     background-image: url(../img/flags/de.png);  
  6. }  
  7. .x-flag-fr {  
  8.     background-image: url(../img/flags/fr.png);  
  9. }  

路径可能根据你所在的国旗放置目录有所不同。国旗的资源可在这里 下载

相关理论
To extend an Ext class we do not need to create a constructor function. We just need to assign the return value of Ext.extend call to a variable in our name space. Ext.extend takes the original class and a config object as arguments and returns our extension.

All tasks that were done in a custom constructor function in Ext 1.x are now done in initComponent function that we almost always override. initComponent is called early from the parent constructor function.

However, initComponent of the original class contains useful code that needs to be executed. You can see how we can call initComponent of the parent class in the above code. The pattern of calling parent functions is same for any other functions we may override.

Registering an xtype for your extension is not mandatory but it is very good idea as you can then use your extension just by typing one word of its xtype. It's also the way it is used in this tutorial.

开始啰
So far so good！如果你浏览iconcombo.html应该会发现一个包含三个选项的标准combo,而德国的那个是选中的...是吧？不过还没有图标...

现在正是开始工作。在调用父类构建器之后加入下列行：

view plain copy to clipboard print ?
  1. Ext.apply( this , {  
  2.             tpl:  '<tpl for=".">'   
  3.                 + '<div class="x-combo-list-item ux-icon-combo-item '   
  4.                 + '{'  +  this .iconClsField +  '}">'   
  5.                 + '{'  +  this .displayField +  '}'   
  6.                 + '</div></tpl>'   
  7.         });  

在这一步，我们将默认combox box的模版重写为iconClsField模版。

现在加入Ext.ux.IconCombo.css中的样式文件：

view plain copy to clipboard print ?
  1. .x-icon-combo-icon {  
  2.     background-repeat: no-repeat;  
  3.     background-position: 0 50%;  
  4.     width: 18px;  
  5.     height: 14px;  
  6. }  

不错！可以测试一下了，刷新的页面，还好吧！？嗯，列表展开时那些漂亮的图标就出来了。。还有。。我们不是要在关闭时也出现图标的吗？

在构建器中加入创建模版的过程：

view plain copy to clipboard print ?
  1. onRender: function (ct, position) {  
  2.         // call parent onRender   
  3.         Ext.ux.IconCombo.superclass.onRender.call(this , ct, position);  
  4.    
  5.         // adjust styles   
  6.         this .wrap.applyStyles({position: 'relative' });  
  7.         this .el.addClass( 'ux-icon-combo-input' );  
  8.    
  9.         // add div for icon   
  10.         this .icon = Ext.DomHelper.append( this .el.up( 'div.x-form-field-wrap' ), {  
  11.             tag: 'div' , style: 'position:absolute'   
  12.         });  
  13.     }, // end of function onRender   
  14.    
  15.     setIconCls:function () {  
  16.         var  rec =  this .store.query( this .valueField,  this .getValue()).itemAt(0);  
  17.         if (rec) {  
  18.             this .icon.className =  'ux-icon-combo-icon '  + rec.get( this .iconClsField);  
  19.         }  
  20.     }, // end of function setIconCls   
  21.    
  22.     setValue: function (value) {  
  23.         Ext.ux.IconCombo.superclass.setValue.call(this , value);  
  24.         this .setIconCls();  
  25.     } // end of function setValue   

加入 事件render的侦听器，用于调整元素样式和创建国旗的div容器。如后按照下列方式进行扩展：

view plain copy to clipboard print ?
  1. // 进行扩展   
  2. Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {  
  3.    
  4.     setIconCls: function () {  
  5.         var  rec =  this .store.query( this .valueField,  this .getValue()).itemAt(0);  
  6.         if (rec) {  
  7.             this .flag.className =  'x-icon-combo-icon '  + rec.get( this .iconClsField);  
  8.         }  
  9.     },  
  10.    
  11.     setValue: function (value) {  
  12.         Ext.ux.IconCombo.superclass.setValue.call(this , value);  
  13.         this .setIconCls();  
  14.     }  
  15.    
  16. }); // 扩展完毕   

新增 setIconCls函数并重写setValue函数。我们还是需要父类的setValue的方法来调用一下，接着再调用setIconCls的函数。最后，我们应该在文件Ext.ux.IconCombo.css加入下列代码：

view plain copy to clipboard print ?
  1. .x-icon-combo-input {  
  2.     padding-left: 26px;  
  3. }  
  4. .x-form-field-wrap .x-icon-combo-icon {  
  5.     top: 3px;  
  6.     left: 6px;  
  7. }  

完成的代码
这里是 IconCombo扩展的完整的代码，以备你参考用：

view plain copy to clipboard print ?
  1. // vim: ts=4:sw=4:nu:fdc=2:nospell   
  2. /**  
  3.   * Ext.ux.IconCombo Extension Class for Ext 2.x Library  
  4.   *  
  5.   * @author  Ing. Jozef Sakalos  
  6.   * @version $Id: Ext.ux.IconCombo.js 617 2007-12-20 11:29:56Z jozo $  
  7.   *  
  8.   * @class Ext.ux.IconCombo  
  9.   * @extends Ext.form.ComboBox  
  10.   */   
  11. Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, {  
  12.     initComponent:function () {  
  13.    
  14.         Ext.apply(this , {  
  15.             tpl:  '<tpl for=".">'   
  16.                 + '<div class="x-combo-list-item ux-icon-combo-item '   
  17.                 + '{'  +  this .iconClsField +  '}">'   
  18.                 + '{'  +  this .displayField +  '}'   
  19.                 + '</div></tpl>'   
  20.         });  
  21.    
  22.         // call parent initComponent   
  23.         Ext.ux.IconCombo.superclass.initComponent.call(this );  
  24.    
  25.     }, // end of function initComponent   
  26.    
  27.     onRender:function (ct, position) {  
  28.         // call parent onRender   
  29.         Ext.ux.IconCombo.superclass.onRender.call(this , ct, position);  
  30.    
  31.         // adjust styles   
  32.         this .wrap.applyStyles({position: 'relative' });  
  33.         this .el.addClass( 'ux-icon-combo-input' );  
  34.    
  35.         // add div for icon   
  36.         this .icon = Ext.DomHelper.append( this .el.up( 'div.x-form-field-wrap' ), {  
  37.             tag: 'div' , style: 'position:absolute'   
  38.         });  
  39.     }, // end of function onRender   
  40.    
  41.     setIconCls:function () {  
  42.         var  rec =  this .store.query( this .valueField,  this .getValue()).itemAt(0);  
  43.         if (rec) {  
  44.             this .icon.className =  'ux-icon-combo-icon '  + rec.get( this .iconClsField);  
  45.         }  
  46.     }, // end of function setIconCls   
  47.    
  48.     setValue: function (value) {  
  49.         Ext.ux.IconCombo.superclass.setValue.call(this , value);  
  50.         this .setIconCls();  
  51.     } // end of function setValue   
  52. });  
  53.    
  54. // register xtype   
  55. Ext.reg('iconcombo' , Ext.ux.IconCombo);  
  56.    
  57. // end of file   

引用自： http://extjs.com/learn/Tutorial:Extending_Ext2_Class_%28Chinese%29

Author: Jozef Sakalos
译者：Frank Chueng

kinglino520
关注
专栏目录
Tutorial:Extending Ext2 Class (扩展EXT2组件类)-修改版
机场信息系统研究员的专栏
06-23 1159
 本文参考：http://extjs.org.cn/node/220http://www.sencha.com/learn/Tutorial:Extending_Ext2_Class_(Chinese)#.E5.BC.80.E5.A7.8B.E5.95.B0 仔细做了以上参考资料的练习发现了一些问题：（1）因文件引用不对，导致浏览器出现的结果错误——显示不出来。（2）文中没
rust-by-example-ext：Rust by Example-扩展版
02-05
rust-by-example-ext：Rust by Example-扩展版
Extending Ext2 Class (扩展EXT2组件类)
junhe0723的专栏
06-14 479
目录：1 实现的目的 2 A note for those who were used to Ext 1.x 3 文件的创建 3.1 iconcombo.html 3.2 iconcombo.js 3.3 Ext.ux.IconCombo.js 3.4 Ext.ux.IconCombo.css 4 相关理论 5 开始啰 6 完成的代码 预计实现的效果图：
扩展Ext2类 Extending Ext2 Class
weixin_34407348的博客
05-23 75
Tutorial:Extending Ext2 Class (Chinese) From Learn About the Ext JavaScript Library Jump to: navigation, search Summary: 本文为您介绍扩展EXT组件类所需的几个步骤。 Author: Jozef Sakalos(译者：Frank Chueng...
Extending Ext Class (EXT 的类继承概念)
浮白
03-16 1125
Tutorial:Extending Ext Class (EXT 的类继承概念)周五, 11/16/2007 - 16:59 — ppkosd35vote 实现的目的 预期将是这样的IconCombo要创建的扩展是一个在文字前面能够显示图标的这么一个Ext.form.Combobox。将其中一个功能举例来说，就是要在一块选择里，国家名称连同国旗一并
扩展Ext.Component，扩展Ext中的组件
junhe0723的专栏
06-14 553
引言 起初，Ext.extend()干的不错，它使你能够建立强大的面向对象的JavaScript类层次结构。你可以用它构建你自己的类和派生类，当然也可以扩展Ext的内建类。如果不熟悉Ext.extend()，你应该先读一下Manual:Intro:Inheritance。 Jozef Sakalos写的Tutorial:Extending_Ext_Class详细
扩展Ext中的组件
wv112406的博客
10-18 131
主页 扩展Ext中的组件 引言 起初，Ext.extend()干的不错，它使你能够建立强大的面向对象的JavaScript类层次结构。你可以用它构建你自己的类和派生类，当然也可以扩展Ext的内建类。如果不熟悉Ext.extend()，你应该先读一下Manual:Intro:Inheritance 。 Jozef Sakalos写的Tutorial:Extending_Ext_C...
自已扩展EXT组件(Extending Ext Components)
weixin_34318272的博客
05-24 80
自已扩展EXT组件 From Learn About the Ext JavaScript Library Jump to: navigation, search Summary: Gives an overview on how to extend Components in Ext and provides links to the many great arti...
[翻译]Ext组件扩展概述
unifly
05-28 221
心血来潮，翻译了一篇extjs上的教程，希望大家批评指正，呵呵…… 原文链接：http://extjs.com/learn/Manual:Component:Extending_Ext_Components Manual:Component:Extending Ext Components(Chinese) From Learn About the Ext JavaScript Libra...
扩展Ext中的组件（转载）
hzylyl2402的专栏
04-19 95
引言 起初，Ext.extend()干的不错，它使你能够建立强大的面向对象的JavaScript类层次结构。你可以用它构建你自己的类和派生类，当然也可以扩展Ext的内建类。如果不熟悉Ext.extend()，你应该先读一下Manual:Intro:Inheritance。 Jozef Sakalos写的Tutorial:Extending_Ext_Class详细介绍了怎样在Ext1.X下实...
Updated-discord.py-tutorial：在Carberra YouTube频道上构建的discord.py机器人的代码
01-29
安装所需组件 你会需要： Python 3.8.0或更高版本； discord.py 1.3.0或更高版本； discord-ext-menus 1.0.0a或更高； apscheduler 3.6.3或更高版本。 安装Python： 从此处下载最新版本： : 。 点安装： 在基于...
GWT+EXT+STRUTS2+Eclipse完整范例.rar
11-13
这个压缩包内的“Eclipse_Ext_Tutorial”可能是一个关于如何在Eclipse中配置和使用EXT JS的教程，而“GWT+EXT+STRUTS2”可能是实际的项目源码，展示如何在同一个应用中整合这三个技术。 通过学习这个范例，开发者...
ext的扩展控件之IconComboBox
06-23
IconComboBox的核心是EXT.form.Combobox，它是EXT JS中用于创建下拉列表的组件。我们首先需要创建一个新的类，继承自EXT.form.field.ComboBox，并在其基础上添加我们所需的新功能。这通常包括定义新的配置选项、重写...
实现朴素贝叶斯分类器对西瓜书数据集3.0进行分类_Naive-Bayesian-classifier.zip
最新发布
10-01
实现朴素贝叶斯分类器对西瓜书数据集3.0进行分类_Naive-Bayesian-classifier
基于Python与Shell的system-design-primer大型系统设计源码学习指南
10-01
该项目是一个大型系统设计源码学习指南，采用Python和Shell编程语言编写，包含127个文件，其中包括54个PNG图像文件、23个Markdown文档、17个Graffle文件、14个Python源代码文件、6个Jupyter Notebook文件、5个JPG图片文件、3个Android应用程序包文件，以及各类型的配置和忽略文件。该指南旨在帮助用户深入理解如何设计和构建复杂系统。
【超强组合】基于matlab金枪鱼算法TSO-BP-Adaboost数据分类预测【含Matlab源码 8154期】.zip
10-01
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2023b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化-BP-Adaboost数据分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化-BP-Adaboost数据分类预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化-BP-Adaboost数据分类预测 4.4.3 灰狼算法GWO/狼群算法WPA优化-BP-Adaboost数据分类预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化-BP-Adaboost数据分类预测 4.4.5 萤火虫算法FA/差分算法DE优化-BP-Adaboost数据分类预测 4.4.6 其他优化算法优化-BP-Adaboost数据分类预测
【SCI2区】北方苍鹰算法NGO-BiTCN-BiGRU-Attention风电预测【含Matlab源码 8076期】.zip
10-01
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2023b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化-BiTCN-BiGRU-Attention风电预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化-BiTCN-BiGRU-Attention风电预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化-BiTCN-BiGRU-Attention风电预测 4.4.3 灰狼算法GWO/狼群算法WPA优化-BiTCN-BiGRU-Attention风电预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化-BiTCN-BiGRU-Attention风电预测 4.4.5 萤火虫算法FA/差分算法DE优化-BiTCN-BiGRU-Attention风电预测 4.4.6 其他优化算法优化-BiTCN-BiGRU-Attention风电预测
用SIMD优化SM3国家密码算法.zip
10-01
用SIMD优化SM3国家密码算法
入门指南：Ext官方资源与核心组件详解
2. **理解`Ext.onReady`**：`Ext.onReady`是Ext库中的一个重要函数，它确保在页面DOM加载完成后执行指定的回调函数。这是编写依赖DOM元素的JavaScript代码的理想时机。初学者可以尝试删除alert()，替换为实际操作，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值