What is (in summary) the function of the renderer in ext js?
A renderer is basically the function responsible for showing the underlying data to the user in a fashion or format that looks nice or makes sense.
Some examples might make it more clear:
A date renderer could take a javascript Date object and format it nicely like:
January 27, 2011
A number renderer could take a number like 2.23535346 and format it to 2 decimals like:
2.26
A renderer could even take a string like 'Y' or 'N' and instead show it as an image like:
Basically, the sky is the limit.
The renderer allows you to format data from a store in any way you see fit. It's a function that takes an data value and can return HTML. This is used to keep code that generates HTML separate from the code that generates the data.
Renderes transforms the value of display field into custom fashion.
let say i want to display any prize value into dollar
{ xtype:'displayfield',
name:'name',
value:'45',
renderer:this.transformIntoDollarConvention
}
here, transformIntoDollarConvention is a function defind above the constructor with a return statemnt .
transformIntoDollarConvention:function(value)
{
return value+'$';
}
Related
I actually face a problem with react I did not expect so far. Actually I have a google-react-chart Calender and an array, that I have parsed from different Date formats in one. Now i want to parse through my array and to map it's data to my google-react-chart calender. Unfortunatley I did most of my coding on the web in php so far, and guys, I don't have any idea how I can bring this construction to work :))
I tried to replace my hard coded data with a mapping function, but - as you may know - that only leads to a parsing error :)
So my simple question is: How can I process my arrayData to my Google react chart calender?
//did not work
mydateArray.map((item) =>{JSON.parse{item)}
The problem is that you are trying to parse a string, instead of a JSON object.
If you are getting this array from PHP, try passing it as a json_encode($variable), but not with the new Date() class. You can just pass it as the date string itself in the first position and the amount in the second position of the array;
Assuming you have the date and the data as something like this in PHP (before the json_encode):
$variable = [['MM/DD/YYYY', 50126],['MM/DD/YYY', 50126], and so on];
After you pass to React your PHP variable (via fetch or the dataset),
you can do something like:
mydateArray = JSON.parse(phpVariable);
and THEN, you can map it:
mydateArray.map(item => [new Date(item[0]), item[1]);
Just some Date warnings:
- Date in javascript must be constructed using Month/Day/Year, unfortunatelly. There is no createFromFormat, like PHP.
- The date ranges from 0 to 11, so october (10th month) must be written as 09/day/year, and so on.
I have this chart https://playground.anychart.com/D7okDBpO/4
AFAIK the x labels are automatically formatted according to the anychart.format.outputDateFormat(), so the only way to format them is to call anychart.format.outputDateFormat("someformat"). The problem is that I have multiple charts on a page and they all need different formats, and changing this global setting from multiple charts leads to concurrency issues (on some charts, the x labels are formatted with multiple different formats).
Is there some other way to format them? Having access to the original data from the formatting function for x labels would be enough, but it's not there:
chart.xAxis().labels().format(function () {
console.log(this); // only contains the already formatted date
return this.value;
});
this.tickValue contains unformatted dates, so you can use the {%tickValue} and {%x} string tokens to format the axes labels and the tooltip respectively. Please check this sample, pay attention to lines 35-36.
I'm trying to format my labels as percentages. I've tried looking at the documentation for Chartist.js and converting it to CoffeeScript, the problem is things aren't quite as clear to me since we're using Angular and therefore the angular-chartist module. It's a fairly trivial piece that I can't ask my co-founder to spend time on because there are many larger pieces at play in our project, but I would like to understand where I'm coming up short.
The chart is displayed using a chartist directive (which I'm guessing is a part of angular-chartist):
<chartist class="ct-chart" chartist-data="typeCounts" chartist-chart-type="Bar" chartist-responsive-options="typeCounts.barResponsiveOptions"></chartist>
This is my coffeescript for trying to get the options in (note that the labels and series properties are working fine; but the chartist element is not picking up the barResponsiveOptions property (therefore the console.log debug line is not firing):
# Organize return data into labels and series for Chartist
typeCounts = ResultService.getTypeCounts()
$scope.typeCounts.labels = Object.keys(typeCounts)
$scope.typeCounts.series = [typeCounts[type] for type in Object.keys(typeCounts)]
$scope.typeCounts.barResponsiveOptions = [
axisY:
labelInterpolationFnc: (value) ->
console.log("Firing barResponsiveOptions")
Math.round(value * 100) + '%'
]
Right now the chart displays with the data points on the y-axis as fractions of 1 (e.g. 0.0 -> 1.0).
You should use the chartist-chart-options attribute for your regular options and chartist-responsive-options if you're not using responsive options as explained here https://gionkunz.github.io/chartist-js/getting-started.html#responsive-sugar-topping.
Cheers
Ext.Date contains formats a and A for am/pm or AM/PM, respectively.
I want to add a format, call it b, for a/p without the m. I have searched parseFunctions and formatFunctions but did not find where the old format is defined.
Can anyone shed some light on this matter?
Have a look at formatCodes in Ext.Date:
The base format-code to formatting-function hashmap used by the format
method. Formatting functions are strings (or functions which return
strings) which will return the appropriate value when evaluated in the
context of the Date object from which the format method is called. Add
to / override these mappings for custom date formatting.
I have an Ext.form.field.Number where I can insert a number or use the spinner to select one.
How do I format this value for display in the Ext.form.field.Number field?
Let's say I want to have displayed, when you spin up or down:
1st
2nd
3rd
...
or
one
two
three
...
I believe, Extjs supporting ordinal number only for date
Please Refer Here
You can use this function to achieve that
function getGetOrdinal(n) {
var s=["th","st","nd","rd"],
v=n%100;
return n+(s[(v-20)%10]||s[v]||s[0]);
}