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.
First, we launch Ext Designer and start a blank project.
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:
- Create the Ext interface in Ext Designer.
- Save and export the project from Ext Designer.
- 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.
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:
So, move on to your favourite IDE (mine is Eclipse btw) and open up the xds_index.html file.
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.
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!
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.
Since this button is a simple element, our task is quite simple:
We just do 3 simple lines and have achieved our mission.
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!