PDA

View Full Version : 2 Time Field on the same record



mixer80
22 Sep 2009, 4:41 AM
Hello,
is possible have 1 record (datetime type) mapped to 2 column fields in a EditorGridPanel ???
#1 show only date
#2 show only time

my code is like this:


var store_ti = new Ext.data.JsonStore({
root : 'ti',
totalProperty : 'totalCount',
idProperty : 'id',
autoLoad : false,
fields : [{
name : 'id'
}, {
name : 'orario',
type : 'date',
dateFormat : 'c'
}],
proxy : .....
.....
.....



var gr_giorni = new Ext.grid.EditorGridPanel(
{
id : 'gr_giorni',
store : store_ti,
clicksToEdit : 1,
loadMask : true,
stripeRows : true,
// grid columns
columns : [{
header : "Data",
dataIndex : 'orario',
sortable : true,
align : 'center',
renderer : Ext.util.Format
.dateRenderer('d/m/Y')
}, {
header : "Ora",
dataIndex : 'orario',
sortable : true,
align : 'center',
renderer : Ext.util.Format
.dateRenderer('H : i'),
}
.....
.....
I want edit only the field "Ora" with a timefield



editor : new Ext.form.TimeField(
{
allowBlank : false,
format : 'H : i',
onSelect : function(combo, record,
index) {
// setHour e
// setMinuti di
// orario
var b = combo.data.field1.valueOf();
var n_data = store_ti.getAt(0).data.orario;
var temp = new Array();
temp = b.split(':');
n_data.setHours(temp[0] * 1);
n_data.setMinutes(temp[1] * 1);
this.setValue(n_data);
store_ti.getAt(0).data.orario = n_data;
this.collapse();
}
})
My problem is after the collapse when i click out of my combo list , start the validation and i have " NaN : NaN"!!
Not a number.. why???

The value in the store is correct..
but my procedure must be fixed
because this problem cause the text Nan also in the first field..

Timefield modified my work later.. maybe onblur...
when i reload the grid.. the store is changed and I see all right with the new value..not Nan

See the pics sequence

exo
9 Oct 2009, 2:49 AM
ok, I had the same problem and I think I got it working for me.

The problem is when the timefield sends out the 'blur' event the editor attempts to update the date with the value the combobox provides, so in your case formatted to 'H : i'. Now, this obviously won't fly for a date. So you need to step in and set things straight.

In my case I listened to the validateedit event of the editorpanel (http://www.extjs.com/deploy/ext-3.0-rc1/docs/source/EditorGrid.html#event-Ext.grid.EditorGridPanel-validateedit), checked the column property to see if I was dealing with the timefield and used setHours on the originalValue property and re-assign the value property to this new date.

I hope I'm making any sense to you, if you require code just ask. Disclaimer I'm just a regular joe like you so maybe I'm taking the wrong approach but it seems to be working here, so there.

Animal
9 Oct 2009, 3:34 AM
editor : new Ext.form.TimeField(
{
allowBlank : false,
format : 'H : i',
onSelect : function(combo, record,
index) {
// setHour e
// setMinuti di
// orario
var b = combo.data.field1.valueOf();
var n_data = store_ti.getAt(0).data.orario;
var temp = new Array();
temp = b.split(':');
n_data.setHours(temp[0] * 1);
n_data.setMinutes(temp[1] * 1);
this.setValue(n_data);
store_ti.getAt(0).data.orario = n_data;
this.collapse();
}
})



Did you ever step THROUGH this code and see what it is REALLY DOING?

mixer80
9 Oct 2009, 5:52 AM
exo thanks for disponibility...
I've tried more time to check my code in FIrebug..


onSelect : function(combo, record,
index) {
// setHour e
// setMinuti di
// orario
var b = combo.data.field1.valueOf();
onSelect action I found the value selected in the list.. and save it in "b"
for example "07 : 00".


var n_data = store_ti.getAt(0).data.orario;
Then I save in "n_data" the correct data of my store
for example Fri Oct 09 2009 04:00:07 GMT+0200 (ora legale Europa occidentale)
(not string but object)



var temp = new Array();
temp = b.split(':');
Then I split my "b" in an array
for example temp['07','00']



n_data.setHours(temp[0] * 1);
n_data.setMinutes(temp[1] * 1);
Now I have minutes and hours and I can format "n_data"
using function .setHours(temp[0] and .setMinutes(temp[1]

Now my date in the store change... but when start "blur" event I see
NaN...

exo maybe I need a code example of your exploit...


@Animal:
Your post help someone or is only one of your usual admonishments?
That coincidence 2 post in the same day.....

Condor
9 Oct 2009, 6:10 AM
1. You are always modifying the first record instead of the actual record.
2. You are modifying the record.data object directly instead of calling record.set().

There is a much easier method to do this: Modify the value in the validateedit event of the EditorGridPanel, e.g.

columns: [{
header: 'Date',
id: 'date',
dataIndex: 'timestamp',
renderer: Ext.util.Format.dateRenderer('d/m/Y'),
editor: new Ext.form.DateField({
allowBlank: false,
format: 'd/m/Y'
})
}, {
header: 'Time',
id: 'time',
dataIndex: 'timestamp',
renderer: Ext.util.Format.dateRenderer('H:i'),
editor: new Ext.form.TimeField({
allowBlank: false,
format: 'H:i'
})
}],
listeners: {
validateedit: function(e){
var id = grid.getColumnModel().getColumnId(e.column);
if(id == 'date'){
var value = e.value.clearTime();
value.setHours(e.originalValue.getHours());
value.setMinutes(e.originalValue.getMinutes());
e.value = value;
}else if(id == 'time'){
var value = e.originalValue.clearTime();
value.setHours(e.value.getHours());
value.setMinutes(e.value.getMinutes());
e.value = value;
}
}
}

mixer80
9 Oct 2009, 6:55 AM
Condor thanks ..
If u not exist must create...
because U ARE ALWAYS DISPONIBLED to our poor ext user...

Now I study your code example..

Thaks for spend time for me..
and teach in good way.

p.s.= I'll send a wine bottle..

:-)

mixer80
13 Oct 2009, 1:42 AM
Please Condor don't kill me..
:)

I try condor code..

The first part , datefield, always run correctly..

if(id == 'date'){
var value = e.value.clearTime();
value.setHours(e.originalValue.getHours());
value.setMinutes(e.originalValue.getMinutes());
e.value = value;
The second , give me an error because value is a string and so I can't use date metod as getHours() and getMinutes().

if(id == 'time'){
var value = e.originalValue.clearTime();
value.setHours(e.value.getHours());
value.setMinutes(e.value.getMinutes());
e.value = value;
See my attach..

I try to fix this problem.. but it's not a beauty code...
i don't like create an array at runtime each time..


var value = e.originalValue.clearTime();
var temp = new Array();
temp = e.value.split(':');
value.setHours(temp[0]);
value.setMinutes(temp[1]);
e.value = value;
The BIG problem : the cell in editor_grid don't update the value.. so it seem like all code not have effect but if I change value in datefield than I see correctly both datefiled both timefiled.

Sure I use uncorrectly timefield..
Please light me.

Condor
13 Oct 2009, 1:52 AM
What kind of time editor are you using? The default Ext.form.TimeField doesn't return a String, it returns a Date!

mixer80
13 Oct 2009, 2:13 AM
:-?
I think the same thing...

Lib ext 3.0.0.
Firefox 3.5.3.

This is my code

{
header : "Ora",
dataIndex : 'orario',
id : 'ed_gr_giornate_time',
width : 60,
sortable : true,
align : 'center',
renderer : Ext.util.Format.dateRenderer('H : i'),
editor : new Ext.form.TimeField(
{
allowBlank : false,
format : 'H : i'
})
}

:((