PDA

View Full Version : Ext datefield setValue how??



xun
26 Apr 2012, 9:15 AM
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
26 Apr 2012, 10:15 AM
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
26 Apr 2012, 10:39 AM
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
26 Apr 2012, 12:37 PM
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
26 Apr 2012, 4:38 PM
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
28 Apr 2012, 2:53 PM
Wonder if i can get an answer to the above question?

stimpy
30 Apr 2012, 5:19 AM
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
30 Apr 2012, 6:57 AM
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
30 Apr 2012, 7:32 AM
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);
},

andersoninfidelitysencha
30 Oct 2013, 10:41 PM
How can I override Extjs TextField? make it works like Date component, display content use some other format, but pass original value.