注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

╰此情可待成追忆

当没有阳光时,我自己便是阳光,当没有快乐时,我自己便是快乐

 
 
 

日志

 
 

转:ExtJs带图标的下拉框  

2013-11-25 15:29:23|  分类: Ext.NET |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自马前卒《转:Ext带图标的下拉框》

ExtJs带图标的下拉框,另外EXT.NET带图标的下拉框看官方例子:IconCombo,地址   http://examples1.ext.net/#/Form/ComboBox/IconCombo/

完成后样式如图:

转:Ext带图标的下拉框 - 马前卒 - liangwang985 的博客

首先,写一个js文件,扩展Ext.form.comboBox,

Ext.namespace('Ext.ux');

Ext.ux.IconCombo = function(config) {

     Ext.ux.IconCombo.superclass.constructor.call(this, config);

    this.tpl = config.tpl ||

          '<tpl for="."><div class="x-combo-list-item x-icon-combo-item {'

        + this.iconClsField

        + '}">{'

        + this.displayField

        + '}</div></tpl>'

    ;

    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'

            });

        }}

    });

}

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

    }

});

必须有此样式对应:

.x-icon-combo-icon {

    background-repeat: no-repeat;

    background-position: 0 50%;

    width: 18px;

    height: 14px;}

把该js 包含到jsp页面上,现在是调用扩展的图标下拉框了:

var icnCombo = new Ext.ux.IconCombo({

        store: new Ext.data.SimpleStore({

            fields: ['iconCode', 'iconName', 'iconCSS'],

            data: [

            ['', '默认样式', ''],           

                ['add', '样式1', 'add'],

                ['edit', '样式2', 'edit'],

                ['details', '样式3', 'details']

            ]

        }),

        valueField: 'iconCode',

        displayField: 'iconName',

        iconClsField: 'iconCSS',

        triggerAction: 'all',

        fieldLabel : '图标样式',

        hiddenName : "menu.iconCls",

        name : "menu.iconCls",

        editable:false,

        mode: 'local',

        id: 'iconCombo',

        width: 160

    });

  评论这张
 
阅读(769)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017