CODEWITHSUNDEEP
extjs4
Eleanor
Eleanor

Reputation: 357

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

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?

Upvotes: 0

Views: 2017

Answers (3)

Eleanor
Eleanor

Reputation: 357

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

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?

Upvotes: 0

Eleanor
Eleanor

Reputation: 357

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!

Upvotes: 0

egerardus
egerardus

Reputation: 11486

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

Upvotes: 1

Related Questions