Ext datefield setValue how??

[xun]

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?

[scottmartin]

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.

[xun]

Thanks. Where should i place the getCmp call?

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

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

[scottmartin]

See if this helps:

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.

[xun]

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

[xun]

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

[stimpy]

I set the label padding like this

labelPad:5

for what its worth i set date in a load method like this

Ext.getCmp('myDate').setValue(new Date(action.result.data.myDate));

[xun]

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?

[xun]

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