SOME DATES ARE NOT SHOWED IN CHROME

SOME DATES ARE NOT SHOWED IN CHROME - date

i'am using Extjs 4.2. I had implemented an app using grids, but i'am having an issue just only in crhome. Some Dates are not showed in the grid. This is the part of my view:
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraLlegadaOrigen',
text: 'FechaHoraLlegadaOrigen',
format: 'd/m/Y H:i:s',
editor: {
xtype: 'datefield',
format: 'd/m/Y H:i:s',
submitFormat: 'd/m/Y H:i:s'
}
},
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraDespachoOrigen',
text: 'FechaHoraDespachoOrigen',
format: 'd/m/Y H:i:s',
editor: {
xtype: 'datefield',
format: 'd/m/Y H:i:s',
submitFormat: 'd/m/Y H:i:s'
}
},
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraLlegadaTumbes',
text: 'FechaHoraLlegadaTumbes',
format: 'd/m/Y H:i:s',
editor: {
xtype: 'datefield',
format: 'd/m/Y H:i:s',
submitFormat: 'd/m/Y H:i:s'
}
}...
And when i check chrome with its dev tools, i got the following incoming data to fill the grid:
{"listafichatransporte":[{"Id":"1","IdEmpresa":"12","Empresa":"DYS NEVADOS ","Contacto":"Violeta Olivera","Celular":"943200859","Placa1":"A7Z -847","Capacidad":"24 ","Chofer":"Moises Quispe Fernandez","Nextel":"999999999","CelularPeru":"985314508","CelularEcuador":"987049690","Termoregistro1":"b","Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"05/02/2013 10:30:00","FHDespaPuntoRecojo":"05/02/2013 00:00:00","FHLlegadaTumbes":"05/03/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"1","IdChofer":"1","IdCamionChofer":"10","Grower":"COMPOSITAN / JUREM"},{"Id":"2","IdEmpresa":"13","Empresa":"ECUACARGAS","Contacto":"GUSTAVO TORRES","Celular":"993418166","Placa1":"PAA-4803","Capacidad":"20 SKIDS","Chofer":"VICTOR HUGO FEIJOO","Nextel":"999999999","CelularPeru":"0051-957576513","CelularEcuador":"997511731","Termoregistro1":null,"Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"05/05/2013 00:00:00","FHDespaPuntoRecojo":"05/05/2013 00:00:00","FHLlegadaTumbes":"05/06/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"2","IdChofer":"2","IdCamionChofer":"18","Grower":"COMPOSITAN / JUREM"},{"Id":"3","IdEmpresa":"13","Empresa":"ECUACARGAS","Contacto":"GUSTAVO TORRES","Celular":"993418166","Placa1":"PAB-2090","Capacidad":"20 SKIDS","Chofer":"WILLIAM NARVAEZ","Nextel":"999999999","CelularPeru":"0051- 950659189","CelularEcuador":"995379357","Termoregistro1":null,"Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"05/07/2013 00:00:00","FHDespaPuntoRecojo":"05/07/2013 00:00:00","FHLlegadaTumbes":"05/08/2013 00:00:00","IdPuntoLlegada":"3","PuntoLlegadaEcuador":"GUAYAQUIL","FHLlegadaPuntoEcuador":" ","IdCamion":"3","IdChofer":"3","IdCamionChofer":"19","Grower":"COMPOSITAN / JUREM"},{"Id":"4","IdEmpresa":"13","Empresa":"ECUACARGAS","Contacto":"GUSTAVO TORRES","Celular":"993418166","Placa1":"PZQ-807","Capacidad":"20 SKIDS","Chofer":"JIMMY OBANDO","Nextel":"999999999","CelularPeru":"0051-963-995-83","CelularEcuador":"0991-515-348","Termoregistro1":null,"Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"30/06/2013 13:00:00","FHDespaPuntoRecojo":"30/06/2013 22:00:00","FHLlegadaTumbes":"01/07/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"4","IdChofer":"4","IdCamionChofer":"20","Grower":"COMPOSITAN"},{"Id":"5","IdEmpresa":"13","Empresa":"ECUACARGAS","Contacto":"GUSTAVO TORRES","Celular":"993418166","Placa1":"OAA-1457","Capacidad":"20 SKIDS","Chofer":"EUCEBIO GOMEZ","Nextel":"999999999","CelularPeru":"0051-971-691-62","CelularEcuador":"0985-985-783","Termoregistro1":"CORINOR 425971 PHR 373","Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"30/06/2013 00:00:00","FHDespaPuntoRecojo":"30/06/2013 19:00:00","FHLlegadaTumbes":"01/07/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"5","IdChofer":"5","IdCamionChofer":"21","Grower":"CORINOR / AGROCASPI"},{"Id":"6","IdEmpresa":"12","Empresa":"DYS NEVADOS ","Contacto":"Violeta Olivera","Celular":"943200859","Placa1":"A7Z -847","Capacidad":"24","Chofer":"GERMAN TRONCOSO","Nextel":"999999999","CelularPeru":"943200861","CelularEcuador":"No informaron","Termoregistro1":"COMPOSITAN 425982 PHR 483","Termoregistro2":null,"IdPuntoRecojo":"1","PuntoRecojo":"TRUJILLO","FHTranspPuntoRecojo":"01/07/2013 09:00:00","FHDespaPuntoRecojo":"01/07/2013 00:00:00","FHLlegadaTumbes":"02/07/2013 00:00:00","IdPuntoLlegada":"2","PuntoLlegadaEcuador":"QUITO","FHLlegadaPuntoEcuador":" ","IdCamion":"1","IdChofer":"6","IdCamionChofer":"15","Grower":"CORINOR / COMPOSITAN"}]}
So, the rows 4 and 5 don't show date fields FHDespaPuntoRecojo, and FHLlegadaTumbes, but in firefox and i.e. they are showed. Besides the other rows the data is showed normally.
So, what can i do to fix this on chrome. Any idea?
Thank you in advance...

I assume that you are using a local store to fill the grid. Make sure that the date-fields are correctly configured in your store, like so:
fields: [
'someField',
'someOtherField,
{
name: 'someDateField',
type: 'date',
dateFormat: 'Y-m-d'
},
...
]

Related

Unable to Validate Field in Shopware Backend Form

I am trying to validate a field in my ExtJs file by sending a hit to my controller.. all works fine and I get the result back.. but the problem is that I am unable to get the me.article in the code as it shows undefined so my logic in the controller does not return the result as expected.
Any help would be highly appreciated.
Note: this only happens for Shopware v.5.4.6. It works fine for Shopware 5.2.
Shopware.apps.Article.view.detail.Base.prototype.createLeftElements = function() {
var me =this, articleId = null, additionalText = null;
console.log('article', me.article);
if (me.article instanceof Ext.data.Model && me.article.getMainDetail().first() instanceof Ext.data.Model) {
articleId = me.article.getMainDetail().first().get('id');
additionalText = me.article.getMainDetail().first().get('additionalText');
}
me.nameField = Ext.create('Ext.form.field.Text', {
name: 'name',
dataIndex: 'name',
fieldLabel: me.snippets.name,
allowBlank: false,
enableKeyEvents:true,
checkChangeBuffer:700,
labelWidth: 155,
anchor: '100%',
vtype:'remote',
validationUrl: '{url controller="MyController" action="check"}',
validationRequestParam: articleId,
validationErrorMsg: '{s name=detail/base/number_validation}Validation Message.{/s}'
});
// .. some code here which is irrelevant
return [
me.supplierCombo,
me.nameField,
me.mainDetailAdditionalText,
me.numberField,
{
xtype: 'checkbox',
name: 'active',
fieldLabel: me.snippets.active,
inputValue: true,
uncheckedValue:false
},
{
xtype: 'checkbox',
name: 'isConfigurator',
fieldLabel: me.snippets.configurator.fieldLabel,
inputValue: true,
uncheckedValue:false
}
];
};

I am not that deep into ExtJS, but perhaps the CSRF-protection causes this problem? Perhaps you need to whitelist your controller.
https://developers.shopware.com/developers-guide/csrf-protection/#addition-to-backend-token-validation

Highcharts custom error handler

We are using highcharts to plot multiple charts on a single HTML page.
However one/some of the chart throw highchart error and we like to capture those error and show different error to user.
For this highcharts do provide custom error handler. But this custom error handler does not provide information about specific chart throwing that error.
Here that JS Fiddle provided by highcharts, which works fine for a chart :
Highcharts.error = function (code, true) {
// See
https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
// for error id's
Highcharts.charts[0].renderer
.text('Chart error ' + code)
.attr({
fill: 'red',
zIndex: 20
})
.add()
.align({
align: 'center',
verticalAlign: 'middle'
}, null, 'plotBox');
};
http://jsfiddle.net/gh/get/library/pure/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/highcharts-error/
Any idea how can I use this custom error handler per chart?
I'm using new Highcharts.Charts(options) to create new chart, but don't see way to specify error handler per chart.
Additional info: Charts are refreshed/appended using data through APIs. User that configures chart also configures refresh interval and query to use for chart.

Error handling in HighCharts does not make much sense. It would make more sense to pass the chart instance to Highcharts.error (like Kamil Kulig wrote) or to have an error event in chart.events. Anyways
here is a solution I came up with:
Create an array of errors:
var chartErrors = [];
Create an error handler which will push errors into the chartErrors. Error objects I'm making look like this: {"chartIndex": <chart index>, "errorCode": <error code>}. All charts are added to the Highcharts.charts array when they are created so we can use Highcharts.charts.length - 1 for the chartIndex.
Highcharts.error = function (code) {
// See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
// for error id's
chartErrors.push({"chartIndex": Highcharts.charts.length - 1, "errorCode":code});
};
After initiating all charts we will have an array of errors. We can call forEach on this array and handle errors the way we want.
chartErrors.forEach(function(c) {
Highcharts.charts[c.chartIndex].renderer
.text('Chart error ' + c.errorCode)
.attr({
fill: 'red',
zIndex: 20
})
.add()
.align({
align: 'center',
verticalAlign: 'middle'
}, null, 'plotBox');
});
Working example:
Note: I've wrapped the code in a self invoking function to prevent leaking variables to global scope.
(function() {
var chartErrors = [];
Highcharts.error = function (code) {
// See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
// for error id's
chartErrors.push({"chartIndex": Highcharts.charts.length - 1, "errorCode":code});
};
Highcharts.chart('container1', {
title: {
text: 'Demo of Highcharts error handling'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
type: 'logarithmic',
min: 0
},
series: [{
data: [1, 3, 2],
type: 'column'
}]
});
Highcharts.chart('container2', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Highcharts.chart('container3', {
title: {
text: 'Demo of Highcharts error handling'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
},
yAxis: {
type: 'logarithmic',
min: 0
},
series: [{
data: [1, 3, 2],
type: 'column'
}]
});
chartErrors.forEach(function(e) {
Highcharts.charts[e.chartIndex].renderer
.text('Chart error ' + e.errorCode)
.attr({
fill: 'red',
zIndex: 20
})
.add()
.align({
align: 'center',
verticalAlign: 'middle'
}, null, 'plotBox');
});
})();
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container1" style="height: 400px"></div>
<div id="container2" style="height: 400px"></div>
<div id="container3" style="height: 400px"></div>

Highcharts error function is not adjusted to have a chart context as an argument, because it can be executed in different contexts too.
For example: error number 16 occurs when Highcharts/Highstock is loaded second time in the same page. It has nothing to do with the chart, because it depends on script importing only.
The workaround I found requires some searching and and a little bit of coding.
Refer to this live demo: http://jsfiddle.net/kkulig/a8nun9aL/
I found the place in the code responsible for throwing the error 10 (the one you used in your example). I overwrote this function (see this doc page for more information about overwriting in Highcharts: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts) and added a chart variable (from Highcharts.Axis.prototype.setTickInterval scope) as the third argument:
if (
axis.positiveValuesOnly &&
!secondPass &&
Math.min(axis.min, pick(axis.dataMin, axis.min)) <= 0
) { // #978
H.error(10, 1, chart); // Can't plot negative values on log axis // MODIFIED LINE
}
It should be done for all errors you want to custom handle.
Now it can be used in custom Highcharts.error function:
Highcharts.error = function(code, stop, chart) {
// See https://github.com/highcharts/highcharts/blob/master/errors/errors.xml
// for error id's
Highcharts.charts[0].renderer
.text('Chart error ' + code + " on chart titled: " + chart.title.textStr)
(...)
You can add your own property in chart constructor options and find it in chart.options object.

How to hide column in angular datatable excel export but show column on screen?

I have this code to enable the excel export button:
self.dtOptions = DTOptionsBuilder.newOptions()
.withButtons([
{
extend: 'excel',
text: 'Export to Excel',
title: 'banana report'
}]);
Previously I have used this code to hide the column in the datatable but have it show up in the excel:
self.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(11).notVisible()
];
But how can I do the opposite? How can I hide in excel but not the datatable?

Use exportOptions. For example
.withButtons([
{
extend: 'excel',
text: 'Export to Excel',
title: 'banana report',
exportOptions: {
columns: [ 0, 1, 6, 7 ]
}
}])
Will only export the specifed column indexes. See
https://datatables.net/extensions/buttons/examples/html5/columns.html
https://datatables.net/extensions/buttons/examples/print/columns.html

Limiting user selections with mobiscroll 2.5.0

I am using this library: mobiscroll.custom-2.5.0.min.js. How do I set limits to deny users' selecting past dates?
My code:
xtype:'panel',
layout:'hbox',
width: (screenWidth-(84+24+55))/2,
cls: 'paymentsSectionDetailsDate',
items:[{
xtype:'panel',
html:'<div class="paymentsSectionDetailsDateLabel" >'+txt_PayOn+'</div>',
width: 80
},{
xtype: 'button',
text:txt_select_date,
name: 'BillPayDetailsForm_date',
id:'BillPayDetailsForm_date',
cls: 'paymentsSectionDetailsDateTextButt',
listeners:{
tap : function()
{
inputNumber=4;
$('#dateIos').fadeIn("slow");
}
}
}]

I am not familiar with mobiscroll, could you use a datepicker? It has 'yearFrom' and 'yearTo' configuration options. You might be able to use a listener to get the data into mobiscroll.

Sencha ExtJS RESTful grid example confusion

I am very confused by the Sencha documentation for ExtJS. The documentation begins with a Getting Started guide which highlights and illustrates the importance on a suitable structure for the classes and source code of your application. But the provided examples then break all the conventions laid down by the Getting Started guide. Instead of code being broken down into appropriate Model, Store, View, etc. class files the examples are provided as a single file with example source code which is not easily re-usable in separate source files.
I started by following the Portal example (http://docs.sencha.com/ext-js/4-1/#!/example/portal/portal.html) as this is the sort of application I want to create. I wanted to enhance the Portal example and add in a screen which would display a grid and use a RESTful web service as the data backend. I have created the backend I just want to create the front-end. So I looked at the RESTful example (http://docs.sencha.com/ext-js/4-1/#!/example/restful/restful.html)
I have tried to copy the RESTful example into the recommended pattern of seperate classes e.g. Model, Store, View:
Model:
Ext.define('MyLodge.model.Member', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'},
{name: 'href', type: 'string'}
]
});
Store:
Ext.require('MyLodge.model.Member');
Ext.define('MyLodge.store.Members', {
autoLoad: true,
autoSync: true,
model: 'MyLodge.model.Member',
proxy: {
type: 'rest',
url: 'http://localhost:8888/rest/memberapi/members' ,
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json'
}
},
listeners: {
write: function(store, operation){
var record = operation.getRecords()[0],
name = Ext.String.capitalize(operation.action),
verb;
if (name == 'Destroy' ) {
record = operation.records[0];
verb = 'Destroyed';
} else {
verb = name + 'd';
}
Ext.example.msg(name, Ext.String.format( "{0} member: {1}", verb, record.getId()));
}
}
});
View:
Ext.define('MyLodge.view.content.MemberGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.membergrid',
initComponent: function(){
var store = Ext.create('MyLodge.store.Members' );
Ext.apply( this, {
height: this.height,
store: store,
stripeRows: true,
columnLines: true,
columns: [{
id : 'name',
text : 'Name',
flex: 1,
sortable : true,
dataIndex: 'name'
},{
text : 'E-Mail',
width : 150,
sortable : true,
dataIndex: 'email'
},{
text : 'Href',
width : 200,
sortable : true,
dataIndex: 'href'
}],
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
iconCls: 'icon-add',
handler: function(){
// empty record
store.insert(0, new MyLodge.model.Member());
rowEditing.startEdit(0, 0);
}
}, '-', {
itemId: 'delete',
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
handler: function(){
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
store.remove(selection);
}
}
}]
}]
});
this.callParent(arguments);
}
});
But I am not sure where to put the code to control the grid row selection and enable the Delete button:
grid.getSelectionModel().on('selectionchange', function(selModel, selections){
grid.down('#delete').setDisabled(selections.length === 0);
});
Also when I press the Add button I get the following error:
Uncaught TypeError: Object [object Object] has no method 'insert'.
Any help would be appreciated.

