PDA

View Full Version : Handling 'Show' and 'Hide' events in the FormPanel



Mango_lier
30 Apr 2010, 8:32 AM
I have a FormPanel wrapped in a Window. I want to handle the Show and Hide events in the FormPanel class. It seems these events are not passed to FormPanel, any idea why and how I can enable that.

cnelissen
30 Apr 2010, 11:05 AM
How about posting some code so we can take a look....

Also I think a little more explaining is in order. You want to listen for show/hide events of the window? or the formpanel?

Mango_lier
30 Apr 2010, 12:37 PM
I would like to listen to 'Show' & 'Hide' in the FormPanel hosted in a Window. I guess one way would be to relayEvent() from the Window 'Show' and 'Hide' to the FormPanel (I have not played with that yet). I was looking for some inbuilt mechanism, maybe a config option on Window to do this auto-magically.

cnelissen
30 Apr 2010, 12:50 PM
I still don't understand what you mean... Posting code would be very helpful.

You can always listen for events on any element regardless of its nesting... You can just setup a listener on the form, you don't need to do anything with the window. Or you can setup a listener on the window and not worry about the form. Or you can setup a listener for both the form and window. You can also use the hideParent config option on the form to hide the window when the form is hidden...

Without seeing the code for what you are attempting its tough to give you much help.

Mango_lier
30 Apr 2010, 1:37 PM
Here you go


Ext.namespace('myWebsite');

myWebsite.usersRecord = Ext.extend(Ext.FormPanel, {
frame: true,
border: false,
labelWidth: 100,
labelAlign: 'left',
layout: 'form',
padding: 0,
width: 350,
defaultType: 'textfield',
autoHeight: true,
closable: true,
listeners: {
hide: {
fn: function(p) {
// Handle show & hide in the FormPanel
debugger;
}
},
show: {
fn: function(p) {
// Handle show & hide in the FormPanel
debugger;
}
}
},
constructor: function(config) {
myWebsite.usersRecord.superclass.constructor.call(this, config);
}
});

Ext.reg('myRecordPanel', myWebsite.usersRecord);

myWebsite.usersRecordDlg = Ext.extend(Ext.Window, {
title: 'My Title',
border: false,
modal: true,
resizable: true,
width: 350,
autoHeight: true,
height: 300,
minWidth: 300,
minHeight: 250,
layout: 'fit',
initComponent: function() {
Ext.apply(this, {
closeAction: 'hide',
keys: [{
key: 27,
fn: function() {
this.hide();
},
scope: this
}],
items: [{
xtype: 'myRecordPanel'
}]
});
myWebsite.usersRecordDlg.superclass.initComponent.call(this);
}
});
Ext.reg('myRecordPanelDlg', myWebsite.usersRecordDlg);

cnelissen
30 Apr 2010, 1:57 PM
So you want to do something to the form when the window gets hidden? Events do not cascade down that way, meaning that when you call the hide method on a component, it does not call hide on child components, because if the parent is hidden, then the children will be hidden, so it would be unnecessary. The hide/show events will never get called on the form when you hide/show the window.

I don't see how this would ultimately matter though, since you could just as easily setup your code to listen for the events on the window component instead of the form.