Ext는 EXT의 클래스 상속 개념을 소개합니다.

실현의 목적

그런 Icon Combo가 될 것으로 예상됩니다.
만들 확장자는 텍스트 앞에 아이콘을 표시할 수 있는 Ext.form입니다.Combobox.그 중의 한 가지 기능을 예로 들면 하나의 선택에서 국가 명칭이 국기와 함께 나타나는 것이다.
우리는 먼저 확장자의 이름을 Ext.ux라고 지었다.IconCombo.

파일 생성

가장 중요한 단계는 개발할 파일을 준비하는 것이다.다음 파일이 필요합니다.

iconcombo.html: 새로운 확장에 사용할 htmlmarkup

iconcombo.js: 프로그램javascript 코드

Ext.ux.IconCombo.js: 확장된javascript 파일

Ext.ux.IconCombo.css:확장 스타일시트

iconcombo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="Ext.ux.IconCombo.css">
    <script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="Ext.ux.IconCombo.js"></script>
    <script type="text/javascript" src="iconcombo.js"></script>
    <!-- A Localization Script File comes here -->
    <script type="text/javascript">Ext.onReady(iconcombo.init, iconcombo);</script>
    <title>Ext.ux.IconCombo Tutorial</title>
</head>
<body>
<div style="position:relative;width:300px;top:24px;left:64px;font-size:11px">
    <div>Icon combo:</div>
    <div id="combo-ct"></div>
</div>
</body>
</html>

이 파일은 튜토리얼 Ext 프로그램 계획 시작 의 경미한 수정에서 나온 것이다.

iconcombo.js

/**
 * Ext.ux.IconCombo Tutorial
 * by Jozef Sakalos, aka Saki
 * http://extjs.com/learn/Tutorial:Extending_Ext_Class
 */
 
//  
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
 
//  
iconcombo = function() {
 
    //  
    return {
        // public properties, e.g. strings to translate
 
        // public methods
        init: function() {
            var icnCombo = new Ext.ux.IconCombo({
                store: new Ext.data.SimpleStore({
                    fields: ['countryCode', 'countryName', 'countryFlag'],
                    data: [
                        ['US', 'United States', 'x-flag-us'],
                        ['DE', 'Germany', 'x-flag-de'],
                        ['FR', 'France', 'x-flag-fr']
                    ]
                }),
                valueField: 'countryCode',
                displayField: 'countryName',
                iconClsField: 'countryFlag',
                triggerAction: 'all',
                mode: 'local',
                width: 160
            });
            icnCombo.render('combo-ct');
            icnCombo.setValue('DE');
        }
    };
}(); // end of app
 
// end of file

확장과 테스트를 위해 이 파일에 IconCombo를 만듭니다.

Ext.ux.IconCombo.js

// Create （User eXtensions namespace (Ext.ux)）
Ext.namespace('Ext.ux');
 
