PDA

View Full Version : How to Ext.define and extend "Ext.Window"



myExtJsUname
26 Apr 2012, 1:16 PM
Hello all,

I've spent two days trying to follow the examples I've found for ExtJs 4 to extend a Ext.Window but I think there is some fundamental piece of information that I am just not understanding or I am missing seeing it completely because I can't get even my basic example to work. In this post, I am trying to get the default config property to be used when not provided with the Ext.create call.

From various examples, I believe that the minimum code I need to extend Ext.Window is:


Ext.define(
"My.new.Window"
,{
extend: "Ext.Window"
,config: {
title: "My New Title"
}
,applyTitle: function(title){
this.title = title;
}
}
);
Is that correct? Or is a constructor required? That is:


Ext.define(
"My.new.Window"
,{
extend: "Ext.Window"
,config: {
title: "My New Title"
}
,constructor: function(config) {
this.initConfig(config);
return this;
}
,applyTitle: function(title){
this.title = title;
}
}
);

Or, is the initComponents definition necessary? Even though, at this point, I'm not actually worried about displaying any component in My.new.Window. I'm assuming not...?

Anyway, given the following code, I would expect the alert box to display "My New Title":



var myNewWindow = Ext.create("My.new.Window");
alert(myNewWindow.getTitle());
When I try it with the first class definition above, it displays "null". The object has not used the config default for "title" as I expect it to.

When I try it with the second class definition (the one with a constructor), it fails during "construction" with an error in AbstractPanel's addDocked method. When it tries to "me.dockedItems.insert(pos + i, item)", it fails because the array "me.dockedItems" is undefined.

Can anyone point me to an example that extends Ext.Window and works as explained above? Or, perhaps someone could correct whatever erroneous assumption I have developed regarding how these default config arrays are used when extending a class.

I'm looking for anything really...because I'm stuck and don't know what else to try.

Cheers,
jtm

vietits
26 Apr 2012, 7:38 PM
You should not use 'title' in config when extending from Ext.window.Window or classes inherited from Ext.panel.AbstractPanel because it has been used by the framework.


Ext.onReady(function(){
Ext.define("My.new.Window", {
extend: "Ext.window.Window",
config: {
myTitle: "My New Title"
},
constructor: function(config){
var me = this;
me.initConfig(config);
me.callParent(arguments);
},
applyMyTitle: function(title){
if (!Ext.isString(title) || title.length === 0) {
alert('Error: Title must be a valid non-empty string');
}
else {
this.title = title;
return title;
}
}
});
var win = Ext.create('My.new.Window', {
myTitle: 'my new window title',
width: 200,
height: 100
});
win.show();
console.log(win.getMyTitle())
});

skirtle
26 Apr 2012, 9:01 PM
Is there a reason you're using the config stuff? The simplest way to extend a window with a title is just:


Ext.define('My.new.Window', {
extend: 'Ext.window.Window',

title: 'My New Title'
});

myExtJsUname
27 Apr 2012, 8:09 AM
Thank you, vietits and skirtle, for responding to my queries. As I worked through applying your suggestions, I think I've developed a better understanding of how to extend an existing ExtJs class.

skirtle's questioning why I was using the config stuff in the first place led me to discover my principal misunderstanding. I thought the config property in the definition was supposed to be used to set defaults for properties already existing within the parent class (many, if not most, define examples I've looked at over the last few days that extend Ext.Window had a "title" in their config property). Instead, I see now that the config property's value is in automatically creating the getters/setters/etc. for those new properties I wish to introduce to my class extension. vietits example shows me how I can use that information to affect the existing properties and behaviour of the parent.

I find it difficult to mark a "best" answer here. Perhaps I should go with skirtle's because it does indeed tell me how to set the default title for a Window extension which was the task I had set for myself. However, a larger part of my question was related to how to properly extend classes and, for that, vietits answer was invaluable in helping me to understand more of the config property's usefulness and anticipated application.

I think I'll mark this one as the "best" because, if someone misinterprets the examples they have seen as I did, it references both useful answers that will hopefully clarify things for them as it did me.

Thanks again!!
jtm