extjs4 - Extjs 4：如何将文本字段输入到可编辑的 div？

Question

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

Answer 1

您是否尝试过覆盖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
    }
],

Answer 2

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

我做了一个新插件扩展了原来的插件，全部更改this.inputTextElement.value为获取或设置 HTML

this.getPicker().on('select', function (p, r, o){
     Ext.get(this.id + '-inputEl-div').setHTML(r.data.disp);
}, this);

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

如果您知道其他想法，请发布！

Answer 3

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

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

按格式制作 div 并将它们插入到这个 tpl 的 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
       }
  ]

然后我做了一些改变功能......我有一些问题：我无法为这个版本着色，但是......更大的问题是：如果输入是visibility: hidden;，它会在我的 tpl 的 div 之后腾出空间...... ondisplay: none使时间选择器变为绝对0 0 窗口的位置，而不是字段（div）...有人对此有任何想法吗？