Question

I have a Map<String, String> that I’d like to display to a user but I don’t want them to be able to select the field to modify it’s value. I’ve been using a form with textfields and setting setting a property to disable them. This is not ideal as their aesthetics change. Am I doing it the correct way and simply need to apply some css or is their a better way of doing this?

Answer 1

You could make a form ‘label’ which is un-modifiable but looks like the rest of the form. Might need a few tweaks but this should get you started:

Ext.form.LabelField = function(config){
   Ext.form.LabelField.superclass.constructor.call(this, config);
};

Ext.extend(Ext.form.LabelField, Ext.form.Field,  {
    isField: true,
    value: '',
    renderSelectors: {fieldEl: '.x-form-labelfield'},
    renderTpl: [
        '<tpl if="label">',
            '<div class="x-form-label"><span>{label}</span></div>',
        '</tpl>',
        '<div class="x-form-label x-form-labelfield" style="width:70%; text-align:right"><span>{value}</span></div>',
   ],
   setValue:function(val) {
      this.value = val;
      if(this.rendered){
         this.fieldEl.update('<span>' + val + '</span>');
      }
    return this;
   },

});

Ext.reg('labelfield', Ext.form.LabelField);