Pictures_extjs가 포함된 ExtJs 드롭다운 목록 상자 플러그인

ExtJs의 콤보를 확장한 IconCombox라는 ExtJs의 공식 웹사이트에 사진이 포함된 드롭다운 목록이 있으며 공식 주소는 다음과 같습니다.
http:/ /www.extjs.com/learn/Tutorial:Extending_Ext_Class_English
하지만 이 IconComboBox에는 표시되는 그림을 비례적으로 변경할 수 없다는 단점이 있습니다. 그림이 너무 크면 콤보박스의 단어를 가리거나 아이콘이 완전히 표시되지 않습니다. 나중에 IconComboBox의 소스 코드를 읽고 문제를 수정했습니다.
Ext.ux.IconCombo.js 파일에서:

코드 복사 코드

/** 
* Ext.ux.IconCombo 확장 클래스 
* 
* @author Jozef Sakalos 
* @version 1.0 
* 
* @class Ext.ux.IconCombo 
* @ 확장 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({
렌더링: {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', 스타일 :'position:absolute'
});
}}
})
} // Ext.ux.IconCombo 생성자의 끝
// 확장
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: 함수 (value) {
Ext.ux.IconCombo.superclass.setValue.call(this, value);
this.setIconCls();
}
}) // 확장 끝
// 파일 끝

이 파일은 주로 두 줄의 코드를 포함하는 Ext.form.ComboBox를 확장합니다.
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