21 July 2010 ~ 40 Comments

Ext Designer – tutorial for a developer

The Ext Team, now Sencha, launched Ext Designer in April 2010. I had already tested the beta a bit, and was looking forward to the final product.

The following post is aimed at developers and interaction designers also doing javascript coding, not the business managers Sencha claims are potential users of their product. I’ll walk you through the basics, before we get our fingers dirty and make the application do something that might remind you of useful.

First, we launch Ext Designer and start a blank project.

Ext Designer launch

What initially meets you is the Toolbox on the left side, the area where the application is located in the central area with the important Export project button on the bottom. On the right hand side you find a vertically split area where we will find our Components and Data Stores on the top and Component config on the bottom. More on this later.

Let’s do the following case: We are creating a simple application where the mission is to click a button. So, our steps will be:

  1. Create the Ext interface in Ext Designer.
  2. Save and export the project from Ext Designer.
  3. Open your favourite IDE and add the click listener.

So, scroll down the toolbox and find the Button component and drag it into the application area.

Ext Designer -added button

Pretty simple. No go to the Component Config on the lower right hand side, find the text-property and give it the value “Click me!”. Next, find the id-property and give it the value “exampleId”.

Next up we just need to save and export our project. File->Save As, choose your location, specify file name and save. Next up, all you need to do is to click the Export project button on the button of the central area of the editor.

What you will see then is the following files generated to the exact same folder as you saved your project file:

  • MyButton.js
  • MyButton.ui.js
  • xds_includeOrder.txt
  • xds_index.html
  • xds_index.js

So, move on to your favourite IDE (mine is Eclipse btw) and open up the xds_index.html file.

Edit ext js generated code from Ext Designer in Eclipse

Notice the Ext Js files are pointing to the cachefly.net CDN. So, we don’t need to worry about downloading and copying Ext Js to the correct location. Nice.

Next, notice the MyButton.ui.js, MyButton.js and xds_index.js. That’s the files doing the actual work here.

Let’s open up all three, and start with the MyButton.ui.js.

Edit ext js generated code from Ext Designer in Eclipse - the ui file

Now we are getting to the point. All *.ui.js files generated by Ext Designer must not be manually edited. Every time you export your project those files will be overwritten with a new version, and any changes made to the files will be lost. Let’s not dig into any details in this files – the important thing at the moment is: Stay away!

Edit ext js generated code from Ext Designer in Eclipse - the js file

As Sencha states in the comment header, this is where we finally can implement event handling and other custom methods! And, that’s exactly what we are going to do now.

Let’s say we want our button to show a traditional javascript alert box, saying Hello world!

Since this button is a simple element, our task is quite simple:

Edit ext js generated code from Ext Designer in Eclipse – the js file edited

We just do 3 simple lines and have achieved our mission.

Hello World - Ext Designer

That’s our simple start. This is just a simple scratch of the surface – I have planned a few articles, so if you are interested – stay tuned!

Further reading

Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools
Beginning PHP RIA Using Extjs
Zend Studio for Eclipse Developer's Guide

