PDA

View Full Version : Adding Custom Functions to Ext.Element



BlueSkye
28 Jun 2010, 5:54 AM
Hi, I was looking for a way to add custom functions to Ext.Element.

I have already read this topic, which covers something similar, but that's not exactly what I was looking for. http://www.sencha.com/forum/showthread.php?77994-Extending-ExtJS-with-custom-functions-for-DOM-elements-SOLVED

I tried with this approach:



var myElement = new Ext.extend(Ext.Element,{
hideP: function(){
this.select("p").hide();
},
showP: function(){
this.select("p").show();
}

});

var my_element = new myElement( Ext.DomHelper.createDom({
tag: 'div',
id: 'my_element_id',
html: 'Hello World',
style: {
border: '1px solid black',
position: 'absolute',
left: '350px',
top: '150px',
overflow: 'hidden'
}

})
);

my_element.createChild(
[{tag:'p', html: 'Hello1_tagp'
}, {
tag: 'input', type: 'text'
}]
);

If I try with it:

my_element.showP();It works.

But when I try to use:

Ext.get(my_element_id).showP();it isn't working: it says that "shopP is not a function". I think it's because get(); returns the Ext.Element class, and not "myElement" class.

So, my question is:
What should I do to add a function to an Ext.Element and call it when I need to?

I hope I have explained myself somehow! :)

Condor
28 Jun 2010, 6:04 AM
Ext.override(Ext.Element,{
hideP: function(){
this.select("p").hide();
},
showP: function(){
this.select("p").show();
}
});

BlueSkye
28 Jun 2010, 6:07 AM
Ext.override(Ext.Element,{
hideP: function(){
this.select("p").hide();
},
showP: function(){
this.select("p").show();
}
});

Thanks.

I forgot to mention that I need more than one extension to Ext.Element. I need a function, like "updateProprierties" that will be different from one element to another. How can I do this?

And another question:

Element (http://www.sencha.com/deploy/dev/docs/source/Element.style.html#cls-Ext.Element)( String/HTMLElement element, ) Create a new Element directly.
Create a new Element directly.[B]Parameters:

element : String/HTMLElement
forceNew : Boolean(optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).

Returns:

void



What is the "String" that I can specify in the constructor? And what is "forceNew" for?

evant
28 Jun 2010, 6:14 AM
Then it's not a class method. Extending the element class to do that would be silly.

BlueSkye
28 Jun 2010, 6:16 AM
Then it's not a class method. Extending the element class to do that would be silly.

I just wanted to associate a specific <div> to a specific method; I have about 14 "kinds" of div structures.
I thought that extending Ext.Element to add costum functions wasn't a bad idea.

But I just want to "associate" a function with a <div> , maybe in an object-oriented way.

How can I do it?

Animal
28 Jun 2010, 6:58 AM
They your first approach is OK. Except it is convention that classes are capitalized.

But obviously you can't expect Ext.get() to return your new class. It creates Ext.Elements. You will have to instantiate them yourself.

BlueSkye
28 Jun 2010, 7:04 AM
They your first approach is OK. Except it is convention that classes are capitalized.

But obviously you can't expect Ext.get() to return your new class. It creates Ext.Elements. You will have to instantiate them yourself.

I've got to dynamically create different "MyElements" of different types... I mean that I have MyClass1, MyClass2, MyClass3,... and the program will create maybe 3 objects for MyClass1 , 5 for MyClass2... I don't know how many objects are going to be created for each class during execution.

How can I "get" back my MyElement-object just by knowing his id? (just like Ext.get() does for Ext.Element-objects)
Is there some way?

Animal
28 Jun 2010, 7:25 AM
Only YOU know what elements must be passed through the MyClass1 constructor or the MyClass5 constructor or the Ext.Element constructor.

You will have to override Ext.get to test and branch.

BlueSkye
28 Jun 2010, 7:32 AM
Only YOU know what elements must be passed through the MyClass1 constructor or the MyClass5 constructor or the Ext.Element constructor.
Ok, I got this part.



You will have to override Ext.get to test and branch.


But I can't get this one. Or better,... How can I override Ext.get?
Have I got to re-write http://www.sencha.com/deploy/dev/docs/source/Element.html#method-Ext-get ???
That would be quite complicated :S

Animal
28 Jun 2010, 7:35 AM
Ext.get = function(blah){blah}

BlueSkye
28 Jun 2010, 7:56 AM
Ext.get = function(blah){blah}

But If I do so, haven't I got to "rewrite" all the Ext.get code, in order to make it work properly...?

Animal
28 Jun 2010, 8:07 AM
You could write an interceptor.

BlueSkye
28 Jun 2010, 8:13 AM
You could write an interceptor.

First of all, I want you to know that I'm really thankful for your advices.

But I don't know what an interceptor is, and I haven't found anything significant about what it is from some quick searchs on google..

Can I ask you some reference?

VinylFox
28 Jun 2010, 8:43 AM
This should help.

http://www.vinylfox.com/patterns-using-ext-js-sequence-and-intercept/