Extjs 4: how to make a text field input to an editable div? - extjs4

Question

I have a text field (or time/date field) with mask. __:__:__ I have to change the color of "_" from black to white. Has Extjs 4 any solution to change input to (editable) div?

Answer 1

Have you tried overriding the base fieldSubTpl property for your field? I.e, adding the property with a as a div element instead of input:
fieldSubTpl: [ // note: {id} here is really {inputId}, but {cmpId} is available
'<div id="{id}" type="{type}" {inputAttrTpl}',
' size="1"', // allows inputs to fully respect CSS widths across all browsers
'<tpl if="name"> name="{name}"</tpl>',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
'<tpl if="readOnly"> readonly="readonly"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off"/>',
{
disableFormats: true
}
],

Answer 2

Now I am here, using this tpl:
fieldSubTpl: [
'<div stlye="position: inherit; top: 0px; left: 0px" id="{id}-div" contentEditable='+!this.disableSel+' type="{type}" {inputAttrTpl}',
' size="1"',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off">{[Ext.util.Format.htmlEncode(values.value)]}</div>' +
'<input type="text" id="{id}" value="{[Ext.util.Format.htmlEncode(values.value)]}" ' +
'style="visibility: hidden; height: 0px; width: 0px; " />',
{
disableFormats: true
}
]
And I made a new plugin extended the original, change all this.inputTextElement.value to get or set HTML
this.getPicker().on('select', function (p, r, o){
Ext.get(this.id + '-inputEl-div').setHTML(r.data.disp);
}, this);
And on some other event the hidden input and div change their values, but it's not the ultimate version of my sollution. Now I have lots of work yet... Huh... :)
And if you know other idea, please post it!

Answer 3

An other solution I'm trying:
buildDivsByFormat: function () {
// 12: 'h:i A', '03:15 PM'. 'h:i:s.u A' 24: 'H:i' 'H:i:s.u' instead.
var w = 8;
var divs = {};
if(this.format.indexOf("i") > -1)
divs.i = '<div style="padding:0px 0px 1px 0px;width:'+w*2+'px;min-width:'+w*2+'px;max-width:'+w*2+'px;float:left;display:inline-block;"' +
contentEditable="'+!this.disableSel+'" id="'+this.id+'-div-i'+'"> </div>';
... // making this with other format elements
var d = '';
var formatArray = this.format.split('');
for(var i = 0; i < formatArray.length; i = i + 1){
var currentChar = formatArray[i];
if(formatArray[i] === ":") currentChar = 'dp';
if(formatArray[i] === ".") currentChar = 'p';
if(formatArray[i] === " ") currentChar = 'sp';
d = d + divs[currentChar];
}
this.divs = d;
return d;
}
Making divs by format and inserting them to this tpl's div:
fieldSubTpl: [
'<div stlye="position: inherit; top: 0px; left: 0px" id="{id}-div" type="{type}" {inputAttrTpl}',
' size="1"',
'<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls} {editableCls}" autocomplete="off">' +
'</div>' +
'<input type="text" id="{id}" value="{[Ext.util.Format.htmlEncode(values.value)]}" ' +
'style="visibility: hidden; height: 10px; width: 0px; " />',
{
disableFormats: true
}
]
Then I do some changing function... I have some problems: I can't coloring this version, but... bigger problem is: if input is visibility: hidden;, it makes space after my tpl's div... on display: none makes time picker to absolute 0 0 position of window, not to the field (div)... Has anybody an idea about this?