PDA

View Full Version : Show and Hide bbar on a grid



same
26 May 2011, 1:00 AM
Hi,

I'm trying to show the grid bbar when the mouse is over the grid, et hide when it's out.
Is ok... But, when I want to click on a button in my bbar, the bbar is hidding because my mouse is out the grid.

Here is my code :


this.addListener('mouseover', function (e){
this.bottomToolbar.show();
});

this.addListener('mouseout', function (e){
this.bottomToolbar.hide();
});

this.bottomToolbar.addListener('mouseover', function (e){
this.bottomToolbar.show();
});

this.bottomToolbar.addListener('mouseout', function (e){
this.bottomToolbar.hide();
});

this is the grid.

Thanks :)

same
26 May 2011, 5:29 AM
Up ?
Nobody can help me ?

same
26 May 2011, 11:41 PM
up :/

skirtle
28 May 2011, 1:56 PM
I'm not convinced hiding the toolbar is a good idea, especially if there's a scrollbar, but here's some code that demonstrates one way you could do it:


Ext.onReady(function() {
var MyGrid = Ext.extend(Ext.grid.GridPanel, {
afterRender: function() {
MyGrid.superclass.afterRender.call(this);

this.getEl().on('mouseout', this.onMouseOutHandler, this);
this.getEl().on('mouseover', this.onMouseOverHandler, this);
},

onMouseOutHandler: function(ev) {
var bbar = this.getBottomToolbar();

if (!bbar || this.getEl().contains(ev.getRelatedTarget())) {
return;
}

bbar.hide();
this.doLayout();
},

onMouseOverHandler: function(ev) {
var bbar = this.getBottomToolbar();

if (!bbar || this.getEl().contains(ev.getRelatedTarget())) {
return;
}

bbar.show();
this.doLayout();
}
});

new MyGrid({
autoExpandColumn: '0',
columns: [{dataIndex: 'name', header: 'Name'}],
height: 150,
renderTo: Ext.getBody(),
width: 200,
bbar: [{
text: 'Click'
}],
store: new Ext.data.SimpleStore({
data: Ext.zip(['Gary', 'Linda', 'Tony', 'Brenda', 'Rich', 'Emma', 'Harry', 'Katie']),
fields: ['name']
})
});
});