So I have this small Extjs application which consists of a grid with users. Each user has a field where I send from the server the date when he subscribed as a timestamp value (unix).
Ext.define('AP.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int', persist : false },
{ name: 'date_added', type: 'date', dateFormat: 'timestamp'},
{ name: 'username', type: 'string', persist : false }
]
});
The grid has a renderer so I can render that timestamp into a human readable format such as 29-Oct-2011 04:00 am:
...
{
header: 'Date added',
align: 'center',
sortable: true,
dataIndex: 'date_added',
width: 140,
fixed: true,
renderer: Ext.util.Format.dateRenderer('d-M-Y h:i a')
}
...
Now, everything works as intended, the values are displayed correctly but, I also have a form to edit each record in part. In my form, I can edit the date added field by providing a field xtype: 'datefield' which lets me chose the date. When I chose a new date for my record it shows something like 11/29/2011 (from my date above) but when I submit that form to update the record it posts something like this in the request payload: {"date_added": "NaN-NaN-NaNTNaN:NaN:NaN"}.
Can anybody shed a light on how do I go about saving dates in Extjs on fields that are retrieved as timestamps?
I did this with a gridpanel recently.
Even though the data returns from the database as a timestamp, using type: date worked fine for me...
// DATA MODEL
Ext.define('Particle', {
extend: 'Ext.data.Model',
fields: [
{ name: 'particle_id', type: 'long' },
{ name: 'name', type: 'string' },
{ name: 'type', type: 'string' },
{ name: 'start_date', type: 'date' },
{ name: 'sched_date', type: 'date' },
{ name: 'sched_time', type: 'date' },
{ name: 'notes', type: 'string' }
]
});
I rendered the date values in the column model as follows, note the renderer: config option. (I am using the field: config option because I used the grideditor extension in this to allow data to be edited in-line on the grid itself - you wouldn't need this if you are editing the values in a seperate form.)
// GRID COLUMN MODEL
var columns = [
{text: "Name", flex: 1, sortable: true, dataIndex: 'name', renderer: function(data,meta,record){meta.attr = 'ext:qtitle="Notes:"ext:qtip="' + record.get('notes') + '"'; return data;}},
{text: "Type", width: 55, sortable: true, dataIndex: 'case_lvl'},
{text: "RF Started", width: 80, sortable: true, dataIndex: 'start_date', renderer: Ext.util.Format.dateRenderer('j-M-Y')},
{text: "Sched Date", width: 80, sortable: true, dataIndex: 'sched_date', field: 'datefield', renderer: Ext.util.Format.dateRenderer('j-M-Y')},
{text: "Sched Time", width: 80, sortable: true, dataIndex: 'sched_time', field: 'timefield', renderer: Ext.util.Format.dateRenderer('g:i A')}
];
To answer your question specifically, I returned the date value to the database as a timestamp string by picking it out of the field using Ext.Date.format(). You could add this before submitting the form.
schedDate = Ext.Date.format(Ext.getCmp('schedDate').getValue(),'Y-m-d') + Ext.Date.format(Ext.getCmp('schedTime').getValue(),' H:i:s')
try like this in your data field:
{xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Date',
name: 'date',
format: 'm d Y'}
and change the format to 'd-M-Y h:i a'
Related
I have a form with datefield and timefield elements. I edited datefield format to Y-m-d and time output as follows:
var form = Ext.getCmp('travelForm').getForm();
var record = form.getRecord();
var values = form.getValues();
if (values.hora_inicio!='')
values.hora_inicio = values.hora_inicio + ':00';
if (values.hora_termino!='')
values.hora_termino = values.hora_termino + ':00';
if (values.hora_ingreso!='')
values.hora_ingreso = values.hora_ingreso + ':00';
record.beginEdit();
record.set(values);
record.endEdit();
console.log(JSON.stringify(values));
The display of JSON.stringify(values) is my data with correct format, but when I do
record.save()
it fails because the request payload says that the mentioned data (both timefield and datefield values) are ISO dates ('YYYY-mm-dd'T'HH:MM:SS). I'm guessing it has to do with the output of the timefield and datefield elements as objects, but I need orientation on how to change record's format to do a record.save() with the proper outputs.
EDIT
As suggested, I'm including the configuration of both timefield and datefield. They are part of the 'items' config of my form:
{
xtype: 'datefield',
margin: '5 0 0 0',
labelWidth: 150,
labelSeparator: ' ',
submitEmptyText: false,
anchor: '100%',
format:'Y-m-d',
fieldLabel: 'Fecha Inicio',
emptyText: 'Fecha Inicio',
name:'fecha_inicio',
allowBlank: false,
},
{
xtype: 'timefield',
minValue: '0:00',
maxValue: '23:30',
format: 'H:i',
increment: 30,
anchor: '100%',
fieldLabel: 'Hora Inicio',
id: 'form_hora_inicio',
emptyText: 'Hora Inicio',
name:'hora_inicio',
allowBlank: false
},
The model of this is:
Ext.define('Admin.model.travel.Travel', {
extend: 'Admin.model.Base',
fields: [
{
name: 'nombre'
},
{
name: 'fecha_inicio',
type: 'string'
},
{
name: 'hora_inicio',
type: 'string'
},
{
name: 'fecha_termino',
type: 'string'
},
{
name: 'hora_termino',
type: 'string'
}
],
idProperty: 'id_travel',
proxy: {
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'data'
},
api: {
create : 'index.php/travel/create_travel',
//read : '',
update : 'index.php/travel/update_travel',
destroy : 'index.php/travel/delete_travel'
}
}
});
Also I can point that if I do
console.log(record.data)
It shows me 2 displays: first, data as JSON which has correct format, and then it shows data again but with all dates converted to ISO format.
If it is of anyone's use, right before
record.save();
there was a
form.updateRecord(record);
which caused values of object 'record' to be retrieved again from form, with all kinds of format issues. Commenting that did it for me.
I have this datefield in my form :
{
xtype: 'datefield',
fieldLabel: 'Date commence travel',
name: 'tgl_awal',
id: 'tgl_awal',
vtype: 'daterange',
endDateField: 'tgl_akhir', // id of the end date field
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y'
}, {
xtype: 'datefield',
fieldLabel: 'Date end travel',
name: 'tgl_akhir',
id: 'tgl_akhir',
vtype: 'daterange',
startDateField: 'tgl_awal',
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y'
}
I want to set start date field in tgl_awal 3 months prior of today. I've tried to set it with Javascript variable that I defined outside but no effect. Any help appreciated.
Ext.Date#add is the method to use to add or subtract time interval to/from a given date.
Your datefield should have value set to :
value: Ext.Date.add(new Date, Ext.Date.MONTH, -3)
I think minValue is the attribute you are looking for.All dates prior to minValue are disabled. Or are you having trouble to get logic for 3 months prior to today ?
function beginDate(){
//put real logic for getting date prior to 3 months here
return new Date(2017,04,20);
}
Ext.create('Ext.container.Viewport', {
title: 'Historical',
layout : 'fit',
items : [
{
xtype: 'container',
autoScroll : true,
defaults : {
labelAlign : 'right'
},
layout: {
type: 'hbox',
align: 'top',
pack: 'center'
},
items: [
{
xtype: 'datefield',
fieldLabel: 'Date commence travel',
name: 'tgl_awal',
id: 'tgl_awal',
vtype: 'daterange',
endDateField: 'tgl_akhir', // id of the end date field
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y',
minValue : beginDate()
}, {
xtype: 'datefield',
fieldLabel: 'Date end travel',
name: 'tgl_akhir',
id: 'tgl_akhir',
vtype: 'daterange',
startDateField: 'tgl_awal',
allowBlank: false,
msgTarget: 'side',
format: 'd-m-Y'
}
]
}
]
});
The empty text in Ext 4.2 seems to not be displaying for Ext.grid.Panel
I can demonstrate by using the javascript editor here: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel
Just delete the data config for the store, and then add the emptyText config for the panel on the first example. It should look like this:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
//No data here
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
emptyText: 'Test Empty Text', //Add emptyText
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Note that the text will show up, once you click on Name, Email, or Phone - once the grid gets sorted.
Is this an Ext bug? How can I work around this to get emptyText to show up without having to sort the panel first?
No it's a feature. The point is to not show the empty text while the grid is loading data because it is not yet known whether there is data or not.
The feature is not needed when the data is all local though, so just add the following to the grid config:
viewConfig: {
deferEmptyText: false
}
I am new to ExtJS and need to put a ComboBox in an EditorGridPanel.
My code so far does not create the combobox in the EditorGridPanel and the EditorGridPanel does not display as well.
Here is the code and thanks for your help. capturetheflag
/*==== INVOICE DATA START =======================================================*/
/* create the ComboBox editor */
var idCombo = new Ext.form.ComboBox({
id: 'id',
valueField: 'id',
displayField:'id',
store: '', //what do I store here??
triggerAction: 'all'
});
var idRenderer = function(value,metaData,record){
// try record.data.teacher here
return "displayValue"
var iLineItemCM = new Ext.grid.ColumnModel([
{
id: 'i_line_item_id',
header: 'Line Item ID',
dataIndex: 'i_line_item_id',
width: 80,
editor: this.idCombo(),
renderer:idRenderer
}
,{
id:'i_line_item_name',
header: "Line Item Name",
dataIndex: 'i_line_item_name',
width: 315,
resizable: true,
align: 'center',
editor: new Ext.form.TextArea({
allowBlank: false
})
}
,{
header: "Amount",
dataIndex: 'i_line_item_amt',
width: 80,
align: 'right',
renderer: 'usMoney',
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})
}
]);
var iLineItemRec =
new Ext.data.Record.create([
{
name: 'i_line_item_id' ,
mapping: 'i_line_item_id' ,
type: 'string'
}
,{
name: 'i_line_item_name' ,
mapping: 'i_line_item_name' ,
type: 'string'
}
,{
name: 'i_line_item_amt' ,
mapping: 'i_line_item_amt' ,
type: 'string'
}
]);
var iLineItemStore = new Ext.data.Store({
url: '',
reader: new Ext.data.JsonReader({
root: 'rows'
},
iLineItemRec
)
});
var iLineItemGrid = new Ext.grid.EditorGridPanel({
id: 'iLineItemStore',
store: iLineItemStore,
cm: iLineItemCM,
cls: 'iLineItemGrid',
width: 'auto',
height: 'auto',
frame: true,
//title:'Edit Plants?',
//plugins:checkColumn,
clicksToEdit:1,
viewConfig: {
//forceFit: true
autoFit:true
},
tbar: [{
text: 'Add',
tooltip:'Add the line item',
handler : function(){
var r = new iLineItemRec({
i_line_item_name: '',
i_line_item_amt: ''
});
iLineItemGrid.stopEditing();
iLineItemStore.insert(0, r);
iLineItemGrid.startEditing(0, 0);
}
},
{
text: 'Delete',
tooltip:'Remove the selected line item',
handler: function(){
iLineItemGrid.stopEditing();
var r = iLineItemGrid.getSelectionModel().getSelectedCell();
iLineItemStore.removeAt(r[1]);
}
}
]
});
/////////////////// CODE ENDS
You need to create a data store and bind that to your combobox. Then in the combo config, you can tell it which field from the store you want to display and which field you want for the value. Here is an example from ExtJS 4 API Docs:
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'], // fields that your data consists of
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
// Create the combo box, attached to the states data store
var combo = Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states, // here you use the store
queryMode: 'local',
displayField: 'name', // you tell your combobox which field to display from the store
valueField: 'abbr', // you tell your combobox which field to use for value from the store
renderTo: Ext.getBody()
});
If you use combo.getValue(), and if e.g. "Alaska" were selected in your combobox, it would return "AK". You can also use the same field as displayField and valueField if you like.
I am new to Ext JS and trying various options on Grid. I have created a grid and added it to panel(Ext.panel.Panel). The grid is getting displayed with empty data(I have not added proxy to it). On occurrence of some event I construct a JSON Object and trigger loadData on grid.
Following is my code snippet.
Ext.define('AM.view.grid.Details', {
extend: 'Ext.grid.Panel',
alias: 'widget.details',
title: 'Widget Data',
store: {
autolaod: true,
fields: [{
name: 'widgetid',
mapping: 'widget_id',
type: 'string'
}, {
name: 'widgetname',
mapping: 'widget_name',
type: 'string'
}, {
name: 'widgetnotes',
mapping: 'widget_notes',
type: 'String'
}],
reader: {
type: 'json'
}
},
width: 620,
height: 400,
forceFit: true,
columns: [{
header: 'id',
dataIndex: 'widgetid',
hidden: true
}, {
header: 'Name',
dataIndex: 'widgetname',
width: 150
}, {
header: 'Note',
dataIndex: 'widgetnotes',
width: 150
}],
renderTo: Ext.getBody()
});
I have a function which is a callback function of another widget. When an event occurs this function getTriggered.
function someFunction(grid) {
var jsonData = formGridData();
grid.store.loadData(jsonData);
}
Please assume that grid is created and I have function formGridData() which converts the formed String to JSON Object and returns.
So when I run the app, If the jsonData is of length 5 then 5 empty rows appear in the grid.
Following is the JSONData
[{
'widget_id': 'widget-1',
'widget_name': 'gridpanel',
'widget_notes': 'This is used to handle..'
}, {
'widget_id': 'widget-2',
'widget_name': 'combo',
'widget_note': 'This is used to handle..'
}, {
'widget_id': 'widget-3',
'widget_name': 'panel',
'widget_note': 'This is used to handle..'
}]
Is there anything wrong in what I am doing?
Thanks,
Phani
Your dataIndexes on the grid are wrong.
columns: [{
header: 'id',
dataIndex: 'widget_id', //was widgetid
hidden: true
}, {
header: 'Name',
dataIndex: 'widget_name', //was widgetname
width: 150
}, {
header: 'Note',
dataIndex: 'widget_notes', //was widgetnotes
width: 150
}]
What is happening is it is seeing the right amount of rows, but since the json you have as an example is named widget_* and note widget*, it thinks they are something else, and thus can not show them in the grid as appropriate
Sorry i didn't noticed that
So it seems your dataIndex is invalid
http://jsfiddle.net/ssxenon01/WpZMU/8/