Introduction
We are going to write a plugin for Ext.form.Combobox that adds icons display functionality to standard combo. The result will be same as described in Extending Ext 2 Class tutorial; this is just another approach to the same problem. If you haven't already done so, it is advisable to read the mentioned tutorial before you continue with this one.
Objective
We will create an IconCombo plugin that could be useful, for example, for selection of countries having the country flag followed by the country name. However, the plugin is universal so you can add any icons you want. Size of icons used here is 16x16 px so they fit very well into both combo input and combo dropdown. If you use icons of other sizes you may need to tweak the stylesheets.
Files
We will use two files in this tutorial:
- iconcombo.html: this file will contain html markup, stylesheets and test application and
- Ext.ux.plugins.js: this file will contain javascript code of the IconCombo plugin.
iconcombo.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
<script type="text/javascript" src="Ext.ux.plugins.js"></script>
<style type="text/css">
.ux-flag-us {
background-image:url(../img/flags/us.png) ! important;
}
.ux-flag-de {
background-image:url(../img/flags/de.png) ! important;
}
.ux-flag-fr {
background-image:url(../img/flags/fr.png) ! important;
}
.ux-icon-combo-icon {
background-repeat: no-repeat;
background-position: 0 50%;
width: 18px;
height: 14px;
}
/* X-BROWSER-WARNING: this is not being honored by Safari */
.ux-icon-combo-input {
padding-left: 25px;
}
.x-form-field-wrap .ux-icon-combo-icon {
top: 3px;
left: 5px;
}
.ux-icon-combo-item {
background-repeat: no-repeat ! important;
background-position: 3px 50% ! important;
padding-left: 24px ! important;
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../extjs-2.0/resources/images/default/s.gif';
Ext.onReady(function() {
var win = new Ext.Window({
title:'Icon Combo Ext 2.0 Plugin Example'
,width:400
,height:300
,layout:'form'
,bodyStyle:'padding:10px'
,labelWidth:70
,defaults:{anchor:'100%'}
,items:[{
xtype:'combo'
,fieldLabel:'IconCombo'
,store: new Ext.data.SimpleStore({
fields: ['countryCode', 'countryName', 'countryFlag'],
data: [
['US', 'United States', 'ux-flag-us'],
['DE', 'Germany', 'ux-flag-de'],
['FR', 'France', 'ux-flag-fr']
]
}),
plugins:new Ext.ux.plugins.IconCombo(),
valueField: 'countryCode',
displayField: 'countryName',
iconClsField: 'countryFlag',
triggerAction: 'all',
mode: 'local',
}]
});
win.show();
});
</script>
<title>Icon Combo Ext 2.0 Plugin Example</title>
</head>
<body>
</body>
</html>This file contains, besides the necessary html markup, the onReady function that creates a window with form layout with our iconcombo as the only one item. Beware, a real form is not created so do not use this example to create real forms. The iconcombo's store contains also inline data for testing purposes.
You will need to change references to Ext JS Library files to point to your location of the Ext installation.
You may also need to adjust paths to flag images depending on where you have installed them. You can download flags form famfamfam.com.
Ext.ux.plugins.js
// create namespace for plugins
Ext.namespace('Ext.ux.plugins');
/**
* Ext.ux.plugins.IconCombo plugin for Ext.form.Combobox
*
* @author Ing. Jozef Sakalos
* @date January 7, 2008
*
* @class Ext.ux.plugins.IconCombo
* @extends Ext.util.Observable
*/
Ext.ux.plugins.IconCombo = function(config) {
Ext.apply(this, config);
};
// plugin code
Ext.extend(Ext.ux.plugins.IconCombo, Ext.util.Observable, {
init:function(combo) {
} // end of function init
}); // end of extend
// end of fileYou should be able to run this code without any errors at this point, however, you will get only standard combo as plugin's init function is empty.
Theory
An Ext 2.0 Component plugin is an object that must contain function init and can contain arbitrary code that adds or changes a functionality of the component. Function init of all component's plugins is called from the component constructor just after the function initComponent. Function init is called with one argument: component object the plugin is configured for. Function init runs in the context of the instance of the plugin (this variable inside of init points to that instance).
Our plugin
I have chosen to extend Ext.util.Observable in this tutorial, although it is overkill for IconCombo, to show how to pass a config object to your plugin and to show you how to create a plugin that can fire events.
Add the following code to the init function:
Ext.apply(combo, {
tpl: '<tpl for=".">'
+ '<div class="x-combo-list-item ux-icon-combo-item '
+ '{' + combo.iconClsField + '}">'
+ '{' + combo.displayField + '}'
+ '</div></tpl>'
});This changes combo's list template and if you run it at this point you will see icons in the dropdown but not in combo itself.
Add the following code inside the Ext.apply just after tpl:
onRender:combo.onRender.createSequence(function(ct, position) {
// adjust styles
this.wrap.applyStyles({position:'relative'});
this.el.addClass('ux-icon-combo-input');
// add div for icon
this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
tag: 'div', style:'position:absolute'
});
}), // end of function onRender
setIconCls:function() {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if(rec) {
this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
}
}, // end of function setIconCls
setValue:combo.setValue.createSequence(function(value) {
this.setIconCls();
})That's it! You have now full featured, yet simple, IconCombo plugin.
Complete code
Here is the complete code of Ext.ux.plugins.IconCombo for your reference:
// create namespace for plugins
Ext.namespace('Ext.ux.plugins');
/**
* Ext.ux.plugins.IconCombo plugin for Ext.form.Combobox
*
* @author Ing. Jozef Sakalos
* @date January 7, 2008
*
* @class Ext.ux.plugins.IconCombo
* @extends Ext.util.Observable
*/
Ext.ux.plugins.IconCombo = function(config) {
Ext.apply(this, config);
};
// plugin code
Ext.extend(Ext.ux.plugins.IconCombo, Ext.util.Observable, {
init:function(combo) {
Ext.apply(combo, {
tpl: '<tpl for=".">'
+ '<div class="x-combo-list-item ux-icon-combo-item '
+ '{' + combo.iconClsField + '}">'
+ '{' + combo.displayField + '}'
+ '</div></tpl>',
onRender:combo.onRender.createSequence(function(ct, position) {
// adjust styles
this.wrap.applyStyles({position:'relative'});
this.el.addClass('ux-icon-combo-input');
// add div for icon
this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
tag: 'div', style:'position:absolute'
});
}), // end of function onRender
setIconCls:function() {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if(rec) {
this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
}
}, // end of function setIconCls
setValue:combo.setValue.createSequence(function(value) {
this.setIconCls();
})
});
} // end of function init
}); // end of extend
// end of file
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
