I have an object that has a date column in the it inside an ArrayStore. I then bind that ArrayStore to a grid using the store property. Currently i am using the following string formatter to display the dt in a custom format: formatter: 'date("d M Y")'. This work with no issue and the dates appear as 13 Oct 2014. I would like to uppercase the Oct part. I have tried the following thing I have found online that does not work and produces errors: 'uppercase(date("d M Y"))'. There does not appear to be much documentation on fromatters besides saying it is a string.
How can I uppercase this?
columns:
{
items: [
{ text: 'Date', dataIndex: 'date', editor: 'datefield', formatter: 'uppercase(date("d M Y"))' }
]
}
The formats available on dates are same as here
It doesn't appear there is a particular month with all uppercase however it could be achieved with a renderer like so:
instead of formatter: 'uppercase(date("d M Y"))'
something like this:
renderer: function(value){ return Ext.util.Format.date(value, 'd M Y').toUpperCase(); }
Related
In my extjs6 project I have a datefield. When I getvalue it comes back as '2017-07-26T00:00:00'. How can I convert this to 07-26-2017?
I am trying the below which is coming back blank.
var newVal = Ext.Date.format(value, 'm-d-Y')
screenshot below
As per the docs,
Ext.Date.parse makes a javascript date from a string.
Ext.Date.format makes a string from a javascript date.
Since you need to convert a string to a string, you have to combine the two:
Ext.Date.format(Ext.Date.parse('2017-07-26T00:00:00','c'), 'm-d-Y')
You don't need to use
Ext.Date.format and Ext.Date.parse functions
just change the xtype and format property to your gridcolumn
xtype: 'datecolumn',
format: 'm-d-Y'
Example code set grid column property
columns: [
{
text: 'Date',
dataIndex: 'date',
xtype: 'datecolumn',
format:'m-d-Y'
}
],
This will give the output as in '07-26-2017' format..
No need to use renderer as well
hope ull try this
Can someone help me to figure out a way to arrange the columns irrelevant of it columns array positioning? For example, in below grid columns array i just want to display Phone as 1st column and Name as 2nd column. How can i achieve that programmatically?
Columns Array:-
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email'
}, {
text: 'Phone',
dataIndex: 'phone'
}]
While debugging the grid column config with Chrome developer tools, i figured out a parameter "fullColumnIndex" which value getting increased for every column. But specifying that explicitly doesn't make any difference :(
Thanks!
You can do it by using reconfigure method. Docs — http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.panel.Table-method-reconfigure
Here is the description of this method:
reconfigure( [store], [columns] )
Reconfigures the grid / tree with a new store/columns. Either the store or the > columns can be omitted if you don't wish to change them.
The enableLocking config should be set to true before the reconfigure method is > executed if locked columns are intended to be used.
Parameters
store : Ext.data.Store (optional)
The new store. You can pass null if no new store.
columns : Object[] (optional)
An array of column configs
I have a property grid and we set the source for this from a controller. There is a date field that needs formatting. I checked the documentation but the example is not so easy to understand.
The grid view just has the grid defined. The controller gets the values from the server and then uses setSource to populate the grid.
I tried this:
sourceConfig: {
installationDate: {
renderer: Ext.util.Format.date('d.m.Y H:i:s')
}
}
How do I format the date using sourceConfig?
Provide a renderer function in your sourceConfig. You can use the utility function Ext.util.Format.dateRenderer to generate it. To set the format for the corresponding editor, use the date field's format config.
sourceConfig: {
'dateAttribute': {
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
editor: {
xtype: 'datefield',
format: 'd.m.Y'
}
}
}
}
Also see this fiddle.
EDIT:
As pointed out in the comments below, it is important that the keys of sourceConfig match exactly with the keys as used in the actual source in order for the configuration to apply correctly.
In Sencha Touch 2 I have a model with the following fields, DateTimeStart if rendered in a List it shows in this format
Mon Feb 11 2013 11:55:00 GMT +100 (W. Europe Standard Time)
I need to create another field (DateTimeStartConverted) based on DateTimeStart
I need to convert such date in a more short format using 'Y-m-d'.
Printing the result of DateTimeStartConverted in my conversion method it does not display any result (no errors has been throw).
Any idea how to fix it?
{
name: 'DateTimeStart',
type: 'date',
dateFormat: 'MS'
}, {
name: 'DateTimeStartConverted',
type: 'date',
convert: function(value, record){
var jsonDate = record.get('DateTimeStart');
return Ext.Date.format(jsonDate, 'Y-m-d');
}
}
If you just need to display the date properly in a list item template, then you can use the :date() function within your template:
{
xtype: 'list',
...
itemTpl: '<p>Date display test - {DateTimeStart:date("m/d/Y")}</p>',
...
}
As for your convert function, it looks sound, but what do you get for the value and record arguments? Knowing those values would help a lot.
I have a grid Panel with 4 columns, one of these is numeric (number up to 4 digit), and I would like to sort the row by this colum. My problem is Ext JS sorts the rows as if the column was textual, so 5 is sorted after 3000.
I tried to use a numberColumn instead of a normal column (specifying the x-type in the columns of the GridPanel), but it doesn't change the sorting.
Thus I tried to format the numbers so 5 would appear like 0005, and 0005 would be before 3000. But the format options of the numberColumn do not appear to let me specify a minimal number of digit (in Java, using NumberFormat, 0000 would work, but here it doesn't).
So I put a renderer to force my number to appear with 4 digits, it works, but it seems that the sort method use the values before beeing rendered, wich is quite logical.
I'm stuck after trying all my ideas, does anyone have a clue?
If you're using a remote store sort, then the sorting is done remotely (the database, like mysql). So what is the type of column on the database for that field? If it's a char or varchar, then that's the issue.
I've had a similar issue, the column type doesn't fix this. To have a proper ordering the type in model should be numeric.
1) Set your field type as integer in model definition.
Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [{ name: 'myField', type: 'int' }]
});
2) Create a Store using that model.
var myStore = Ext.create('Ext.data.Store',{
model: 'myModel'
});
3) Define a GridPanel using the store and link your field as dataIndex into columns definition.
Ext.create('Ext.grid.Panel',{
store: myStore,
columns: [{
header: 'Numbers', dataIndex: 'myField'
}]
});
I encountered a similar problem where by exj grids sort by each digit in your number, so for example a list might be reordered to 1, 2, 22, 3, 4, 41, 5... for what its worth, i found in extjs4, that defining the type as int in the model did the trick, I havent specified the local or remote sort but it seems to be working...
Ext.define('ExtMVC.model.Contato', {
extend: 'Ext.data.Model',
fields: [{'id', type: 'int'}, 'name', 'phone', 'email']
});
This is my code that connects to a MySQL. I followed this -> {'id', type: 'int'}, and it work out fine... Thank you all! I'm using Ext js 4.2.x