PDA

View Full Version : Ext.example help required



georgemitchell
22 Dec 2009, 12:29 PM
As someone from the C++ and .NET I'm new to Javascript and Especially ExtJS.

Looking through the examples seemed to be the best way to get up to speed, until that is, I tried to understand the Ext.example function code. Can someone dissect this or point me to a resource that does.

What exactly does the following do, since it passes no parameters?

Ext.onReady(Ext.example.init, Ext.example);

Also, external calls from examples to Ext.example.msg appear to have 3 parameters and not just the two specified. I know the third is the format variable but how does that 'fit in'?

Lastly, if you just call Ext.example what is it returning? The result appears to be an object with msg and init properties?????

Yes, I know to all you JS experts and not-so experts it may be obvious but to a newcomer it's hell. To put this in the examples section of ExtJS without a word of telling how it works is not good.

I tried googling Array.prototype.slice.call(arguments,1) and found an article saying this was a dirty way of applying array methods to 'arguments' that don't have such properties. Comments left included "I feel sick" and others saying it was 'cool'. Why is a 'hack' in examples? To throw people like me?

If someone would dissect Ext.example or Ext.example.msg for me I'd be grateful. I know what it does and understand the actual displaying of the message but can you actually call a function within an object from outside, since I guess msg: xxxxx is the enty point of most message calls even though it appears to be declared as half the return object.

Anyone?

VinylFox
22 Dec 2009, 1:38 PM
...What exactly does the following do, since it passes no parameters?

Ext.onReady(Ext.example.init, Ext.example);

[SIZE=2]...

The onReady method takes two arguments (typically), the first is the function to call when the document is ready, the second is the scope to run that function under.

So in this example, the init method of Ext.example will be executed on document ready, and will have a scope of Ext.example. Any arguments passed to init are passed in by onReady, however in this case there are no arguments.

Im having trouble understanding the rest of your questions - could you re-phrase them?

georgemitchell
22 Dec 2009, 4:25 PM
Thank you for your reply.

Ok, the first one is this.

The msg method in the code is msg(title,format) so it wants two parameters, but in the menus example it is called as follows...

function onButtonClick(btn)
{
Ext.example.msg('Button Click', 'You clicked the "{0}" button.', btn_text);
}

I understand the btn_text is used for {0} in the format string but it appears the call is passing three parameters to a function expecting two.

Can you clarify?

Also why are the msg and init methods defined in a return{...} block?

Thank you.

VinylFox
22 Dec 2009, 7:23 PM
...The msg method in the code is msg(title,format) so it wants two parameters, but in the menus example it is called as follows...

...I understand the btn_text is used for {0} in the format string but it appears the call is passing three parameters to a function expecting two...

I can understand your confusion, as that code is not written in a way that makes it easily understandable to new JavaScripters. I don't believe it was meant to be a learning example.

The arguments variable is available inside of all functions, the variable contains an array of all of the arguments passed to that function. What its allowing in this case is a variable amount of arguments to be passed to the msg method.

The slice method is then used to grab arguments beyond the first two and pass them into a string formatting function which applies them to placeholders in order.

This all makes way more sense with an example, so lets say you called this...


Ext.example.msg('Hi', 'Hey {0}, {1} are you {2}?', 'Bob', 'where', 'going');

It would result in a message that said: "Hey Bob, where are you going?"

You mentioned finding posts that this was a hack way of doing it, but I personally don't think its bad.


...Also why are the msg and init methods defined in a return{...} block?...

This is a common pattern in which the methods returned are public, and everything else outside of the return is private. In this case it is also a singleton.

Hope that helps. I would suggest a book called Object-Oriented JavaScript (http://www.amazon.com/gp/product/1847194141?ie=UTF8&tag=viny07-20&linkCode=as2&camp=1789&creative=390957&creativeASIN=1847194141) by Stoyan Stefanov if your interested in learning more of this type of stuff.

georgemitchell
23 Dec 2009, 6:09 AM
Thank you so much for spending the time to answer. I will seek out the book. Sometimes it's difficult to come from other, in this case stricter, environments, and also having to get into the syntax/patterns etc that are familiar to seasoned JS programmers. Saying it's not the easiest code for newcomers allows me to think I'm not 'losing it'.

I thought my help request may go unheeded, but I'm heartened and grateful for the pointers.

Happy holidays to you!

23 Dec 2009, 6:50 AM
George,

Also, check out shea's book "Learning Ext JS" http://learningextjs.com. It has great examples and tutorials on learning the framework.