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:
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:
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):
The store would look like:
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:
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:
So, when I run my app, it looks like this (just to give some context to what I’m actually building here)
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).
Conclusion
Hope this helps! 10 minute problem, 15 minutes being confused, and 30 minutes writing this up.