PDA

View Full Version : Ext.define problems (loses layout and this reference)



eldono
23 Jul 2012, 8:06 AM
Hello,
I'm using extjs 4.1.1 and trying to "extend" the Window object just for configuration purpose.
If I try something like:



Ext.define('MyWindow', {
extend : 'Ext.Window',
config: {
layout : 'fit',
width : 350,
height : 300,
modal: true,
items: [ Ext.create('Ext.form.Panel', {
[...]
}]
}
});


The window doesn't have a correct "layout" and if I resize it the form doesn't adapt to it.
Am I doing something wrong? If I remove the config word and set all configuration properties in the defines configuration everything works as expected.

Another "strange" problem that has no workaround is when declaring window buttons:



Ext.define('MyWindow', {
extend : 'Ext.Window',
alias : 'solarisistemi.listarichiestefiltro',
requires : [ 'Ext.form.*', 'Ext.window.Window' ],
layout : 'fit',
width : 350,
height : 300,
minWidth : 300,
minHeight : 200,
buttonsAlign: 'center',
buttons : [{
text : 'Reset',
scope: this,
handler : function() {
// Here this is the window object
}
}]
})


In ExtJS 3 it was possible to define the "this" scope for this kind of situation. How can I do it in 4.1.1?

Thanx

friend
23 Jul 2012, 11:26 AM
Below is a simple window extension which also addresses the button scope issue. Note that I assigned a widget alias of 'mw' to the extended Window, which you can then use with Ext.ComponentQuery, up(), down(), etc.



Ext.define('MyWindow', {
extend : 'Ext.window.Window',
alias: 'widget.mw',
bodyPadding: 5,
height : 300,
layout : 'fit',
modal: true,
width : 350,
saySomething: function(message) {
Ext.Msg.alert(message, 'Button Handler Message');
},
items: [{
xtype: 'panel',
title: 'Inner Panel'
}],
buttons: [{
text: 'Do Something',
handler: function(button, event) {
button.up('mw').saySomething('The Do Something button was clicked.');
}
}]
});

// create a test instance of the Window.
Ext.create('MyWindow').show();


The use of the 'widget' alias also allows you to create object instances via xtype and override any default config:



var windowConfig = {
xtype: 'mw',
height: 200,
width: 500,
<...>
}