PDA

View Full Version : Doubt on Ext.override



SchattenMann
22 Sep 2009, 9:56 AM
hi there

sorry for the noob question but i really have to understand this...

is it possible to, somehow, add functions to a object without override the existing ones?

yah i know: use Ext.extend instead of Ext.override...but let me explain.

imagine that i want to add a simple function to ALL Ext.form.Field objects...how can i do it? I use Ext.override but i always have to be worry i might causing some errors by forgetting some existing code, worry about further updates...bla bla bla

can we, somehow extend one class but NOT create a subclass?

a specific example:

if i want that every single Ext.form.Field have some more code in the end of the onRender() how can i do it?

mathematically speaking i need

onRender = onRender + newOnRender

instead of

onRender = newOnRender

tks for the assistance...

hendricd
22 Sep 2009, 10:01 AM
That would be something like this:



var FF = Ext.form.Field;
Ext.override( FF , {
onRender : FF.prototype.onRender.createSequence(function(){ ... })
});

SchattenMann
22 Sep 2009, 10:05 AM
damm that was fast!

:D

can you just explain/point to something about ...createSequence...

i know nothing about it and i like to fully understand what im doing :P

PS: really appreciate your help ;)

hendricd
22 Sep 2009, 10:08 AM
think sequentially: newFunction = sourceFunction.createSequence ( afterSourceFunction )

SchattenMann
22 Sep 2009, 10:17 AM
thanks hendricd

i will dig that and hopefully it solves my problem ;)

im pretty sure of that...

SchattenMann
23 Sep 2009, 1:47 AM
indeed your solution works exactly as i need...tks for that ;)

if you allow me, i would like to expand my problem:

i want to select the field label div to prevent the default onClick behavior (for example, if i click in a combo label, the combo is expanded) and assign a new handler.

i know i can do something like


<a href="#" onClick=myFunction()>fieldLabel</a>

but i was searching for a better solution...

Animal
23 Sep 2009, 2:13 AM
You want a click handler on a label?

First fix the FormLayout (Must be on latest release for this to work):



Ext.override(Ext.layout.FormLayout, {
renderItem : function(c, position, target){
if(c && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
var args = this.getTemplateArgs(c);
if(Ext.isNumber(position)){
position = target.dom.childNodes[position] || null;
}
if(position){
c.itemCt = this.fieldTpl.insertBefore(position, args, true);
}else{
c.itemCt = this.fieldTpl.append(target, args, true);
}
if(!c.rendered){
c.label = c.getItemCt().child('label.x-form-item-label');
c.render('x-form-el-' + c.id);
}else if(!this.isValidParent(c, target)){
Ext.fly('x-form-el-' + c.id).appendChild(c.getPositionEl());
}
if(!c.getItemCt){
// Non form fields don't have getItemCt, apply it here
// This will get cleaned up in onRemove
Ext.apply(c, {
getItemCt: function(){
return c.itemCt;
},
customItemCt: true
});
}
if(this.trackLabels && !this.isHide(c)){
if(c.hidden){
this.onFieldHide(c);
}
c.on({
scope: this,
show: this.onFieldShow,
hide: this.onFieldHide
});
}
this.configureItem(c);
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
}
}
});


Then you can use a render listener on your field, and in that add a click listener to the label.

SchattenMann
23 Sep 2009, 2:16 AM
never thought on that way...that would probably do the trick :D

i'll just try to finish my own way and then start with your idea...many tks ;)

SchattenMann
23 Sep 2009, 2:25 AM
nop...no way it will work

i was trying this way:



var FF = Ext.form.Field;
Ext.override( FF , {
initComponent : FF.prototype.initComponent.createSequence(function(){
if (this.drilldown){

this.fieldLabel = '<a href="#" class="drilldown" >'+this.fieldLabel+'</a>';

}
}),
afterRender : FF.prototype.afterRender.createSequence(function(){
if (this.drilldown){

var label = Ext.DomQuery.select("label["+this.id+"]");

console.debug(label)

}
})
});


