ExtJs 그림 이 있 는 드 롭 다운 목록 상자 플러그 인

ExtJs 공식 사이트 에 사진 이 있 는 드 롭 다운 목록 이 있 는데 그 중에서 ExtJs 의 Combo 가 확장 되 었 습 니 다.이름 은 IconCombox 이 고 공식 주 소 는 다음 과 같 습 니 다.      http://www.extjs.com/learn/Tutorial:Extending_Ext_Class_Chinese      그러나 이 IconComboBox 는 표 시 된 그림 이 비례 에 따라 변 하지 않 는 다 는 단점 이 있다.그림 이 너무 크 면 Combobox 의 글 자 를 덮어 쓰 거나 Icon 디 스 플레이 에 여러 가지 문제 가 발생 했 습 니 다.나중에 IconComboBox 의 소스 코드 를 읽 고 문 제 를 수 정 했 습 니 다.     Ext.ux.IconCombo.js 이 파일 에는
 
/** 
* 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.form.ComboBox 를 확 장 했 습 니 다.그 중에서 주로 두 개의 코드 가 포함 되 어 있 습 니 다.17 번 에서 23 번 째 줄 입 니 다.이것 은 ComboBox 의 디 스 플레이 드 롭 다운 내용 을 설정 하고 원래 의 디 스 플레이 문 자 를 디 스 플레이 그림 과 문자 로 수정 한 것 입 니 다.이것 은 문제 가 없 지만 그림 이 너무 크 면 CSS 를 수정 해 야 합 니 다.25 번 에서 34 번 째 줄 은 ComboBox 에 표 시 된 내용 방식 을 설 정 했 습 니 다.ExtJS 는 아주 좋 은 방식 을 사 용 했 습 니 다.Ext.DomHelper.append.이것 은 ExtJS 의 Dom API 입 니 다.주로 Html 의 Dom 을 작 동 합 니 다.이 코드 는 Dom 을 사용 하여 wrap 이라는 단원 에 새로운 표 시 를 추가 하 는 것 입 니 다.이 표 시 된 tag 는 div 입 니 다.그리고 position:absolute 라 는 스타일 을 사 용 했 습 니 다.이것 이 바로 문제 가 발생 한 원인 이다.현재 브 라 우 저 로 서 는 div 배경 그림 을 수정 할 수 없습니다.그래서 나 는 그것 을 img 으로 수정 하고 이 를 통 해 그림 의 크기 를 수정 하면 된다.구체 적 인 효 과 는 다음 과 같다.     전체 코드 는 다음 과 같 습 니 다http://xiazai.jb51.net/201003/yuanma/iconcombo.rar

좋은 웹페이지 즐겨찾기