ExtJS中combo组件设置默认值插件

相信很多人都遇到了在ExtJS框架中设置combo组件默认值的需求，ExtJS框架并没有提供现成的配置项或者方法来解决此问题，本人认为主要是因为此种需求的应用场景有限且很难完成适应于不同场景的实现。

combo组件的设值其实很简单：

var record = store.getAt(index);
combo.setValue(record.get(valueField));

即根据index获取store里面需要设置默认值的model对象，然后调用combo组件的setValue方法即可。但是选择设值的“时机”，达到“默认值”的效果，可能就显得比较复杂了。
设置默认值的需求场景一般是在Form查询表单上，提供一个默认的查询项目。多数情况下，这种需求的combobox组件一般位于诸如tabpanel这样的模块主面板下的form中，或者位于window组件下的form中。前者可以通过监听form的afterrender事件实现；后者可以通过监听window的show事件实现。

如果在项目中combo组件设置默认值的需求场景很少，可以视情况在combo组件的父容器里直接添加相关监听事件来设置默认值。如果应用场景比较多，通过插件的方式配置就比较明智了。

下面展示本人所开发的实现combo组件设置默认值功能的插件，代码如下：

/**
 * 设置combo默认值插件
 * By Mask
 */
Ext.define('Ext.ux.combo.DefaultValuePlugin', {
    extend: 'Ext.AbstractPlugin',
    alias: ['plugin.defaultvalue', 'plugin.defaultvalueplugin'],
    parentType: 'form',
    displayIndex: 0,
    init: function(combo) {
        var me = this;
        me.combo = combo;
        combo.on('afterrender', me.setParentEvent, me, {single: true});
    },
    setParentEvent: function() {
        var me = this,
            parentType = me.parentType;
            parent = me.combo.up(parentType);
        if(parent) {
            if(parentType == "form") {
                parent.on('afterrender', me.setDefaultValue, me);
            } else if(parentType == "window") {
                parent.on('show', me.setDefaultValue, me);
            }
        }
    },
    setDefaultValue: function() {
        var me = this,
            combo = me.combo,
            store = combo.getStore(),
            valueCode = combo.valueField,
            record;
        if(combo.queryMode == "remote" && store.getCount() <= 0) {
            combo.lastQuery = combo.allQuery;
            store.load({
                params: combo.getParams(combo.allQuery),
                callback: function(records, operation, success) {
                    if(success == true) {
                        record = records[me.displayIndex];
                        if(record) {
                            combo.setValue(record.get(valueCode));
                        }
                    }
                }
            });
        } else {
            record = store.getAt(me.displayIndex);
            if(record) {
                combo.setValue(record.get(valueCode));
            }
        }
    },
    destroy: function() {
        delete this.combo;
    }
})

此插件包含两个配置项：
1.parentType：可以设置为’form’或’window’属性，分别对应combo组件位于诸如tabpanel这样的模块主面板下的form中和位于window组件下的form中。
2.displayIndex：显示的默认值在store中的位置，默认为0，即显示第一项。
插件同时支持combo组件数据源查询的local模式和remote模式。

使用方式很简单，以plugin的方法配置进入combobox组件中即可：

{
    xtype: 'combo',
    fieldLabel: '远程模式',
    queryModel: 'remote',
    store: remoteStore,
    displayField: 'username',
    valueField: 'forumid', 
    plugins: {
		ptype: 'defaultvalue',
		displayIndex: 2,
		parentXType: 'form'
    }
}

本文第一次发表于：[ExtJS]combobox设置默认值插件

更多ExtJS相关内容请点击：戴面罩的怪杰