PDA

View Full Version : clone component into 'this'



forumuser1080
20 Apr 2011, 7:49 AM
This seems a little quirky but I thought I could get it to work.

I have and extension of a form panel, lets call it MyApp.MyFormPanel. It is used in a couple of different places in my application, one of which is in a card layout.

my card layout has a bunch of components that I create like this:


items: [
new MyApp.Card1(),
new MyApp.Card2(),
]


I want to add the form panel in my card layout but I need to add a few listeners to the form panel.

I can do this


items: [
new MyApp.Card1(),
new MyApp.Card2(),
new MyApp.MyFormPanel({
listeners: {
activate: function(comp) {
// do some stuff
}
}
})
]



But I would really like it to look consistent.


items: [
new MyApp.Card1(),
new MyApp.Card2(),
new MyApp.Card3() // I want this to really be a MyApp.MyFormPanel
]


So I tried


MyApp.Card3 = function(config) {
Ext.apply(config, {
listeners: {
activate: function(comp) {
// do some stuff
}
}
});

var panel = new MyApp.MyFormPanel(config);

// Now try and apply all the panels config to this new object
// IE this new MyApp.Card3 object is really a MyApp.MyFormPanel
Ext.apply(this, panel);
}


This is really screwing things up, the card will render but when I start clicking on items within the card things get screwed up.

I know I am just trying to be cute but really want to know if this is even possible.

kaendsle
21 Apr 2011, 6:58 AM
Shouldn't your MyApp.Card3() function return an object? I, too, like to use functional inheritance in ExtJS, but you need to be sure the function is returning an object. Also, isn't the this reference in your last Ext.apply() really targeting the function itself?

I would recommend a pattern more like this:



App.UsefulComponent = function(config) {
var obj;
config = config || {}; // For default configs
obj = new Ext.OtherUsefulComponent(config);
obj.on({
// I would add event listeners here
});
return obj; // Essential to return a component instance
}

forumuser1080
21 Apr 2011, 5:09 PM
I am not sure I understand your reply at all. I do not think that I need to return the obj.
It is just general java script i.e. (notice you do not return anything) and the this scope is the scope of the object.


function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}

cat1 = new cat("felix")
cat1.talk();



And the apply of the panel I created to 'this' I think is correct, I have verified that all properties and functions were applied/copied to my new obj.

The panel renders perfectly but the events for some of the items within the component (like combo boxes) are messed up. I must have missed something.

Anyone else have any ideas?