40 Responses to “Ext Designer – tutorial for a developer”

  1. America Canino 22 July 2010 at 10:09 Permalink

    Hello there. Although I normally don’t remark on blogs, I decided to today, only to thank you really! I’ve finally got the information I was seeking for (via your blog) on the 4th page of Google results! So now I’m all covered :) Thanks again!

  2. Nils-Fredrik G. Kaland 22 July 2010 at 10:32 Permalink

    America Canino,

    Great to hear. On the 4th page of Google must be quite good, considering the fact that I wrote this post 12 hours ago… ;-)

    I am planning a follow up post, are there any special subjects you would like to see there?

  3. Anders-Meyer Eldøy 22 July 2010 at 12:08 Permalink

    When can we expect the post “Ext Designer – tutorial for a designer”?

  4. Nils-Fredrik G. Kaland 22 July 2010 at 12:11 Permalink

    I suppose you would have to write it? ;-)

  5. Blondie 29 January 2011 at 15:11 Permalink

    Do you need somebody to write it? ;)

  6. Nils-Fredrik 31 January 2011 at 09:25 Permalink

    @Blondie: sure, would you like to?

  7. Tom F 31 January 2011 at 19:51 Permalink

    Very good intro. Thanks!

  8. Nils-Fredrik G. Kaland 1 February 2011 at 16:32 Permalink

    @TomF Thanks. Planning a follow up – anything special you would like to see covered?

  9. Tom F 2 February 2011 at 02:03 Permalink

    What is really lacking is list of essential steps and properties to be filled in. There is only the one video from Sencha, the one with the rock music. It’s probably extremely good, but I will have to view it in a start/stop fashion to see what Jack did and then make sure I do it in my UI. It would be nice if these steps are listed in text form. I’m disappointed that Sencha didn’t do something as basic as this.

  10. Nils-Fredrik 2 February 2011 at 02:10 Permalink

    @TomF, you have a good point. There is quite a lot of documentation missing. So, if I understand you correctly you are looking for a post more specific about the usage of ExtDesigner – and less about the “what-do-you-do-when-you-have-finished-the-ui-in-extdesginer”.

    Sounds like I need a bottle of wine and some sparetime. ;-)

  11. Tom F 2 February 2011 at 02:25 Permalink

    There’s more than one way to use ExtJS. I’m not a newbie. I’ve created a fairly big app for my company that’s in mission-critical use. However, there are other ways to construct an app, and so a person may not understand what the official workflow may be from the standpoint that this methodology is crystallized in the Designer tool. I’m willing to adapt to the way of the tools, but those built-in rules need to be listed.

    For example, I was working with Designer a couple of days ago (I’m new to this tool) and found that no matter what I set in properties, I could not remove the error message “Missing Store: You have a component, Expirations, in the project that needs a store to operate.” I can’t solve this in a straightforward way because I’m just trying different things by trial-and-error. I have a store created but various settings of the Expirations grid widget and the ExpirationsStore store couldn’t satisfy the requirement. I don’t have trouble in my hand-written code, but then I’m not using these classes that Designer are creating. This is one example. Something that says, for example, that the store’s jsClass name must match the grid’s store property, would help.

  12. Blondie 3 February 2011 at 11:10 Permalink

    TO: Nils-Fredrik

    At the moment I’m exploring the software for my company, and have to write some simple tutorials. If I find inspiration in exploration :) I’ll let you know! ;)

  13. Ike Isby 6 February 2011 at 06:05 Permalink

    Superb tutorial!

  14. LostUser 9 February 2011 at 18:15 Permalink

    Hey,
    emmm some one wrote that tutorial or everyone is waiting for someone else to do it, or some one found another page?…
    I need to learn Ext Designer in a couple of days…
    I cant even make the App in the video, when i preview it, only the Main Panel is shown, anyway, any tutorial ?

  15. Nils-Fredrik 9 February 2011 at 23:25 Permalink

    @LostUser: are you asking about the “tutorial for a designer” or more tricks for developers?

  16. LostUser 16 February 2011 at 18:51 Permalink

    Im asking about a more extensive “tutorial for a designer”, some submit form tutorial, or so.

    Mental Note: Make profile…

  17. Nils-Fredrik G. Kaland 4 March 2011 at 02:07 Permalink

    @LostUser: I have now made a new post pretty much only for you. :-)

    Have a look at: http://aboutfrontend.com/extjs/ext-designer-basic-tutorial-forms/

    Happy reading!

  18. Nils-Fredrik G. Kaland 5 March 2011 at 00:26 Permalink

    I have also added a screencast showing basic usage of Ext Designer. In have based my screencast on the tutorial about Ext Designer, creating a form: http://aboutfrontend.com/extjs/ext-designer-basic-tutorial-forms/.

    You can see the screencast here: http://aboutfrontend.com/extjs/ext-designer-screencast-getting-started-simple-form/

  19. Ayb 14 July 2011 at 09:51 Permalink

    When I wanted to replace the following code:

    by :

    He has a blank page that appears when the “execution of xds_index.html.

    NB: i download package extjs.

  20. Selva 16 September 2011 at 18:47 Permalink

    please help i am new to ext designer.i have designed and exported my project but i don’t know how to add event handlers to components.how to call the components?please help me am waiting for your reply……..

  21. Nils-Fredrik 18 September 2011 at 13:21 Permalink

    @Ayb: Sorry for the late reply, but it seems the ext js code you pasted in disappeared.

    @Selva: I am a bit unsecure how to answer you. This blogpost explains exactly that, how to add event handlers to the components.

    You add event handlers in the file generated by Ext Designer which not has the extension .ui.js

  22. Selva 19 September 2011 at 07:18 Permalink

    Thanks Nils.please send me tutorials for adding event handlers ……….

  23. LostUser 19 September 2011 at 07:25 Permalink

    Selva, please try reading the article before…
    or you just want everything easy and in the mouth?
    READ
    5th image is what you want, but really… start reading…

  24. Nils-Fredrik 19 September 2011 at 08:39 Permalink

    @Selva, I am sorry but I agree with @LostUser – please read this blogpost. It might get clearer for you. If not, I would recommend getting some consultancy help.

  25. Selva 20 September 2011 at 08:54 Permalink

    thanks Nils.Now i have some idea about Ext js.Tel me how to get reference for ext js components from app/view/ui/MyWindow.js. am trying to add some event handlers in app/view/MyWindow.js file……..How can i do this….

  26. Nils-Fredrik 20 September 2011 at 09:01 Permalink

    @Selva, I am sorry – but I can’t dig into your project details here. If you need any furter help I can send you an invoice through Paypal and I can do this as a consultant for you.

  27. Selva 20 September 2011 at 09:48 Permalink

    Thanks Nils..

  28. swathi 22 September 2011 at 16:23 Permalink

    Hi,, i had done this example as it is.But still, am getting empty page.I am not getting any button on console.Try to help me,,thanks for wonderful tutorial..

  29. Nils-Fredrik 22 September 2011 at 17:01 Permalink

    @swathi: no error messages in the firebug (or similar) console?

    Are you running the latest Ext Designer 1.2 with extjs 4 lib? This post is ExtJs 3 only. Planning an update to Ext Designer 1.2 and ExtJs 4 soon.

    Cheers!

  30. swathi 22 September 2011 at 17:52 Permalink

    @Nils-Fredrik: I am using latest Ext Designer 1.2 with extjs 4 and also i tried with extjs 3.But doesn’t work.

  31. vital psp 18 July 2012 at 08:20 Permalink

    very useful and excellent

  32. Manna Shake 18 July 2012 at 08:21 Permalink

    great job and useful work

  33. Sylvain 16 August 2012 at 16:36 Permalink

    Hi, I just tried the designer today.
    Thx for the tips.

    However, I am surprised that designer write this kind of code :
    initComponent: function() {
    var me = this;
    Ext.applyIf(me, {

    }
    }

    If I am right, it is more a extjs3 way of coding, isn’t it ?

  34. slideshare.net 15 July 2013 at 02:56 Permalink

    Good post. I learn something totally new and challenging on sites I
    stumbleupon on a daily basis. It’s always useful to read articles from other authors and use a little something from their web sites.

    My site; ProAudioStar Coupon Code (slideshare.net)

  35. Pixi Beauty Coupon Code 24 July 2013 at 17:46 Permalink

    Hi there, after reading this awesome post i am as well cheerful to share my knowledge here with colleagues.

    Feel free to visit my webpage Pixi Beauty Coupon Code

  36. CheckoutStore Coupon Code 26 July 2013 at 15:18 Permalink

    I’m not sure where you’re getting your information, but
    great topic. I needs to spend some time learning more
    or understanding more. Thanks for magnificent info I was looking for this information for my mission.

    my website; CheckoutStore Coupon Code


Leave a Reply