PDA

View Full Version : [NEW] Extending Ext Class Tutorial



jsakalos
3 Sep 2007, 3:22 PM
Hi folks,

I've just released new tutorial on extending an Ext class: Extending Ext Class (http://extjs.com/forum/../learn/Tutorial:Extending_Ext_Class).

Enjoy.

steffenk
3 Sep 2007, 4:07 PM
Hi Saki,

many thanks for this very good tutorial !

I have a general question - in your case it's obvious to extend the combobox.

If i want to create a new Contentelement e.g. an Image Caroussel - how can I find out which Ext-Object fits to be extended for?

jsakalos
3 Sep 2007, 4:50 PM
Good question guy!

The class that has nearest functionality you need. The lowest class I'd extend would be Observable.

ContentPanel would be good candidate for ImageCarousel but this is just a guess.

Good luck!

steffenk
4 Sep 2007, 10:35 AM
thx, i will invetigate that.

There was a little error in the tutorial with

+ '<div class="{' + this.iconClsField + '} x-icon-combo-icon"></div></td>' Cls has to be removed, i corrected it.

Now it would be interesting to display the flag not only in the list but in combo too.
Do you have a quick idea how to do?

jsakalos
4 Sep 2007, 2:16 PM
thx, i will invetigate that.

There was a little error in the tutorial with

+ '<div class="{' + this.iconClsField + '} x-icon-combo-icon"></div></td>' Cls has to be removed, i corrected it.

No this is not error. iconClsField is correct. The error was in iconcombo.js




Now it would be interesting to display the flag not only in the list but in combo too.
Do you have a quick idea how to do?
That is part of the tutorial.

steffenk
4 Sep 2007, 4:15 PM
That is part of the tutorial.
sry, very stupid from me, didn't recognized not finishing the tutorial.

Very informative and nice demonstration!

can you help me and explain one line?

var wrap = this.el.up('div.x-form-field-wrap');
what does method up and where can i find this information?

mikegiddens
4 Sep 2007, 5:49 PM
I justs wanted to give my compliments on your time you have been spending helping the others with your extension and tutorials.

Always top notch.

jsakalos
4 Sep 2007, 5:57 PM
Thank you very much Mike.

:)

steffenk
6 Sep 2007, 3:01 AM
i don't want to bother, but could you (or anybody else) answer my question from #6 ?

moonspice
6 Sep 2007, 3:07 AM
http://extjs.com/deploy/ext/docs/output/Ext.Element.html#up (http://extjs.com/deploy/ext/docs/output/Ext.Element.html#up)

steffenk
6 Sep 2007, 3:48 AM
thx moonspice ;)

jsakalos
14 Sep 2007, 4:32 AM
I have update the tutorial with simplified code that can be used in applications for real, not only for educational purposes.

Wolfgang
22 Sep 2007, 4:27 AM
Saki,

Great Tutorial :)

Thanks for your support and engagement!

Regards

Wolfgang

dolittle
29 Sep 2007, 4:20 AM
Does the tutorial breaks with Ext2.0 alpha?
Should I change something?

Thanks

jsakalos
29 Sep 2007, 9:54 AM
Does the tutorial breaks with Ext2.0 alpha?
Should I change something?

Thanks

Extending Ext 2.0 class is a little bit different - I'll write specific Ext 2.0 tutorial on the subject soon.

aaronharder
17 Oct 2007, 4:03 AM
Hello Saki-

Great tutorial. Vasman has found a fix to allow IcomCombo to work under 2.0:

http://extjs.com/forum/showthread.php?p=69528#post69528

Hope this helps someone ... in the mean time perhaps a note could be added to the tutorial to avoid the confusion I (and undoubtedly others running 2.0 only) may encounter.

Thanks for the great work!

Aaron

jsakalos
17 Oct 2007, 12:15 PM
Thanks Aaron,