but at this point, the label don't exist so always returns null...

i tried to include your code with no success since it returns



this.el is undefined
chrome://firebug/content/blank.gif return this.el.up('.x-form-item', 4);


with "Must be on latest release for this to work" do you mean

Ext JS 3.0.2 (Support Subscribers Only)
Released on September 16th, 2009.

cuz im using 3.0.0 :P

Animal
23 Sep 2009, 2:31 AM
Yep, 3.0.0 will NOT work. There's been work done on the FormLayout class recently.

SchattenMann
23 Sep 2009, 2:38 AM
yop...im comparing the both releases and indeed the renderItem is very different...

but since im not a support subscriber i have no access to the 3.0.2 release...:/

i tried the following with no success:



renderItem : function(c, position, target){
if(c && !c.rendered && (c.isFormField || c.fieldLabel) && c.inputType != 'hidden'){
var args = this.getTemplateArgs(c);
if(typeof position == 'number'){
position = target.dom.childNodes[position] || null;
}
if(position){
this.fieldTpl.insertBefore(position, args);
}else{
this.fieldTpl.append(target, args);
}
if(!c.rendered){
c.label = c.getItemCt().child('label.x-form-item-label');//the change
}
c.render('x-form-el-'+c.id);
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
}
}
the 3.0.0 renderItemcode with your change but same error...

c.getItemCt() is null at this point :S

Animal
23 Sep 2009, 2:57 AM
You are DomQuerying for a label with an id of the Field's ID????? That won't work will it? The Field's ID is the Field's ID

You will need to go up from this.el to "div.x-form-item", and then select the <label>.

SchattenMann
23 Sep 2009, 3:00 AM
ups now im lost :/

your comment was about my old attempt or about your code snippet that don't work on 3.0.0?

Animal
23 Sep 2009, 3:01 AM
Lost? Why lost?

SchattenMann
23 Sep 2009, 3:17 AM
You are DomQuerying for a label with an id of the Field's ID????? That won't work will it? The Field's ID is the Field's ID

You will need to go up from this.el to "div.x-form-item", and then select the <label>.

i got a little lost in here..

i think that this comment is to this code


var FF = Ext.form.Field;
Ext.override( FF , {
initComponent : FF.prototype.initComponent.createSequence(function(){
if (this.drilldown){

this.fieldLabel = '<a href="#" class="drilldown" >'+this.fieldLabel+'</a>';

}
}),
afterRender : FF.prototype.afterRender.createSequence(function(){
if (this.drilldown){

var label = Ext.DomQuery.select("label["+this.id+"]");

console.debug(label)

}
})
});

correct?

SchattenMann
23 Sep 2009, 3:23 AM
damm my mistake!

i think you was talking about


var label = Ext.DomQuery.select("label["+this.id+"]");


yes its supposed to be



var label = Ext.DomQuery.select("label[for="+this.id+"]");

SchattenMann
23 Sep 2009, 3:36 AM
in Portugal we say:

"Ho don't have a dog, hunts with a cat..." :P



var FF = Ext.form.Field;
Ext.override( FF , {
initComponent : FF.prototype.initComponent.createSequence(function(){
if (this.drilldown){

this.fieldLabel = '<a href="#" class="drilldown" >'+this.fieldLabel+'</a>';

}
}),
afterRender : FF.prototype.afterRender.createSequence(function(){
if (this.drilldown){

var label = Ext.DomQuery.select("label[for="+this.id+"]");

Ext.get(label).on('click',function(e,t,o){
e.preventDefault();
this.drilldown();
},this)

}
})
});


this code seems to work just fine

tks

Animal
23 Sep 2009, 4:04 AM
In England we say "There are many ways to skin a cat".

You have found one way which works, so that's good!

SchattenMann
23 Sep 2009, 4:08 AM
poor cat :P

tks for the guidance and patience...