using data range as filter in a grid

[Boston]

Hello!
I'm still new on ExtJS an try to solve a small project which lists informations out of a database. Until jet everything works fine. But now I want to set a date filter and I can't fiugure out how. I guess I should use GridFilters but I can't find it in the ux of the examples.

The grid is opend in a window and the grid has no title, only the column headers.

I hope someone could give me a helpful hint.

Here the code:


Ext.require(['*']);
Ext.onReady(function() {
Ext.define('Mod00', {
extend : 'Ext.data.Model',
fields : [{
name : 'Value',
type : 'string',
mapping : 'value',
sortable : true
}, {
name : 'Sum',
type : 'int',
mapping : 'count(value)',
sortable : true
}]
});
// Model (E)
// Datastore ds00(A)
Ext.create('Ext.data.Store', {
storeId : 'ds00',
autoLoad : true,
remoteSort : true,
model : 'Mod00',
proxy : {
type : 'ajax',
url : 'php/foobar.php?task=bar&foo=6',
reader : {
type : 'json',
root : 'results'
}
}
});
var gridHs6m = Ext.create('Ext.grid.GridPanel', {
title : false,
layout : 'fit',
store : Ext.data.StoreManager.lookup('ds00'),
bbar : new Ext.PagingToolbar({
store : 'ds00',
displayInfo : true,
prependButtons : true,
emptyMsg : "error",
totalProperty : 'total',
pageSize : 25
}),
columns : [{
xtype : 'rownumberer',
text : 'ID'
}, {
header : 'Foo',
dataIndex : 'value'
}, {
header : 'Bar',
dataIndex : 'count(value)'
}]
});
var buttonHs6m = Ext.create('Ext.Button', {
text : 'open window',
scale : 'small',
enableToggle : false,
listeners : {
click : {
fn : function() {
windowhs6m.show();
}
}
}
});
var windowhs6m = Ext.create('Ext.window.Window', {
title : 'Title o window',
height : 400,
width : 500,
iconCls : 'icon-grid',
collapsible : true,
collapseDirection : 'top',
titleCollapse : true,
animCollapse : true,
resizable : true,
closeAction : 'hide',
layout : 'fit',
items : [gridHs6m]
});
var accNavi = Ext.create('Ext.panel.Panel', {
title : 'Navigation',
width : 145,
height : 500,
padding : 0,
layout : 'accordion',
defaults : {
bodyStyle : 'padding:15px'
},
layoutConfig : {
titleCollapse : false,
animate : true,
activeOnTop : true
},
items : [{
title : 'Open window with grid',
items : [buttonHs6m]
}, {
title : 'FooBar',
html : 'Text'
}],
});
var viewport = Ext.create('Ext.Viewport', {
layout : {
type : 'border',
padding : 0
},
defaults : {
split : true
},
items : [{
region : 'north',
height : 114,
padding : '0 0 0 5',
border : false,
bodyStyle : "background-image:url('imgs/bg.jpg')",
split : false,
html : '<br><div style="text-align:center"><img src=\"./imgs/Bi4c_edit.png\" alt=\"Brand\" height=80></div>'
}, {
region : 'center',
layout : 'fit',
title : false,
border : false
}, {
region : 'west',
border : false,
title : false,
collapsible : false,
padding : '0 5 0 5',
width : 155,
weight : -110,
items : [accNavi]
}]
});
});

[scottmartin]

How are you wanting to get the date .. from a toolbar, or a menu.. there is also header filters for each column in a grid where you can filter multiple columns.

If you are filtering a remote DB, then you would send the date you selected as a parameter in an ajax call or perhaps using params/extraParams in a store load. You server would then use that data to filter the data and return the correct data.

Scott.

[Boston]

Hello Scott,

I try to add a toolbar as docked item at a grid



dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [datum]
}]


The item is defined as a variable:



var datum = Ext.create('Ext.form.Panel', {
width: 500,
bodyPadding: 10,
title: false,
items: [{
xtype: 'datefield',
id: 'sdatum',
anchor: '50%',
fieldLabel: 'start',
name: 'sdate',
format: 'd m Y',
value: '2 4 1978'
}, {
xtype: 'datefield',
id: 'edatum',
anchor: '50%',
fieldLabel: 'end',
name: 'edate',
format: 'd. m. Y',
altFormats: 'd,m,Y|d.m.Y',
value: '2.4.1978'
}],
});


I'm not sure if the usage of form fields is a sinfully approach.

Am I right when I now have to take care that an event is fired wich has to be sent as an ajax request to the php file on the server? In the moment I'm searching for a solution in this direction.

Can you tell me if I'm on the right way? And can you give me some helpful hints?

Thanks!

Boston