/**
 * Ext.ux.IconCombo  
 *
 * @author Jozef Sakalos, aka Saki
 * @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);
 
} // Ext.ux.IconCombo 
 
//  
Ext.extend(Ext.ux.IconCombo, Ext.form.ComboBox, {
 
}); //  
 
//

이 단계까지 실행합니다. 실제로는 Ext.form이 없습니다.ComboBox 새로 추가된 모든 항목의 빈 확장.우리는 바로 이 완성된 빈 확장이 필요하다. 다음 단계를 계속해야 한다.

Ext.ux.IconCombo.css

.x-flag-us {
    background-image: url(../img/flags/us.png);
}
.x-flag-de {
    background-image: url(../img/flags/de.png);
}
.x-flag-fr {
    background-image: url(../img/flags/fr.png);
}

경로는 국기 배치 목록에 따라 다를 수 있습니다.국기의 자원은 here 에서 다운로드할 수 있습니다.

Let's go

So far so good!iconcombo를 찾으면.html는 세 가지 옵션을 포함하는 표준combo를 발견할 수 있을 것이다. 독일의 그것은 선택된 것이다.그렇지?근데 아직 아이콘이 없어서...
지금 바로 일을 시작하는 것이다.상위 빌더를 호출한 후 다음 행을 추가합니다.

this.tpl = config.tpl ||
      '<div class="x-combo-list-item">'
    + '<table><tbody><tr>'
    + '<td>'
    + '<div class="{' + this.iconClsField + '} x-icon-combo-icon"></div></td>'
    + '<td>{' + this.displayField + '}</td>'
    + '</tr></tbody></table>'
    + '</div>'
;

이 단계에서, 우리는 기본 콤박스 박스의 모듈을 iconClsField 모듈로 다시 쓸 것입니다.
지금 Ext.ux에 가입합니다.IconCombo.css의 스타일 파일:

.x-icon-combo-icon {
    background-repeat: no-repeat;
    background-position: 0 50%;
    width: 18px;
    height: 14px;
}

좋다!새로 고친 페이지를 테스트해 볼 수 있어요. 괜찮아요!?응, 목록이 펼쳐졌을 때 그 예쁜 아이콘들이 나왔어.그리고저희가 닫을 때도 아이콘이 나타나야 되는 거 아니에요?
빌더에 템플릿 생성 프로세스를 추가합니다.

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'
        });
    }}
});

이벤트render를 추가하는 탐지기, 원소 스타일을 조정하고 국기를 만드는 div 용기입니다.다음과 같이 확장합니다.

//  
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();
    }
 
}); //

setIconCls 함수를 추가하고 setValue 함수를 다시 작성합니다.부류의 setValue 방법이 필요합니다. 이어서 setIconCls 함수를 호출합니다.마지막으로, 우리는 파일 Ext.ux에 있어야 한다.IconCombo.css는 다음 코드를 추가합니다.

.x-icon-combo-input {
    padding-left: 26px;
}
.x-form-field-wrap .x-icon-combo-icon {
    top: 3px;
    left: 6px;
}

완성

마지막으로 다시 한 번 리셋합니다. 만약 모든 것이 순조롭다면, 이것은 새로운 Ext.ux입니다.아이콘콤보 확장!이 기초 위에서 더 많은 구성 요소를 확장할 수 있기를 바랍니다!
Brian Moeskau의 알림에 감사드립니다. Ext.ux를 더욱 간소화할 수 있습니다.IconCombo 코드는 최종 버전이라고 할 수 있습니다.최종 코드 및 CSS는 다음과 같습니다.

Ext.ux.IconCombo.js

// Create user extensions namespace (Ext.ux)
Ext.namespace('Ext.ux');
 
/**
 * 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.ux.IconCombo.css

/* application specific styles */
.x-flag-us {
    background-image:url(../img/flags/us.png);
}
.x-flag-de {
    background-image:url(../img/flags/de.png);
}
.x-flag-fr {
    background-image:url(../img/flags/fr.png);
}
 
/* Ext.ux.IconCombo mandatory styles */
.x-icon-combo-icon {
    background-repeat: no-repeat;
    background-position: 0 50%;
    width: 18px;
    height: 14px;
}
.x-icon-combo-input {
    padding-left: 25px;
}
.x-form-field-wrap .x-icon-combo-icon {
    top: 3px;
    left: 5px;
}
.x-icon-combo-item {
    background-repeat: no-repeat;
    background-position: 3px 50%;
    padding-left: 24px;
}

Ext Programmer's API Documentation

Ext User Forums

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

ExtJS 3.2 학습 노트(3) 사용자 정의 이벤트

Extjs에서 모든 상속은 Ext.util에서 합니다.Observable 클래스의 컨트롤은 이벤트를 지원할 수 있습니다. 클래스에 대해 이벤트를 사용자 정의하려면 다음 절차를 따르십시오. 1, 먼저 클래스를 정의합니...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Ext는 EXT의 클래스 상속 개념을 소개합니다.

파일 생성

iconcombo.html

iconcombo.js

Ext.ux.IconCombo.js

Ext.ux.IconCombo.css

Let's go

완성

Ext.ux.IconCombo.js

Ext.ux.IconCombo.css

좋은 웹페이지 즐겨찾기