1. #1
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default Unanswered: Ext datefield setValue how??

    Unanswered: Ext datefield setValue how??


    i wonder how the setValue method of Ext.form.field.date work? A dummy example here:


    var item = {
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'From',
    id: 'from',
    name: 'from_date',
    maxValue: new Date() // limited to the current date or prior
    };
    item.setValue(new Date());


    the last line would give me an error, saying item.setValue is not a function. How can that be?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,910
    Answers
    655
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You can use value: new Date() to set this initially. As for your call, based on code:

    var item = Ext.getCmp('from'); // id property; we also recommend not using id, but rather itemId
    item.setValue(new Date());

    Regards,
    Scott.

  3. #3
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      -1  

    Default


    Thanks. Where should i place the getCmp call?

    In my little dummy case, it is defined as such:

    Code:
    Ext.define('Direct.Test.Dashboard', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.dashboard',
        title: 'Button',
        minHeight: 500,
        items: [],
    
        layout: {
            type: 'vbox',
            align: 'left'
        },
    
        initComponent: function () {
            var item = {
                xtype: 'datefield',
                anchor: '100%',
                fieldLabel: 'From',
                id: 'from',
                name: 'from_date',
                value: new Date(),
                maxValue: new Date()  // limited to the current date or prior
            };
            //        item.setValue(Ext.Date.add( new Date(), Ext.Date.Day, -7));
            this.items.push(item);
            this.callParent(arguments);
        },
    
        afterRender: function () {
            var item = Ext.getCmp('from');
            item.setValue(new Date());
        }
    });
    And i get error: container not defined.

    Also, can you elaborate on "we also recommend not using id, but rather itemId item.setValue(new Date());"

    I read getCmp is dangerous, but everyone is using it, even the samples provided by sencha

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,910
    Answers
    655
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this helps:

    Code:
    Ext.define('Direct.Test.Dashboard', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.dashboard',
        title: 'Button',
        height: 500,
        width: 500,
        minHeight: 500,
        items: [],
    
        layout: {
            type: 'form',
            align: 'left'
        },
    
        initComponent: function () {
            var item = {
                xtype: 'datefield',
                anchor: '100%',
                fieldLabel: 'From',
                id: 'from',
                name: 'from_date',
                //value: new Date(),
                maxValue: new Date()  // limited to the current date or prior
            };
            //        item.setValue(Ext.Date.add( new Date(), Ext.Date.Day, -7));
            this.items.push(item);
            this.callParent(arguments);
        },
    
    	listeners: {
    	    afterrender: function () {
    	        var df = Ext.getCmp('from');
    	        df.setValue(new Date());
    	    }
    	}
    
    
    });
    
    Ext.onReady(function(){
    
    	Ext.create('Direct.Test.Dashboard',{
    		renderTo: Ext.getBody()
    	});
     
    });
    Regards,
    Scott.

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    Thanks. It works. But why? When do i need to add afterrender, onRender, etc into listeners? Most of my custom components have afterrender without being part of listeners. Why this one would need a listener to handle?

    Sorry, i just do not understand the difference of having vs. not having listeners for the render-related events.

    And how do I minimize the space between the field label and the actual datefield? I tried to use labelWidth, labelStyle, none works.

    thanks again

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    Wonder if i can get an answer to the above question?

  7. #7
    Sencha User
    Join Date
    Apr 2011
    Posts
    96
    Vote Rating
    3
    stimpy has a little shameless behaviour in the past

      0  

    Default


    I set the label padding like this
    Code:
    labelPad:5
    for what its worth i set date in a load method like this
    Code:
    Ext.getCmp('myDate').setValue(new Date(action.result.data.myDate));

  8. #8
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    unfortunately, add labelPad does not automatically "shrink" the label, eventually i had to overwrite the following markup.

    <td id="enddt-labelCell" class="x-field-label-cell" width="155" valign="top" style="width:20" halign="left">

    But i do not think this should be so hard to simply change the label width.

    Yes, the setValue method would work. But what i really wanted to do is to extend the dateField component, and expose setValue and getValue method. But I did not anticipate this would be such a big problem. Why? Any other better ways?

  9. #9
    Sencha Premium Member
    Join Date
    Sep 2010
    Posts
    89
    Vote Rating
    0
    xun is an unknown quantity at this point

      0  

    Default


    I changed item creation from xType to Ext.Create, so the dateField will created as the component is created. Code snippet in the following ...

    Ext.apply(Ext.form.VTypes, {
    daterange: function (val, field) {
    var date = field.parseDate(val);


    if (!date) {
    return;
    }
    if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
    var start = Ext.getCmp(field.startDateField);
    start.setMaxValue(date);
    start.validate();
    this.dateRangeMax = date;
    }
    else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
    var end = Ext.getCmp(field.endDateField);
    end.setMinValue(date);
    end.validate();
    this.dateRangeMin = date;
    }
    /*
    * Always return true since we're only using this vtype to set the
    * min/max allowed values (these are tested for after the vtype test)
    */
    return true;
    }
    });


    Ext.define(Components.MultiDateSelector', {
    extend: 'Ext.form.Panel',
    border: false,

    items: [],
    layout: {
    type: 'table',
    columns: 3
    },


    defaults: {
    // applied to each contained panel
    bodyStyle: 'padding:2px;',

    border: 0
    },
    initComponent: function () {




    this.fromDateField =Ext.create('Ext.form.field.Date', {
    id: 'startdt',
    width: this.dateFieldWidth,
    maxValue: this.maxDate,
    minValue: this.minDate,
    vtype: 'daterange',
    endDateField: 'enddt'
    });

    this.toDateField = Ext.create('Ext.form.field.Date',{
    id: 'enddt',
    width: this.dateFieldWidth,
    maxValue: this.maxDate,
    minValue: this.minDate,
    vtype: 'daterange',
    startDateField: 'startdt'
    });


    this.items.push(this.fromDateField);
    this.items.push({ html: 'to' });
    this.items.push(this.toDateField);


    this.callParent();


    },


    ....




    setFromDate: function (date) {
    this.fromDateField.setValue(date);
    },

  10. #10
    Sencha User
    Join Date
    Oct 2013
    Posts
    8
    Vote Rating
    -5
    andersoninfidelitysencha can only hope to improve

      0  

    Default


    How can I override Extjs TextField? make it works like Date component, display content use some other format, but pass original value.