Ext.ux.form.field.DisplayComboBox DisplayField with Mapping to Store

[KajaSheen]

Once again a little thing I needed for my application and wanted to share with you. I use a FormPanel with a whole lot of DisplayFields for a quick preview of my records. Now I had a field that usually is filled with a ComboBox, so the value and the actual expected string to display differ. Alas I extended the ComboBox to utilize the value lookup, but mixed in the DisplayField properties.

Is maybe not throughly tested, but maybe you guys find some bugs or improvements.

Ext.define('Ext.ux.form.field.DisplayComboBox', {
    extend:'Ext.form.field.ComboBox',
    alias: 'widget.displaycomboboxfield',
       
    htmlEncode: false,

    componentLayout: 'field',
    
    fieldSubTpl: [
        '<div id="{id}"',
        '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>', 
        ' class="{fieldCls}">{value}</div>',
        {
            compiled: true,
            disableFormats: true
        }
    ],    

    submitValue: false,
    
    /**
     * @cfg {String} [fieldCls="x-form-display-field"]
     * The default CSS class for the field.
     */
    fieldCls: Ext.baseCSSPrefix + 'form-display-field',    
    
    onRender: function() {
        var me = this;

        Ext.form.field.Base.prototype.onRender.apply(me, arguments);
        me.doc = Ext.getDoc();
    },
    
    validateOnChange: false,

    initEvents: Ext.emptyFn,

    submitValue: false,
    
    isDirty: function(){
        return false;
    },

    isValid: function() {
        return true;
    },

    validate: function() {
        return true;
    },    
        
    getSubTplData: function() {
        var ret = this.callParent(arguments);

        ret.value = this.getDisplayValue();

        return ret;
    },
    
    getSubTplMarkup: function() {
        return this.getTpl('fieldSubTpl').apply(this.getSubTplData());
    },
    
    getRawValue: function() {
        return this.rawValue;
    },

    setRawValue: function(value) {
        var me = this,
            display;
                    
        value = Ext.value(value, '');
        me.rawValue = value;
        if (me.rendered) {
            me.inputEl.dom.innerHTML = me.getDisplayValue();
            me.updateLayout();
        }
        return value;
    }
    
}); 

Quick example:

Ext.require([
    'Ext.form.*'
]);

Ext.onReady(function() {

    var formPanel = Ext.create('Ext.form.Panel', {
        frame: true,
        title: 'Form Fields',
        width: 340,
        bodyPadding: 5,

        fieldDefaults: {
            labelAlign: 'left',
            labelWidth: 90,
            anchor: '100%'
        },

        items: [{
            xtype:"displaycomboboxfield",
            queryMode:"local",
            valueField:"value",
            value: 2,
            store:{
                xtype:"store",
                fields:[
                    {name:"text"},
                    {name:"value"}
                ],
                data:[
                      {text:"High",value:3},
                      {text:"Medium",value:2},
                      {text:"Low",value:1}
                  ]
            },
            fieldLabel:"Priority",
            name:"prio"
        }]
    });

    formPanel.render('form-ct');

}); 

Screenshot:
displaycombobox.png

[scottmartin]

Thank you for the contribution.

Scott.