21 July 2010 ~ 52 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

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

  1. Love-Is-Bananas.Tumblr.Com 11 October 2015 at 18:34 Permalink

    Hi, I do think this iss an excellent site.
    I stumbledupon it 😉 I will revisit once
    afain since i have book-marked it. Money and freeom is the greatest wayy
    to change, may you be rich and continue to guide others.

    Have a lokk at my web page; Advokatska Kancelarija (Love-Is-Bananas.Tumblr.Com)

  2. hdv 7 9 February 2016 at 20:33 Permalink

    Yet, generation after generation younger ones are
    more precious and actually actually smarter than the previous generations.

Leave a Reply