extjs的Ext.extend的使用样例(Ext继承)
2009-03-04 11:51
991 查看
实现的目的
预期将是这样的IconCombo
要创建的扩展是一个在文字前面能够显示图标的这么一个Ext.form.Combobox。将其中一个功能举例来说,就是要在一块选择里,国家名称连同国旗一并出现。
我们先给扩展起个名字,就叫Ext.ux.IconCombo。
文件的创建
首要的步骤是准备好开发中将会使用的文件。需下列文件:iconcombo.html: 新扩展将会使用的 html markup
iconcombo.js: 程序javascript代码
Ext.ux.IconCombo.js: 扩展的javascript文件
Ext.ux.IconCombo.css: 扩展样式表
iconcombo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"> <link rel="stylesheet" type="text/css" href="Ext.ux.IconCombo.css"> <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="../extjs/ext-all-debug.js"></script> <script type="text/javascript" src="Ext.ux.IconCombo.js"></script> <script type="text/javascript" src="iconcombo.js"></script> <!-- A Localization Script File comes here --> <script type="text/javascript">Ext.onReady(iconcombo.init, iconcombo);</script> <title>Ext.ux.IconCombo Tutorial</title> </head> <body> <div style="position:relative;width:300px;top:24px;left:64px;font-size:11px"> <div>Icon combo:</div> <div id="combo-ct"></div> </div> </body> </html>
该文件来自教程Ext程序规划入门 的轻微修改。
iconcombo.js
/** * Ext.ux.IconCombo Tutorial * by Jozef Sakalos, aka Saki * http://extjs.com/learn/Tutorial:Extending_Ext_Class */ // 引用本地空白文件 Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif'; // 创建程序 iconcombo = function() { // 公共空间 return { // public properties, e.g. strings to translate // public methods init: function() { var icnCombo = new Ext.ux.IconCombo({ store: new Ext.data.SimpleStore({ fields: ['countryCode', 'countryName', 'countryFlag'], data: [ ['US', 'United States', 'x-flag-us'], ['DE', 'Germany', 'x-flag-de'], ['FR', 'France', 'x-flag-fr'] ] }), valueField: 'countryCode', displayField: 'countryName', iconClsField: 'countryFlag', triggerAction: 'all', mode: 'local', width: 160 }); icnCombo.render('combo-ct'); icnCombo.setValue('DE'); } }; }(); // end of app // end of file
我们在这个文件中创建IconCombo,以便可以进行扩展和测试。
Ext.ux.IconCombo.js
// Create创建用户的扩展(User eXtensions namespace (Ext.ux)) Ext.namespace('Ext.ux'); /** * Ext.ux.IconCombo 扩展类 * * @author Jozef Sakalos, aka Saki * @version 1.0 * * @class Ext.ux.IconCombo * @extends Ext.form.ComboBox * @constructor * @param {Object} config 配置项参数 */ Ext.ux.IconCombo = function(config) { // 调用父类的构建函数 Ext.ux.IconCombo.superclass.constructor.call(this, config); } // Ext.ux.IconCombo构建器的底部 // 进行扩展 Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, { }); // 扩展完毕 // 文件底部
运行到这一步,实际这是一个没有对Ext.form.ComboBox新加任何东西的空扩展。我们正是需要这个完成好的空扩展,再继续下一步。
Ext.ux.IconCombo.css
.x-flag-us { background-image: url(../img/flags/us.png); } .x-flag-de { background-image: url(../img/flags/de.png); } .x-flag-fr { background-image: url(../img/flags/fr.png); }
路径可能根据你所在的国旗放置目录有所不同。国旗的资源可在here下载。
Let's go
So far so good!如果你浏览iconcombo.html应该会发现一个包含三个选项的标准combo,而德国的那个是选中的...是吧?不过还没有图标...
现在正是开始工作。在调用父类构建器之后加入下列行:
this.tpl = config.tpl || '<div class="x-combo-list-item">' + '<table><tbody><tr>' + '<td>' + '<div class="{' + this.iconClsField + '} x-icon-combo-icon"></div></td>' + '<td>{' + this.displayField + '}</td>' + '</tr></tbody></table>' + '</div>' ;
在这一步,我们将默认combox box的模版重写为iconClsField模版。
现在加入Ext.ux.IconCombo.css中的样式文件:
.x-icon-combo-icon { background-repeat: no-repeat; background-position: 0 50%; width: 18px; height: 14px; }
不错!可以测试一下了,刷新的页面,还好吧!?
嗯,列表展开时那些漂亮的图标就出来了。。还有。。我们不是要在关闭时也出现图标的吗?
在构建器中加入创建模版的过程:
this.on({ render:{scope:this, fn:function() { var wrap = this.el.up('div.x-form-field-wrap'); this.wrap.applyStyles({position:'relative'}); this.el.addClass('x-icon-combo-input'); this.flag = Ext.DomHelper.append(wrap, { tag: 'div', style:'position:absolute' }); }} });
加入 事件render的侦听器,用于调整元素样式和创建国旗的div容器。
如后按照下列方式进行扩展:
// 进行扩展 Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, { setIconCls: function() { var rec = this.store.query(this.valueField, this.getValue()).itemAt(0); if(rec) { this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField); } }, setValue: function(value) { Ext.ux.IconCombo.superclass.setValue.call(this, value); this.setIconCls(); } }); // 扩展完毕
新增 setIconCls函数并重写setValue函数。
我们还是需要父类的setValue的方法来调用一下,接着再调用setIconCls的函数。
最后,我们应该在文件Ext.ux.IconCombo.css加入下列代码:
.x-icon-combo-input { padding-left: 26px; } .x-form-field-wrap .x-icon-combo-icon { top: 3px; left: 6px; }
完成
最后再刷新一下,如果一切顺利,那这个就是新的Ext.ux.IconCombo扩展! 希望你能在此基础上扩展更多的组件!谢谢Brian Moeskau提醒,使得能进一步精简Ext.ux.IconCombo 代码,才称得上最终版本。
最终代码和CSS为:
Ext.ux.IconCombo.js
// Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');
/**
* Ext.ux.IconCombo Extension Class
*
* @author Jozef Sakalos
* @version 1.0
*
* @class Ext.ux.IconCombo
* @extends Ext.form.ComboBox
* @constructor
* @param {Object} config Configuration options
*/
Ext.ux.IconCombo = function(config) {
// call parent constructor
Ext.ux.IconCombo.superclass.constructor.call(this, config);
this.tpl = config.tpl ||
'<div class="x-combo-list-item x-icon-combo-item {'
+ this.iconClsField
+ '}">{'
+ this.displayField
+ '}</div>'
;
this.on({ render:{scope:this, fn:function() { var wrap = this.el.up('div.x-form-field-wrap'); this.wrap.applyStyles({position:'relative'}); this.el.addClass('x-icon-combo-input'); this.flag = Ext.DomHelper.append(wrap, { tag: 'div', style:'position:absolute' }); }} });
} // end of Ext.ux.IconCombo constructor
// extend
Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {
setIconCls: function() {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if(rec) {
this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField);
}
},
setValue: function(value) {
Ext.ux.IconCombo.superclass.setValue.call(this, value);
this.setIconCls();
}
}); // end of extend
// end of file
Ext.ux.IconCombo.css
/* application specific styles */
.x-flag-us {
background-image:url(../img/flags/us.png);
}
.x-flag-de {
background-image:url(../img/flags/de.png);
}
.x-flag-fr {
background-image:url(../img/flags/fr.png);
}
/* Ext.ux.IconCombo mandatory styles */
.x-icon-combo-icon { background-repeat: no-repeat; background-position: 0 50%; width: 18px; height: 14px; }
.x-icon-combo-input {
padding-left: 25px;
}
.x-form-field-wrap .x-icon-combo-icon {
top: 3px;
left: 5px;
}
.x-icon-combo-item {
background-repeat: no-repeat;
background-position: 3px 50%;
padding-left: 24px;
}
Ext Programmer's API Documentation
Ext User Forums
相关文章推荐
- Extjs中使用extend(js继承) 的代码
- Extjs使用extend(js继承)
- JavaScript和ExtJS的继承 Ext.extend Ext.applyIf
- ExtJS学习------Ext.define的继承extend,用javascript实现相似Ext的继承
- 《ExtJS 3详解与实践》阅读补充资料:Ext.extend()中使用super关键字
- JavaScript和ExtJS的继承 Ext.extend Ext.applyIf (转)
- 使用Ext.extend进行继承的一个有趣的问题
- Extjs中使用extend(js继承) 的代码
- ExtJs中的Ext.DomQuery.select()方法的使用
- Extjs学习笔记——Ext.data.JsonStore使用说明
- 使用Ext.Extend:使用Ext的JsonReader读取本地数据实现grid分页
- (转)Ext.extend继承方法一
- ExtJS教程(3)--- Ext中类的使用
- Extjs4 获取items子控件时使用Ext.getCmp返回undefined
- 无废话ExtJs 入门教程二十一[继承:Extend]
- ExtJs中继承的实现与理解—extend
- ExtJs中继承的实现与理解—extend
- Extjs 继承Ext.Component自定义组件
- ExtJS 4 在Ext.tab.Panel中使用Ext.ux.IFrame打开url指向的网页
- EXTJS 之 Ext.PagingToolbar 的使用方法