[NEW] Extending Ext Class Tutorial

[jsakalos]

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]

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]

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]

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]

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]

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]

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]

Thank you very much Mike.

:)

[steffenk]

i don't want to bother, but could you (or anybody else) answer my question from #6 ?

[moonspice]

http://extjs.com/deploy/ext/docs/output/Ext.Element.html#up (http://extjs.com/deploy/ext/docs/output/Ext.Element.html#up)

[steffenk]

thx moonspice ;)

[jsakalos]

I have update the tutorial with simplified code that can be used in applications for real, not only for educational purposes.

[Wolfgang]

Saki,

Great Tutorial :)

Thanks for your support and engagement!

Regards

Wolfgang

[dolittle]

Does the tutorial breaks with Ext2.0 alpha?
Should I change something?

Thanks

[jsakalos]

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]

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]

Thanks Aaron,

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

[dolittle]

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]

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]

In ext2(rc1),IconCombo can't work normally.
Can't open the whole drop-down list.

[jsakalos]

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]

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]

I'll try it according to what you said

[Wolfgang]

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]

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]

Thanks :)

[dolittle]

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]

@dolittle,

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