Pictures_extjs を使用した ExtJs ドロップダウン リスト ボックス プラグイン

ExtJs の公式 Web サイトには、IconCombox と呼ばれる ExtJs のコンボを拡張する、写真付きのドロップダウン リストがあり、公式アドレスは次のとおりです:
http:/ /www. extjs.com/learn/Tutorial:Extending_Ext_Class_English
ただし、この IconComboBox には、表示される画像を比例的に変更できないという欠点があります。画像が大きすぎると、コンボボックス内の文字が隠れてしまったり、アイコンが完全に表示されなかったりすることがあります。後で、IconComboBox のソース コードを読み、問題を修正しました。
ファイル Ext.ux.IconCombo.js 内:

コードをコピーします コード

/** 
* Ext.ux.IconCombo 拡張クラス
*
* @author Jozef Sakelos
* @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);
this.tpl = config.tpl ||
'

{'
this.displayField
'}

'

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 '
});
}}
})
} // Ext.ux.IconCombo コンストラクターの終わり
// extend
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);
}
}); >// ファイルの終わり


このファイルは Ext.form.ComboBox を拡張したもので、主に次の 2 行のコードが含まれています:
17 行目から 23 行目、ComboBox の表示ドロップダウン コンテンツを設定します。 、元のテキストの表示を画像とテキストの表示に変更しました。ただし、画像が大きすぎる場合は、CSS を変更する必要があります。

25行目から34行目、ここではComboBoxに表示するコンテンツモードを設定しています。 ExtJsはExt.DomHelper.appendという優れたメソッドを使用しており、主にHtml Domを操作するExtJsのDom APIです。 Dom を使用してラップユニットに新しいタグを追加します。このタグのタグは div で、position:absolute スタイルが使用されます。だからこそ問題が起きるのです。現在のブラウザでは、div の背景画像を変更する方法はありません。そこで、それを img に変更し、これを使用して画像のサイズを変更しました。これで終わりです。具体的な効果は次のとおりです。


完全なコードは次のとおりです
http://xiazai.jb51.net/201003/yuanma/iconcombo.rar