PDA

View Full Version : Grouped Element for toolbar



nimmit
9 Jun 2009, 6:45 AM
Hi,

I was wandering if anyone has any ideas how i might achieve the following.

I'm trying to write a date filter for a grid. The user my either select a specific date / date range (today, yesterday etc) or they may select a custom date range using date pickers (see attachment). The logic of the functionality and storage filtering I have in place but all of the elements are defined in the grid. What I would really like to do is package this component into one class then in the grid toolbar just add it using something like:-


... tbar: [{xtype: 'date-range-filter', store: this.store}), {...


My problem is I don't know how I can write it so that all 3 elements are added to the toolbar. I can obviously just extend one of the individual components but I don't want them to rely on other components that my or my not be there.

Any help appreciated!

Thanks

nimmit
9 Jun 2009, 7:12 AM
Sorry I solved this one myself! You can add a toolbar as an item of a toolbar! So in this instance I can just extend toolbar to get reusable functionality I require.

bryman55
10 Jun 2009, 1:13 PM
Thats a very nice date filter bar. Do you mind sharing your code?




Hi,

I was wandering if anyone has any ideas how i might achieve the following.

I'm trying to write a date filter for a grid. The user my either select a specific date / date range (today, yesterday etc) or they may select a custom date range using date pickers (see attachment). The logic of the functionality and storage filtering I have in place but all of the elements are defined in the grid. What I would really like to do is package this component into one class then in the grid toolbar just add it using something like:-


... tbar: [{xtype: 'date-range-filter', store: this.store}), {...
My problem is I don't know how I can write it so that all 3 elements are added to the toolbar. I can obviously just extend one of the individual components but I don't want them to rely on other components that my or my not be there.

Any help appreciated!

Thanks

nimmit
25 Jun 2009, 10:40 PM
Sorry didn't see your post - Sure here you go, bit dirty but does the job. There should really be some validation so that the date to isn't less that than the date from etc. But for now it works for my purposes.





App.DateRangeFilter = Ext.extend(Ext.Toolbar, {
style: 'border: 0px; padding: 0px; top: 0px',

initComponent: function() {

this.dateFrom = new Ext.form.DateField({disabled: true, width: 70, format: App.getConfig('gui.date_format_short', 'd/m/y')});
this.dateTo = new Ext.form.DateField({disabled: true, width: 70, format: App.getConfig('gui.date_format_short', 'd/m/y')});

this.combo = new Ext.form.ComboBox({
typeAhead: false,
editable: false,
forceSelection: true,
allowBlank: false,
triggerAction: 'all',
store: [[0, 'Today'], [1, 'Yesterday'], [2, 'Week'], [3, 'This Month'], [4, 'Last Month'], [5, 'Date Range ->']],
value: 0,
width: 85,
listeners: {
'select': {
fn: function(config, combo, value) {
switch(value) {
case 5:
this.dateFrom.setValue(new Date());
this.dateTo.setValue(new Date());
this.disablePicker(false);
break;
// today
case 0:
this.disablePicker(true);
this.dateFrom.setValue(new Date());
this.dateTo.setValue(new Date());
this.setStoreParams(true);
break;
// yesterday
case 1:
this.disablePicker(true);
this.dateFrom.setValue(new Date().add(Date.DAY, -1));
this.dateTo.setValue(new Date().add(Date.DAY, -1));
this.setStoreParams(true);
break;
// week
case 2:
this.disablePicker(true);
this.dateFrom.setValue(new Date().add(Date.DAY, -7));
this.dateTo.setValue(new Date());
this.setStoreParams(true);
break;
// this month
case 3:
this.disablePicker(true);
this.dateFrom.setValue(new Date().getFirstDateOfMonth());
this.dateTo.setValue(new Date().getLastDateOfMonth());
this.setStoreParams(true);
break;
// last month
case 4:
this.disablePicker(true);
this.dateFrom.setValue(new Date().add(Date.MONTH, -1).getFirstDateOfMonth());
this.dateTo.setValue(new Date().add(Date.MONTH, -1).getLastDateOfMonth());
this.setStoreParams(true);
break;
}

},
scope: this
}
}
});

this.filterButton = new Ext.Button({
text: Ext.ux.Il8n('Filter Date'),
iconCls: Ext.ux.Icon('calendar'),
disabled: true,
handler: function() {
this.setStoreParams(true)
},
scope: this
});

Ext.apply(this, {items: [this.combo, ' ', this.dateFrom,' ', this.dateTo, ' ', this.filterButton]});


App.DateRangeFilter.superclass.initComponent.apply(this, arguments);
},
onRender: function() {
this.dateFrom.setValue(new Date());
this.dateTo.setValue(new Date());
this.setStoreParams();
App.DateRangeFilter.superclass.onRender.apply(this, arguments);
},
setStoreParams: function(reload) {
this.gridStore.baseParams = this.gridStore.baseParams || {};
this.gridStore.baseParams['date_from'] = this.dateFrom.getValue().format('Y-m-d 00:00:00');
this.gridStore.baseParams['date_to'] = this.dateTo.getValue().format('Y-m-d 23:59:59');
if(reload) {
this.gridStore.reload();
}
},
disablePicker: function(state) {
this.dateFrom.setDisabled(state);
this.dateTo.setDisabled(state);
this.filterButton.setDisabled(state);
}

});


Usage


new App.DateRangeFilter({gridStore: store}),


Probably won't work out of the box, you would need to replace. Ext.ux.Icon(xxx) + Ext.ux.Il8n(xxx) with just the regular strings. Also I have it in my 'App' namespace, you will have to change that to reflect your setup. Any probs let me know.

Nimmit