PDA

View Full Version : How to fire befroe render on extended class



Webtel
2 Nov 2011, 4:02 AM
Event move fires but beforerender dont. What can be done about this? Or what am i missing or doing wrong?


Ext.define('TS.lib.Window',{
extend:'Ext.window.Window',
alias:'window',
constructor:function(c){
this.callParent(arguments);
this.initConfig(c);
this.on('beforerender',this.beforeRender);
this.on('move',this.onMove);
},
beforeRender:function(){alert(1);},
onMove:function(){alert(2);}
});
Ext.create('TS.lib.Window');


What I want is to have only one window of certain xtype present at any time.
If i put handling into onRender the layout is bugy: (z-index messed up on some elements)



onRender : function(){
TS.lib.Window.superclass.onRender.apply(this,arguments);
this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);

var same = Ext.ComponentQuery.query(this.xtype)[0];
if (same && same.id != this.id){
same.close();
};
this.y = this.y < 0 ? 0 : this.y;
},

efect of closing previous window on render...

28990

tvanzoelen
2 Nov 2011, 4:18 AM
Ext.define('TS.lib.Window',{
extend:'Ext.window.Window',
listeners: {
beforerender: {
fn: function(component, eOpts){
alert(1);
}
},
move: {
fn: function(component, x, y, eOpts){
alert(2);
}
}
},
alias:'window',
constructor:function(c){
this.callParent(arguments);
this.initConfig(c);

}
});
});

Webtel
2 Nov 2011, 4:46 AM
thanks for your interest but it wont work if i then use this window like :

Ext.create('TS.lib.Window',{
listeners:{
show:function(){alert(3)}
}
});

any further suggestions?

tvanzoelen
2 Nov 2011, 4:48 AM
it doesn't work if the parameternumber aren't correct

try

show: function(component, eOpts){
alert('');
}

Webtel
2 Nov 2011, 5:32 AM
sorry. i wasnt quite accurate with my description.
full example would look like this.... (i create, extended, extended class....)

can this be done?



Ext.define('TS.lib.Window',{
extend:'Ext.window.Window',
listeners:{
beforerender:{
fn: function(component,eOpts){
alert(1);
}
}
},
constructor:function(c){
this.callParent(arguments);
this.initConfig(c);
},
});


Ext.define('TS.lib.TestWindow',{
extend:'TS.lib.Window',

listeners:{
show:{
fn:function(){
alert(2)
}
}
}
});

Ext.create('TS.lib.TestWindow',{width:100,height:100});

tvanzoelen
2 Nov 2011, 5:55 AM
Well in your case you override the listeners of your base class.




Ext.onReady(function() {

Ext.define('TS.lib.Window',{
extend:'Ext.window.Window',
listeners:{
beforerender:{
fn: function(component, eOpts){
alert(1);
}
}
},
constructor:function(c){
this.callParent(arguments);
this.initConfig(c);
}
});


Ext.define('TS.lib.TestWindow',{
extend:'TS.lib.Window',

constructor: function(c){

this.callParent(arguments);
this.initConfig(c);



}

});

var win = Ext.create('TS.lib.TestWindow', {
width: 100,
height: 100,
listeners: {
show: {
fn: function(component, eOpts){
alert('2');
}
}
}
});

win.show();

});


or define the listerners in your constructor

Webtel
2 Nov 2011, 5:59 AM
for now i ended up with modyfying TS.lib.TestWindow not to have any listeners just onShow method. Then i pass it in initComponent..


constructor:function(c){
this.callParent(arguments);
this.initConfig(c);
},
initComponent:function(c){
this.callParent(arguments);
this.initConfig(c);
c && this.on('show',c.onShow);
},


needless to say that doesent feel right. So if anybody can please provide me with some insight on what am i doing and what sholud be done.. please dont hasitate to respond.

tvanzoelen
2 Nov 2011, 6:04 AM
first give the function onShow two input parameters, tell me what is happening then.

your onShow method must look like this.

onShow: function(component, eOpts){
alert('1');
}

onShow: function(){alert('1'); }

will probably not trigger. The listeners you apply to your object config or in the constructor.

Webtel
2 Nov 2011, 7:04 AM
it triggers ok. but now im moved to another part of this dilema.

i have window with a form. i want to have only one of that wndow kind present.
when i call following on the constructor it kinda works but still form from 1st window remains (i load each form of xtype and got 2 requests). When i close 1st window manualy (clixck X) then everythings works ok

How can i effectively destroyy/close window with all childs on other window constructor?..



constructor:function(c){
var same = Ext.ComponentQuery.query(this.xtype)[0];
if (same && same.id != this.id){
same.close();

};

mitchellsimoens
2 Nov 2011, 7:08 AM
Ext.define('TS.lib.Window',{
extend : 'Ext.window.Window',

initComponent: function() {
var me = this;

me.callParent(arguments);

me.on('beforeshow', me.handleBeforeShow, me);
},

beforeDestroy: function() {
var me = this;

me.un('beforeshow', me.handleBeforeShow, me);

me.callParent(arguments);
},

handleBeforeShow: function(win) {
//do logic here
//return false to stop show
}
});