Reading and Understanding Source Code of ExtJS ( and ST)

[JS Dev]

Guys,

Lately, I started learning ExtJS. I've coded with ExtJS pretty far that I know how to use configs, methods and events.

But when I try to extend some component for my custom needs, I visit the source code and I get confused to be very honest. Not because of way of writing code, because of the content matter of code.

Can somebody please point me in right direction towards how to read source and understand it so that it could be easily customized to our own needs by extending it ?

Cheers!

PS : Do I need to know core JavaScript concepts in depth before reading the source code and customizing it ? If few concepts are sufficient, what would they be ?

[James Goddard]

What makes ExtJS code so hard to read is the fact that it is so compartmentalized. When you go to look for something in a class it turns out that the actual code you are looking for is in a base class 4 levels deep or in a "mixin".

Great for code reuse, horrible for readability. I find it is easiest to find things from the documentation. For example, if I am looking at the doc for Panel, and I click on the "view source" for the setHeight method, it will take me to the source in AbstractComponent (5 levels below Panel), rather than me having to search my way down from panel manually. Of course that doesn't help when a class just sets a "property" that is used 5 levels deep but it's a start.

Other than that, it just takes time to get the feel of the code.

If you have any specific questions I'd (and probably plenty of others) would be happy to help.

[JS Dev]

Do we need to have clear understanding of core concepts of pure javascript before diving in source code ?

[tvanzoelen]

Some understanding of javascript is handy, but the best thing is to start here

http://docs.sencha.com/ext-js/4-1/#!/guide and read the part of the classsystem.

[skirtle]

Do we need to have clear understanding of core concepts of pure javascript before diving in source code ?

Yes.

I'd say more generally you shouldn't try to write an application in any programming language without making a proper effort to learn it. Even if you can avoid using advanced concepts in your own code you won't be able to avoid them in other people's code.

I agree with James Goddard that the docs app is the best place to read the source as it makes it much easier to jump around the class hierarchy.

[James Goddard]

Do we need to have clear understanding of core concepts of pure javascript before diving in source code ?

If you've done java or c/c++ or php then javascript will not be a huge leap for you. You should be able to read code and get a general understanding of what it does. What I would take time to learn is how javascript treats variable scope/closures. You might try this to start: http://coding.smashingmagazine.com/2...ascript-scope/, which is just something I found with a simple google search, I'm sure there are more in-depth descriptions available.

The other thing you want to pay attention to is the fact that javascript is not type safe. I've noticed that people who come from a background of higher level languages tend to struggle with this. As someone who started my career with assembly and C I find it quite useful .

[tvanzoelen]

Its just like learning to swim, just jump into the pool and don't drown.

[JS Dev]

Thanks Guys for explaining it nicely

Appreciated!

Can you point me to a sample extension of ExtJS ( a very simple one) so that I could try grasping some of that code and understand it for my own needs ?