ExtJs 그림 이 있 는 드 롭 다운 목록 상자 플러그 인
2872 단어 ExtJs드 롭 다운 목록 상자
/**
* 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
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
문자열 길이를 계산하고 중국어로 두 개를 계산합니다.텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.