PDA

View Full Version : Grid panel filters on filter buttons in top toolbar.



hsrivastava
20 Aug 2015, 11:07 PM
I have a window, grid panel, a top toolbar, paging and grid filters. Now by default grid filters are provided in column headers, which is working for me, but i want them in my toolbar with buttons like, By date, By Group, Search button, clear etc...I think I'll have to make my own custom code for this. Any other ideas?
One thing more which I cannot find anywhere, ex- i click by date filter button, a new space should appear just under the toolbar, which will have filter textbox, and when this event happens the grid should shift down a bit depending on the height of new panel. so how to do this... plz help.:(

hsrivastava
20 Aug 2015, 11:18 PM
53065remove

jdkhamba
21 Aug 2015, 5:46 AM
Something like this: ?

https://fiddle.sencha.com/#fiddle/sk6

hsrivastava
24 Aug 2015, 3:49 AM
ohh yes exactly like this...thanx a lot.:D:D:D sorry for late reply

hsrivastava
25 Aug 2015, 11:12 PM
var myTopToolbar = new Ext.Toolbar({
height: 40,
layout: { type: 'vbox' },
items: [
{
xtype: 'container',
layout: { type: 'hbox' },
items: [{
xtype: 'button',
text: 'By Name',
cls: 'tooltopcss',
handler: function ()
{
var me = this;
me.up('myTopToolbar').down('#byNameText').show();

}
}, {
xtype: 'button',
text: 'By Email',
cls: 'tooltopcss',
handler: function ()
{
var me = this;
me.up('myTopToolbar').down('#byEmailText').show();
}
}]
}, {
xtype: 'container',
layout: { type: 'hbox' },
items: [
{
xtype: 'textfield',
hidden: true,
itemId: 'byNameText'
},
{
xtype: 'textfield',
hidden: true,
itemId: 'byEmailText'
}]

}
]
});

if I am using xtype: container, then it says, 'TypeError: a.setContainer is not a function', and only the window appears nothing else.
if I use xtype:'toolbar' in place of container, window and grid etc are displayed, with only buttons toolbar, but not handler not even on clicking button. on button click msg- 'me.up is not a function'.

I am using toolbar in grid, as:
tbar: myTopToolbar
:(:s(:|:((

jdkhamba
26 Aug 2015, 3:59 AM
The reason me.up() and other componentQueries are not working is because there is no registered xtype called 'myTopToolbar'. You need to configure your toolbar with an alias in order to use that as follows:


var myToolBar = Ext.create('Ext.toolbar.Toolbar',{
alias:'widget.myTopToolbar'});