extjs 플러그인을 어떻게 씁니까
Introduction
We are going to write a plugin for Ext.form.Combobox that adds icons display functionality to standard combo. The result will be same as described in Extending Ext 2 Class tutorial; this is just another approach to the same problem. If you haven't already done so, it is advisable to read the mentioned tutorial before you continue with this one.
Objective
Intended resulting IconCombo
We will create an IconCombo plugin that could be useful, for example, for selection of countries having the country flag followed by the country name. However, the plugin is universal so you can add any icons you want. Size of icons used here is 16x16 px so they fit very well into both combo input and combo dropdown. If you use icons of other sizes you may need to tweak the stylesheets.
Files
We will use two files in this tutorial:
iconcombo.html: this file will contain html markup, stylesheets and test application and
Ext.ux.plugins.js: this file will contain javascript code of the IconCombo plugin.
iconcombo.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
<script type="text/javascript" src="Ext.ux.plugins.js"></script>
<style type="text/css">
.ux-flag-us {
background-image:url(../img/flags/us.png) ! important;
}
.ux-flag-de {
background-image:url(../img/flags/de.png) ! important;
}
.ux-flag-fr {
background-image:url(../img/flags/fr.png) ! important;
}
.ux-icon-combo-icon {
background-repeat: no-repeat;
background-position: 0 50%;
width: 18px;
height: 14px;
}
/* X-BROWSER-WARNING: this is not being honored by Safari */
.ux-icon-combo-input {
padding-left: 25px;
}
.x-form-field-wrap .ux-icon-combo-icon {
top: 3px;
left: 5px;
}
.ux-icon-combo-item {
background-repeat: no-repeat ! important;
background-position: 3px 50% ! important;
padding-left: 24px ! important;
}
</style>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../extjs-2.0/resources/images/default/s.gif';
Ext.onReady(function() {
var win = new Ext.Window({
title:'Icon Combo Ext 2.0 Plugin Example'
,width:400
,height:300
,layout:'form'
,bodyStyle:'padding:10px'
,labelWidth:70
,defaults:{anchor:'100%'}
,items:[{
xtype:'combo'
,fieldLabel:'IconCombo'
,store: new Ext.data.SimpleStore({
fields: ['countryCode', 'countryName', 'countryFlag'],
data: [
['US', 'United States', 'ux-flag-us'],
['DE', 'Germany', 'ux-flag-de'],
['FR', 'France', 'ux-flag-fr']
]
}),
plugins:new Ext.ux.plugins.IconCombo(),
valueField: 'countryCode',
displayField: 'countryName',
iconClsField: 'countryFlag',
triggerAction: 'all',
mode: 'local',
}]
});
win.show();
});
</script>
<title>Icon Combo Ext 2.0 Plugin Example</title>
</head>
<body>
</body>
</html>This file contains, besides the necessary html markup, the onReady function that creates a window with form layout with our iconcombo as the only one item. Beware, a real form is not created so do not use this example to create real forms. The iconcombo's store contains also inline data for testing purposes.
You will need to change references to Ext JS Library files to point to your location of the Ext installation.
You may also need to adjust paths to flag images depending on where you have installed them. You can download flags form famfamfam.com.
Ext.ux.plugins.js
// create namespace for plugins
Ext.namespace('Ext.ux.plugins');
/**
* Ext.ux.plugins.IconCombo plugin for Ext.form.Combobox
*
* @author Ing. Jozef Sakalos
* @date January 7, 2008
*
* @class Ext.ux.plugins.IconCombo
* @extends Ext.util.Observable
*/
Ext.ux.plugins.IconCombo = function(config) {
Ext.apply(this, config);
};
// plugin code
Ext.extend(Ext.ux.plugins.IconCombo, Ext.util.Observable, {
init:function(combo) {
} // end of function init
}); // end of extend
// end of fileYou should be able to run this code without any errors at this point, however, you will get only standard combo as plugin's init function is empty.
Theory
An Ext 2.0 Component plugin is an object that must contain function init and can contain arbitrary code that adds or changes a functionality of the component. Function init of all component's plugins is called from the component constructor just after the function initComponent. Function init is called with one argument: component object the plugin is configured for. Function init runs in the context of the instance of the plugin (this variable inside of init points to that instance).
Our plugin
I have chosen to extend Ext.util.Observable in this tutorial, although it is overkill for IconCombo, to show how to pass a config object to your plugin and to show you how to create a plugin that can fire events.
Add the following code to the init function:
Ext.apply(combo, {
tpl: '<tpl for=".">'
+ '<div class="x-combo-list-item ux-icon-combo-item '
+ '{' + combo.iconClsField + '}">'
+ '{' + combo.displayField + '}'
+ '</div></tpl>'
});This changes combo's list template and if you run it at this point you will see icons in the dropdown but not in combo itself.
Add the following code inside the Ext.apply just after tpl:
onRender:combo.onRender.createSequence(function(ct, position) {
// adjust styles
this.wrap.applyStyles({position:'relative'});
this.el.addClass('ux-icon-combo-input');
// add div for icon
this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
tag: 'div', style:'position:absolute'
});
}), // end of function onRender
setIconCls:function() {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if(rec) {
this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
}
}, // end of function setIconCls
setValue:combo.setValue.createSequence(function(value) {
this.setIconCls();
})That's it! You have now full featured, yet simple, IconCombo plugin.
Complete code
Here is the complete code of Ext.ux.plugins.IconCombo for your reference:
// create namespace for plugins
Ext.namespace('Ext.ux.plugins');
/**
* Ext.ux.plugins.IconCombo plugin for Ext.form.Combobox
*
* @author Ing. Jozef Sakalos
* @date January 7, 2008
*
* @class Ext.ux.plugins.IconCombo
* @extends Ext.util.Observable
*/
Ext.ux.plugins.IconCombo = function(config) {
Ext.apply(this, config);
};
// plugin code
Ext.extend(Ext.ux.plugins.IconCombo, Ext.util.Observable, {
init:function(combo) {
Ext.apply(combo, {
tpl: '<tpl for=".">'
+ '<div class="x-combo-list-item ux-icon-combo-item '
+ '{' + combo.iconClsField + '}">'
+ '{' + combo.displayField + '}'
+ '</div></tpl>',
onRender:combo.onRender.createSequence(function(ct, position) {
// adjust styles
this.wrap.applyStyles({position:'relative'});
this.el.addClass('ux-icon-combo-input');
// add div for icon
this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
tag: 'div', style:'position:absolute'
});
}), // end of function onRender
setIconCls:function() {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if(rec) {
this.icon.className = 'ux-icon-combo-icon ' + rec.get(this.iconClsField);
}
}, // end of function setIconCls
setValue:combo.setValue.createSequence(function(value) {
this.setIconCls();
})
});
} // end of function init
}); // end of extend
// end of file이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
콜백 함수를 Angular 하위 구성 요소에 전달이 예제는 구성 요소에 함수를 전달하는 것과 관련하여 최근에 직면한 문제를 다룰 것입니다. 국가 목록을 제공하는 콤보 상자 또는 테이블 구성 요소. 지금까지 모든 것이 구성 요소 자체에 캡슐화되었으며 백엔드에 대한 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
