Skip to content

Sencha Architect and Formatting Dates in GridPanel

Updated: at 02:12 PM

Background

I wasted about 10 minutes this morning being confused about why I could not enter the format attribute on a column of a GridPanel.  Since I am using Sencha Architect, sometimes the simple things are not obvious because you are not looking at the code directly.  To be fully honest, I have not written any ExtJS code for about 2 months so I tend to forget the simple things.

 

Here is my Story

I created a simple Data Store and assigned all the fields without specifying any times (that is my first mistake).  The code looks like the following:

 

image

 

Notice I don’t put any type associated with date.  So now, when I create a GridPanel and do the “AutoColumn” which is very handy, all the columns are created and they look like the following:

 

image

 

Notice that the xtype is gridcolumn for the LogDate.  My issue is now when I try to find format in the designer’s attribute editor for LogDate, it does not exist.  The problem is that LogDate was not set to type date in the store.  Had I done that (as follows):

 

image

 

The store would look like:

 

image

 

And now, when I autocolumn the gridpanel it assigns an xtype to that column of datecolumn and that allows me to put set a format attribute (which did not exist when the xtype was gridcolumn.  Here is what it looks like now:

 

image

 

and in the property editor of the column “LogDate” I can set the format (choosing from a format at the url: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Date-method-format ).  In my case I’m choosing "F j, Y, g:i a”.  The attributte editor now shows this:

 

image

So, when I run my app, it looks like this (just to give some context to what I’m actually building here)

image

 

Wrong Order, Forgot to Set Store xtype (type)

So, the point of this post is I forgot to set the store xytpe and my column type did not get set to datacolumn and therefore there was no format parameter available.  I did not want to autocolumn because I had already done a bunch of adjusting on my column widths and header names so, what to do?  No problem, just go into the project inspector of the gridcolumn (for LogDate), right click and transform the column to datacolumn (as follows).

image

 

 

Conclusion

Hope this helps!  10 minute problem, 15 minutes being confused, and 30 minutes writing this up.

Check out the ORM (Object Relational Mapper) PRISMA. The database access method I use in all my projects