Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
    fabiand is on a distinguished road

      0  

    Default ExtJS 4.2 apply DateField to input form field

    ExtJS 4.2 apply DateField to input form field


    I am trying to convert my application from 3.1 to 4.2 and can't seem to figure out what needs to be modified in place of the 'applyto'. I have tried variations of renderto and contentel but can't seem to figure it out. With 4.2 nothing seems to happen. No errors in firebug...
    Ext 3.1 code that works-
    Javascript file -
    Code:
     cust_datepicker=function(){
     var els=Ext.select("input.date-picker",true);
     els.each(function(el)
      {
       new Ext.form.DateField(
       {applyto: el.id
       ,format: 'Y-m-d'
       ,altFormats: 'j|j/n|j/n/y|j/n/Y|j-M|j-M-y|j-M-Y'
       ,editable: false
       ,id : el.id
       }
      );
     }
    )};
    Ext.onReady(function(){
      cust_datepicker();
    });
    HTML Code:
    <form action="xxx/xxx.cgi" method="GET">
    <table><tr>
    <td><input name="startdate" class="date-picker"/></td>
    </tr></table>
    </form>

  2. #2
    Sencha User
    Join Date
    Apr 2013
    Posts
    2
    Vote Rating
    0
    fabiand is on a distinguished road

      0  

    Default Hint please

    Hint please


    I will accept a hint... right now I am taking the shotgun approach and I have probably overlooked the resolution.

  3. #3
    Sencha User
    Join Date
    Apr 2013
    Posts
    14
    Vote Rating
    3
    billvs is on a distinguished road

      0  

    Default


    i have the same problem,
    does extjs4 has any way to figure out this?

  4. #4
    Sencha User
    Join Date
    Sep 2013
    Posts
    14
    Vote Rating
    1
    trenty is on a distinguished road

      0  

    Default


    Same problem here for ExtJS 4.2. Changing applyTo to renderTo doesn't help.

    How to apply DateField to an existing input?

  5. #5
    Sencha User
    Join Date
    Sep 2013
    Posts
    14
    Vote Rating
    1
    trenty is on a distinguished road

      1  

    Default


    A look into Ext JS 3 -> 4 Compatibility Layer helps a bit:

    renderTo: Ext.get('inputId').parent() // + Ext.get('inputId').remove() later...

    Excerpt from ext3-compat.js
    Code:
    Ext.apply(Ext.Component.prototype, {
                initComponent: Ext.Function.createInterceptor(Ext.Component.prototype.initComponent, function() {
                    if(Ext.isDefined(this.applyTo)){
                        deprecate({pkg:'Ext.Component', member:'applyTo', type:'config', alt:'renderTo',
                            msg:'Applying components to existing markup via "applyTo" is no longer supported.'});
                        
                        var replaced = false;
                        try{
                            var target = Ext.get(this.applyTo);
                            if (target) {
                                var parent = target.parent();
                                if (parent) {
                                    this.renderTo = parent;
                                    target.remove();
                                    replaced = true;
                                    notify({pkg:'Ext.Component', member:'applyTo', msg:'This component will attempt to render to '+
                                        'the applyTo target\'s parent node ("' + parent.id + '"). If this did not work as expected then '+
                                        'you will have to replace the applyTo config manually before this component will render properly.'})
                                }
                            }
                        } catch(ex) {}
                        
                        if (!replaced) {
                            breaking({pkg:'Ext.Component', member:'applyTo', msg:'Attempted to render the component to the applyTo target\'s '+
                                'parent node, but this failed. You must resolve this manually before the component can render.'})
                        }
                    }
                })
            });

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Location
    france
    Posts
    2
    Vote Rating
    0
    Vickb is on a distinguished road

      0  

    Default


    Here something that worked for me with ExtJS 4.2.0.
    The solution is to create a Form containing a Field.
    HTML :

    HTML Code:
    <table>
      <tr>
        <td><div id="here"></div</td>
      </tr>
    </table>
    Javascript:
    Code:
    var here = document.getElementById('here');
    var my_form = Ext.create('Ext.form.Panel', {
            renderTo: here,
            bodyStyle: 'border: none',
            items: [{
                xtype: 'datefield',
                margin: false,
                name: 'from_date'
            }]
        });

Thread Participants: 3

Tags for this Thread