I'll anyway need IconCombo in Ext 2.0 in a couple of weeks so I'll update also tutorial...:)

dolittle
3 Nov 2007, 2:32 PM
How can I use icons with css sprite in your tutorial.

I think it should be simple because the icons has their own div and in your tutorial each item in the list has two classes:

this.iconClsField
x-icon-combo-icon
and in the combo itself you have this line:

this.flag.className = 'x-icon-combo-icon ' + rec.get(this.iconClsField);
I`ve tried many css selectors but just can`t do it.

Can anyone post the right selectors?

Thanks

jsakalos
4 Nov 2007, 3:35 AM
Hi dolittle,

it's not matter of selectors but css classes themselves. The key is background-position css property. I've used it elsewhere so here is an example (you need to tweak it):



.x-form-item .x-form-element .x-slider-thumb {
position: relative;
width: 15px;
height: 15px;
top: -1px;
left: 0px;
background: transparent url(../../resources/images/default/panel/tool-sprites.gif) no-repeat scroll 0px -75px;
cursor: pointer;
}
.x-form-item .x-form-element .x-slider-thumb-over {
background: transparent url(../../resources/images/default/panel/tool-sprites.gif) no-repeat scroll -15px -75px;
}

If you want to know more consult this document: http://w3schools.com/css/css_background.asp.

hihitiger
21 Nov 2007, 8:09 AM
In ext2(rc1),IconCombo can't work normally.
Can't open the whole drop-down list.

jsakalos
21 Nov 2007, 11:41 AM
The tutorial has not been updated to Ext 2.0 yet. I think that earlier in this thread is a patch for IconCombo to work in Ext 2.0.

JorisA
23 Nov 2007, 2:31 PM
The main thing that breaks it is the tpl. the for loop should be added. I modified it a little, this is my tpl:

this.tpl = config.tpl ||
'<tpl for="."><div class="x-combo-list-item x-icon-combo-item {' + this.iconClsField + '}"><div class=""></div>{' + this.displayField + '}</div></tpl>';

hihitiger
26 Nov 2007, 8:27 AM
I'll try it according to what you said

Wolfgang
30 Jan 2008, 3:54 AM
Just a generel question when extending a class.

When to put something in the constructor and when to put something in the Extend part?
I understand that new poperties go into the Extend part. But where to override existing properties?

Example combobox. "setValue" is overidden in the Extend part.
I would have thought that existing properties would get overridden in the constructor part, after calling the superclass constructor.


setValue: function(value) {
Ext.ux.IconCombo.superclass.setValue.call(this, value);
this.setIconCls();
}


On the other hand: on.render is overridden in the constructor:


this.on({
render:{scope:this, fn:function() {
var wrap = this.el.up('div.x-form-field-wrap');
this.wrap.applyStyles({position:'relative'});
this.el.addClass('x-icon-combo-input');
this.flag = Ext.DomHelper.append(wrap, {
tag: 'div', style:'position:absolute'
});
}}
});


Or is the decision based on where to override based on the time of execution?

jsakalos
30 Jan 2008, 4:27 AM
Yes, you're right in your last sentence. DOM is not available yet in initComponent function (in constructor) so if you need some underlying elements to attach some listeners or processing to you do it in onRender (or render listener) after they are rendered.

Wolfgang
30 Jan 2008, 5:58 AM
Thanks :)

dolittle
20 May 2008, 11:51 AM
In some cases overCls doesn't work with a comboBox and I can't figure out why.

When I add the config:
overCls: 'testClass'
to the combos.html in the combo example folder it works but when I try it with the comboBox in your iconCombo example it doesn't.
http://extjs.com/learn/Tutorial:Extending_Ext2_Class

el.on('mouseover' and el.addClass works for me.

Any idea?
Am I doing something wrong?

Thanks

jsakalos
20 May 2008, 2:15 PM
@dolittle,

please don't cross post. I've answered to the same post in another thread.