PDA

View Full Version : Grid menu date format



alexandrep
26 Nov 2009, 7:23 AM
Hi everybody,

I just finish to make a plugin to select the date format from the column menu.

http://piel.alex.free.fr/download/extjs_plugin_grid_menu_date_format/menu_date_format.png

Pehaps you can get a look to the code and give me some suggestion to optimize it ;)



Ext.namespace('Ext.ux.grid');

Ext.ux.grid.GridMenuDateFormat = Ext.extend(Ext.util.Observable, {
formatList : [
{ text: "yyyy-mm-dd", format: "Y-m-d" },
{ text: "dd-mm-yyyy", format: "d-m-Y" },
{ text: "mm/dd/yyyy", format: "m/d/Y" }
],
constructor : function (config) {
Ext.apply(this, config);
},
init : function (grid) {
if (grid instanceof Ext.grid.GridPanel) {
this.grid = grid;

this.selectedFormatValue = Ext.state.Manager.get("menuFormatValue");
if ( !this.selectedFormatValue )
this.selectedFormatValue = this.formatList[0].format;

if (grid.rendered){
this.onRender();
} else {
grid.on({
scope: this,
single: true,
render: this.onRender
});
}
}
},
onRender : function () {
var view = this.grid.getView(),
hmenu = view.hmenu;

if (hmenu) {
this.sep = hmenu.addSeparator();

this.formatDateMenu = new Ext.menu.Menu({
id: this.grid.id + '-dateformat-menu'
});
this.menu = hmenu.add({
itemId: 'dateformat',
text: "Date format",
menu: this.formatDateMenu
});

this.menu.menu = new Ext.menu.Menu();
for ( var i=0; i < this.formatList.length; i++ ) {
this.formatList[i].menu = new Ext.menu.CheckItem(
{ checked: (this.selectedFormatValue == this.formatList[i].format), text: this.formatList[i].text }
);
this.formatList[i].menu.on("checkchange",this.onCheckChange, this);
this.menu.menu.add(this.formatList[i].menu);
}

hmenu.on('beforeshow', this.onMenu, this);
}
},
onMenu : function (filterMenu) {
var view = this.grid.getView();
var visible = ( this.grid.store.fields.map[view.cm.config[view.hdCtxIndex].dataIndex].type == "date" );

this.menu.setVisible(visible);
this.sep.setVisible(visible);
},
onCheckChange : function (item, value) {
if ( !this.mutex ) {
this.mutex=true;
for ( var i=0; i < this.formatList.length; i++ ) {
this.formatList[i].menu.setChecked(false);
if ( this.formatList[i].text == item.text ) {
this.selectedFormatValue = this.formatList[i].format;
Ext.state.Manager.set("menuFormatValue",this.formatList[i].format);
this.formatList[i].menu.setChecked(true);
}
}
this.mutex=false;
this.grid.getView().refresh();
}
},
dateRenderer : function(){
return function(v){
return Ext.util.Format.date(v, this.selectedFormatValue);
};
},
date : function(v){
return Ext.util.Format.date(v, this.selectedFormatValue);
}
});

// register ptype
Ext.preg('gridmenudateformat', Ext.ux.grid.GridMenuDateFormat);
Thank you in advance for your help.

Alex

mystix
26 Nov 2009, 11:35 AM
what's the purpose of duplicating Ext.util.Format's date() and dateRenderer() methods in your plugin? :-?

alexandrep
26 Nov 2009, 2:03 PM
It's to use it as renderer in the grid with directly the good format. Pehaps there is another way to do it but I don't know so much about extjs, I know this framework since monday. That's why I put the code here, to have some suggestion ;) If you can help me to have better code :D

mystix
27 Nov 2009, 1:48 AM
you could just call Ext.util.Format.date()/dateRenderer() directly. no need to duplicate what's already there :)