收藏的Extjs组件IconCombobox

最新推荐文章于 2018-04-25 15:36:13 发布

黑暗行动

最新推荐文章于 2018-04-25 15:36:13 发布

阅读量271

点赞数

分类专栏： EXT JS

本文链接：https://blog.csdn.net/chy2z/article/details/80080289

版权

EXT JS 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

IconCombobox 代码：

Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, {
    initComponent:function() {

        Ext.apply(this, {
            tpl: '<tpl for=".">'
                + '<div class="x-combo-list-item ux-icon-combo-item '
                + '{' + this.iconClsField + '}">'
                + '{' + this.displayField + '}'
                + '</div></tpl>'
        });

        // call parent initComponent
        Ext.ux.IconCombo.superclass.initComponent.call(this);

    }, // end of function initComponent

    onRender:function(ct, position) {
        // call parent onRender
        Ext.ux.IconCombo.superclass.onRender.call(this, 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: function(value) {
        Ext.ux.IconCombo.superclass.setValue.call(this, value);
        this.setIconCls();
    } // end of function setValue
});

// register xtype
Ext.reg('iconcombo', Ext.ux.IconCombo);

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>IconCombobox</title>
    <link rel="stylesheet" type="text/css" href="../../Client/Ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="../../Client/Ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../Client/Ext/ext-all.js"></script>
<script type="text/javascript" src="Ext.ux.IconCombo.js"></script>
<style type="text/css">
        .ux-flag-us {
            background-image:url(Images/icon_package.gif) ! important;
        }
        .ux-flag-de {
            background-image:url(Images/image_new.gif) ! important;
        }
        .ux-flag-fr {
            background-image:url(Images/interface_browser.gif) ! important;
        }
        .ux-icon-combo-icon {
            background-repeat: no-repeat;
            background-position: 0 50%;
            width: 18px;
            height: 14px;
        }
        .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 language="javascript">
Ext.BLANK_IMAGE_URL = '../../Client/images/s.gif';
    Ext.onReady(function() {
        var win = new Ext.Window({
            title:'Icon Combobox',
            width:400,
            height:300,
            layout:'form',
            bodyStyle:'padding:10px',
            labelWidth:70,
            defaults:{anchor:'100%'},
            items:[{
                xtype:'iconcombo',
                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'],
                            ['FR', 'France', '']
                        ]
                }),
                valueField: 'countryCode',
                displayField: 'countryName',
                iconClsField: 'countryFlag',
                triggerAction: 'all',
                editable: false,
                mode: 'local'
            }]
        });
        win.show();
    });
</script>
</head>
<body>
</body>
</html>

黑暗行动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
收藏的Extjs组件IconCombobox

IconCombobox 代码： Ext.ux.IconCombo = Ext.extend(Ext.form.ComboBox, { initComponent:function() { Ext.apply(this, { tpl: '' + ' + '{' + this.iconClsF
复制链接

扫一扫