0

マスク付きのテキスト フィールド (または時刻/日付フィールド) があります。__:__:__「_」の色を黒から白に変更する必要があります。Extjs 4 に入力を (編集可能な) div に変更するソリューションはありますか?

4

3 に答える 3

1

fieldSubTplフィールドの基本プロパティをオーバーライドしようとしましたか? divつまり、 の代わりに要素として a を持つプロパティを追加します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
    }
],
于 2013-03-04T17:55:17.217 に答える
0

今、私はここにいます、この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がそれらの値を変更しますが、それは私のソリューションの究極のバージョンではありません。今はまだたくさんの仕事があります...ええと...:)

そして、他のアイデアを知っているなら、それを投稿してください！

于 2013-03-06T13:22:15.357 に答える
0

私が試している他の解決策：

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 の後にスペースが作成されることですdisplay: none... 0 0 フィールド (div) ではなく、ウィンドウの位置... 誰かこれについて考えていますか?

于 2013-03-08T12:52:14.133 に答える