先看图：
代码：
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>
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 file
全文地址：http://extjs.com/learn/Tutorial:Writing_Ext_2_Plugins
声明：本站教程文章版权为一起Ext(http://www.17ext.com/)所有，转载请注明出处