ExtJS4：如何将文本字段输入到可编辑的div？

我有一个带掩码的文本字段（或时间/日期字段）<代码>我必须把“\uu”的颜色从黑色改为白色。Extjs 4是否有任何将输入更改为（可编辑）div的解决方案？

是否尝试覆盖字段的基本

fieldSubTpl

属性？即，添加带有a的属性作为

div

元素，而不是

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
    }
],

fieldSubTpl:[//注意：{id}这里实际上是{inputId}，但是{cmpId}是可用的
'',
{
禁用格式：true
}
],

现在我在这里，使用这个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
            }
        ]

在其他一些事件中，隐藏的输入和div改变了它们的值，但这不是我的解决方案的最终版本。现在我还有很多工作要做。。。嗯……：）

---

如果你知道其他的想法，请发布它

我正在尝试的另一种解决方案：

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'+'">&nbsp;</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;
}

buildDivsByFormat:function（）{
//12:'h:i'A'，'03:15 PM.'h:i:s.u'A'24:'h:i'h:i:s.u'。
var w=8；
var divs={}；
if（this.format.indexOf（“i”）>-1）
divs.i='哇……我只是想说，我认为这比它的价值更复杂。是的，我正在尝试tpl和javascript函数，但还没有成功…
''+this.rawValue+'
Thx作为您的答案！我尝试了
fieldSubTpl
。您的解决方案可能几乎不错。它需要
contentedible
查看光标。但是Firefox说还有另外一个问题：
TypeError:this.inputTextElement.value如果（this.inputTextElement.value.length==0）
，则this.inputTextElement.value是未定义的。另一方面，您和我的带有
contentEditable
的解决方案显示光标，但无法在其中写入内容。然后，在选择日期/时间后，所选值不会在div中显示（在两者中）。是的，
inputExtElement
属于插件。我想我需要使用隐藏的输入。。。
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'+'">&nbsp;</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;
}

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
       }
  ]