You are having scoping issues. Basically the variable store is defined only in the initComponent function and therefore of local function scope.
Your handler function has it's own scope. It is firing in the scope of the toolbar button. So if you say this in the handler it would refer to the button. Hence you can say this.up('panel').store - and that gives you the correct reference to the store backing your grid panel.
Another advice is not to implement everything at once. Write a little bit to see if it works and then add to it little by little.

RE: the docs examples, I agree that it's frustrating, but there's not many options. Having a fully-MVC-style implementation of each example would not only be onerous to produce, but would also probably make point of the example get lost in the structure.
RE: your question about the where to "put" the code to control the grid, I would recommend setting up a controller with listeners for the events on the grid in the control() section. This will let you decouple the handling of the events that are fired by your grid from the view itself.

We Keep Coding

iphone swift flutter scala powershell matlab mongodb postgresql perl eclipse

SOME DATES ARE NOT SHOWED IN CHROME - date

I assume that you are using a local store to fill the grid. Make sure that the date-fields are correctly configured in your store, like so: fields: [ 'someField', 'someOtherField, { name: 'someDateField', type: 'date', dateFormat: 'Y-m-d' }, ... ]

Related

Unable to Validate Field in Shopware Backend Form

Highcharts custom error handler

How to hide column in angular datatable excel export but show column on screen?

Limiting user selections with mobiscroll 2.5.0

Sencha ExtJS RESTful grid example confusion

Categories

Resources