Custom Renderer in Ext-js - Bryntum/ExtJs UTC Date Issue - javascript

I'm trying to add a custom renderer to Bryntum Ext Gantt chart.
I have dates which are being shown in the local timezone, but I wish to show them in the UTC date because this is what the datasource is using to present the user with date (it's agnostic of browser time-zone) in the source application.
The post here led me in the right direction (seems to be what I need based on my tests): Why does ExtJS subtract a day when formatting a date?
How do I implement linked solution into a custom renderer?
I tried this and the column was blank:
{
xtype:'startdatecolumn',
sortable: false,
text: 'Start',
dataIndex: 'StartDate',
renderer: function (v, m, r) {
return Ext.util.Format.date(Ext.Date.parse(v, "Y-m-d"), "m-d-Y");
}
}
Also tried this and the column was blank:
{
xtype:'startdatecolumn',
sortable: false,
text: 'Start',
dataIndex: 'StartDate',
renderer: function (v) {
var dt = Ext.Date.parse(v, "Y-m-d");
Ext.util.Format.date(dt, "m-d-Y");
return dt;
}
}
With this format, it shows the date in local timezone (incorrect unless set to UTC).
{
xtype:'enddatecolumn',
dataIndex: 'EndDate',
sortable: false,
text: 'End'
}
Bryntum Column Example
columns : [
{
xtype : 'treecolumn',
header: 'Tasks',
sortable: true,
dataIndex: 'Name',
width: 200,
field: {
allowBlank: false
},
renderer : function(v, meta, r) {
if (!r.data.leaf) meta.tdCls = 'sch-gantt-parent-cell';
return v;
}
},
{
xtype : 'startdatecolumn'
},
{
//hidden : true,
xtype : 'enddatecolumn'
},

Fixed using this function:
function niceDate (v, m, r) {
var dt = padStr(1 + v.getMonth()) +
'-' +
padStr(v.getDate()) +
'-' +
padStr(v.getFullYear());
return dt;
}
function padStr(i) {
    return (i < 10) ? "0" + i : "" + i;
}
and in the column renderer :
{
xtype:'startdatecolumn',
sortable: false,
text: 'Start',
dataIndex: 'StartDate',
renderer: niceDate
}
When parsing the xml, I use a switch function with the following for timestamps:
case 'timestamp':
if(!empty(v))
v = new Date(parseInt(v));
break;
This seems to reliably feed a "date" object to ext.js and the column is rendered to match our sources date formatting using the renderer.

Related

Delete is not working in jqx-grid in angularjs

function deleteRender(row, column, value) {
if (!value) {
return;
}
var status = getUserStatus(value);
var actionText = deleteBlockHtml;
if (!isUserContext()) {
actionText = '<span>Delete</span>';
}
if (status) {
actionText = '<span>Activate<span>';
}
return '<span class="grid-link-render"><a class="delete-grid-row" href="#" id="deleteUser_' + value.trim() + '">' + actionText + '</a></span>';
}
columnList = [
{text: 'Status', datafield: 'status', width: "8%", groupable: true, editable: false},
{text: 'Action', datafield: '_id', cellsrenderer: deleteRender, width: "10%", groupable: true, editable: false, filterable: false, sortable: false, menu: false},
];
I am calling the deleteRender() function on click of my delete button which is present in action.Unfortunately,when i scroll down to bottom it is not getting called in grid.
Can anyone plese help me.Thanks.
Please share some more code. The method in cellsrenderer method takes care of tailoring the html to be rendered into that cell of that column using the bounded data for that column which is called for each row when the grid is being painted.
i don't think deleteRender should contain the column list in there. Also, can you please show where you are defining the delete event that is attached for that 'Delete' link in the action column ?
Or please let me know if i'm missing something.

Ext Js panel empty time field

I am new to ext js
I am sorry if I couldn't explain my problem properly
My problem is the time field in grid is displays as blank
It displays the value if change both the type to string from date in model and disable rendering function formatTime .
Below is the part of response json,model and view. I have copied the code from another working site.
Please tell me how can debugg and find the solution and what will be possible reasons
Extjs 4.2 mvc
Value in json response
"actualstarttime":"02:00 AM"
model
{name: 'actualstarttime', type: 'date'},
View
{
header: 'Time',
dataIndex: 'actualstarttime',
width: 85,
renderer: this.formatTime,
editor: {
xtype: 'timefield',
id : 'e_actualstarttime',
/*allowBlank: false,*/
minValue: '12:00 AM',
maxValue: '23:00 PM',
increment: 30,
anchor: '100%',
editable : false,
format: 'h:i A',
submitFormat: 'h:i A',
listeners: {
change: function(roweditor, changes, record, rowIndex) {
me.calculateInterval(roweditor, changes, record, rowIndex);
},
afterrender: function( roweditor, changes, record, rowIndex ) { //TECHNOKRAFTS: Added Listner to apply validation depending on the status
me.checkstatusvalidation(roweditor, changes, record, rowIndex);
}
}
}
}
Formattime function called in render
formatTime : function (value){
return value ? Ext.Date.dateFormat(value, 'g:i A') : '';
}
You need to add the dateFormat to your field definition.
Ext.define("Model", {
extend: "Ext.data.Model",
fields: [{
name: "actualstarttime",
format: "h:i A"
}]
});
Demo

How to change grid column value on DataBound event

I have the following Grid,
<div class="kotgrid">
</div>
And I bound the data as following. Here I want to change timedelay column value on DataBound event,
$(".kotgrid").kendoGrid({
dataSource: dataSource,
dataBound: function (e) {
var grid = this;
grid.tbody.find('>tr').each(function () {
var dataItem = grid.dataItem(this);
var d = new Date();
var currentTime = parseTime(dataItem.servertime);
var currenTime = d.getHours() + ":" + d.getMinutes();
var meanTime = diff(orderTime2, currenTime2)
//I want to set this meanTime in timedelay coloumn. How can I achieve this?
})
},
filterable: true,
scrollable: true,
columns: [
{ hidden: true, field: "orderitemid" },
{ field: "tableid", title: "Table No" },
{ field: "itemname", title: "Items" },
{ field: "quantity", title: "Quantity" },
{ field: "modifier", title: "Modifier" },
{ hidden: true, field: "orderedtime", title: "Time Delay" },
{ field: "timedelay", title: "Time Delay" },
{ hidden: true, field: "alert" },
{ hidden: true, field: "category", groupHeaderTemplate: "#= value #" },
{ command: { text: "Pickup", click: showDetails} }
],
mobile: "phone",
editable: false,
selectable: "row",
height: "600px"
});
I don't know how to achieve it. Any help will be highly appreciable.
Thanks in advance.
You don't need to iterate over the <tr> elements, unless you only want to do it for the current page. You can just iterate over grid.dataSource.data().
So you could do something like:
var data = this.dataSource.data();
$(data).each(function() {
var d = new Date();
var currentTime = parseTime(this.servertime);
var currenTime = d.getHours() + ":" + d.getMinutes();
var meanTime = diff(orderTime2, currenTime2)
// set on dataItem
this.set("timedelay", meanTime);
});
Regardless of how you get access to the dataItem, you can set any property using the set method (the data source contains Model items which inherit from ObservableObject).

How to determine what cell has been clicked?

I am new to JavaScript and I am having to use ExtJS 3.4. I have created a simple tree with 3 columns. I would like to know either what cell was selected, or even, just what row and column were selected.
I am just using the example that Sencha uses at http://dev.sencha.com/deploy/ext-3.4.0/examples/treegrid/treegrid.html :
var tree = new Ext.ux.tree.TreeGrid({
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
enableDD: true,
columns:[{
header: 'Task',
dataIndex: 'task',
width: 230
},{
header: 'Duration',
width: 100,
dataIndex: 'duration',
align: 'center',
sortType: 'asFloat',
tpl: new Ext.XTemplate('{duration:this.formatHours}', {
formatHours: function(v) {
if(v < 1) {
return Math.round(v * 60) + ' mins';
} else if (Math.floor(v) !== v) {
var min = v - Math.floor(v);
return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
} else {
return v + ' hour' + (v === 1 ? '' : 's');
}
}
})
},{
header: 'Assigned To',
width: 150,
dataIndex: 'user'
}],
dataUrl: 'treegrid-data.json'
});
Is it possible to do this in ExtJS 3.4? I can get the node but I do not see where it is telling me what cell or column or row was selected.
Any help would be greatly appreciated!
you need to attach listeners e.g.
listeners: {
afterRender: function(p) {
p.body.on('click', function() { // Function tapping clicks on Panel
alert(p.getTargetEl().dom.innerHTML);
});
});
}

Ext JS Combobox inside a grid [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
In reference with Combobox inside a grid example. I was able to do this in my page. problem is, when i change the value in one of the combobox, the rest of the combobox in the same row also change, they all have the same value.
I'm using only a javascript and basic html and ext js with this. I'm using ext sandbox (ext4).
any help?
if(columnData != undefined){
for (var i = 0; i < columnData.length; i++)
{
var storedata = [];
for(var gr = 0;gr < gridData.itemData[0][0].length;gr++){
storedata.push([(gr + 1),gridData.itemData[0][0][gr]]);
}
var comboRenderer = function(combo) {
return function(value) {
alert(value);
alert(combo.valueField);
var idx = combo.store.find(combo.valueField, value);
if ( idx < 0 ) {
idx = 0;
}
var rec = combo.store.getAt(idx);
return rec.get(combo.displayField);
};
};
fields.push({name:columnData[i].name});
columns.push({text:columnData[i].name, width: 140, menuDisabled: true, sortable: false, align: 'center', forcefit: true,
columns: [{
text: 0,
draggable: false,
hideable: false,
flex: 1,
width: 140,
dataIndex: columnData[i].name,
menuDisabled: true,
sortable: false,
align: 'center',
editable: true,
renderer: comboRenderer(new Ext4.form.ComboBox({
id: i.toString(),
typeAhead: true,
triggerAction: 'query',
mode: 'queryMode',
autoSelect : false,
autoShow : true,
emptyText : 'Select item',
store: new Ext4.data.ArrayStore({
fields: ['id' + i, 'description' + i],
data : storedata
}),
displayField:'description' + i,
valueField: 'id' + i,
forceSelection: false
})),
editor: new Ext4.form.ComboBox({
id: i.toString(),
typeAhead: true,
triggerAction: 'query',
mode: 'queryMode',
autoSelect : false,
autoShow : true,
emptyText : 'Select item',
store: new Ext4.data.ArrayStore({
fields: ['id' + i, 'description' + i],
data : storedata
}),
displayField:'description' + i,
valueField: 'id' + i,
forceSelection: false
})
}]
});
}
}
They all share the same store. You need to create a copy of the store for every combobox.
somehow, i just need to clear my cache for my updates to work. tnx #A1rPhun

Categories