EXT 的类继承概念
Tutorial:Extending Ext Class Chinese
From Learn About the Ext JavaScript Library
Jump to: navigation, search
Summary: 本文为您介绍扩展EXT组件类所需的几个步骤。
Author: Jozef Sakalos(译者：Frank Chueng)
Published: 2007九月三号
Ext Version: 1.1
Languages: English Chinese
Contents [hide]
1 实现的目的
2 文件的创建
2.1 iconcombo.html
2.2 iconcombo.js
2.3 Ext.ux.IconCombo.js
2.4 Ext.ux.IconCombo.css
3 Let's go
4 完成
4.1 Ext.ux.IconCombo.js
4.2 Ext.ux.IconCombo.css
实现的目的
预期将是这样的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
Retrieved from "http://extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese"
From Learn About the Ext JavaScript Library
Jump to: navigation, search
Summary: 本文为您介绍扩展EXT组件类所需的几个步骤。
Author: Jozef Sakalos(译者：Frank Chueng)
Published: 2007九月三号
Ext Version: 1.1
Languages: English Chinese
Contents [hide]
1 实现的目的
2 文件的创建
2.1 iconcombo.html
2.2 iconcombo.js
2.3 Ext.ux.IconCombo.js
2.4 Ext.ux.IconCombo.css
3 Let's go
4 完成
4.1 Ext.ux.IconCombo.js
4.2 Ext.ux.IconCombo.css
实现的目的
预期将是这样的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
Retrieved from "http://extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese"