After testing several IDEs (including but not limited to Eclipse, Aptana Studio 3 and WebStorm), my personal favorite is stillNetbeans and this tutorial will walk you through harnessing the IDE’s code completion and set up a Sencha Project.
Step 1 : What you need to download.
a) Download the Netbeans 7.1 IDE (I chose the complete package 210MB file since it contains everything you could possibly need
b) Download the Sencha Touch library from here. Unzip the file (if necessary) and rename the folder touch.
Step 2 : Making a new project.
After Installing the IDE. Start the application and choose New>Java Web>Web Application. Press the Next button. Name the app “SenchaApp”. Choose the project location. Press the Next button.
Step 3 : Choosing a server.
Choose the Server you wish to run for your project.
Mac OS X 10.5 (Leopard) OS and the OS versions after that come with both Apache 2.2.6 and PHP 5.2.4 preinstalled, but they’re not enabled by default. In order to enable Apache and PHP you can follow the instructions in the following post :
<TO DO ADD POST LINK HERE >
However, you can also opt to use the Tomcat or GlassFish servers bundled with NetBeans here. Select one of the servers and click the Finish button.
Step 4 : Creating the Sencha App Structure
a) Delete the current index.jsp page and replace it with your own index.html page with links to all your Sencha files
c) Add the previously downloaded “Sencha Touch” or “touch” folder into the Web Pages folder in hierarchical line with the index.html page and the app folder.
d) If needed add the stylesheets folder for additional css files into your Web Pages folder.
For further information about the MVC Sencha Application structure refer to the API documentation. UTSL 🙂
The general folder structure followed in Sencha Touch Applications has been shown in the screen shot below with the folders mentioned above.
Step 6 : Harnessing NetBeans Code Completion :
a) Right click on the SenchaApp application and select Properties from the drop down menu
b) Under the Libraries menu, choose “Add Libraries” and from the window that opens click “Create…”
c) Name the Library “Sencha_Touch” and choose “Class Library” from the drop down.
d) Under the “Classpath” tab, click on “Add JAR/Folder” and select the “touch” folder previously downloaded.
e) Click “OK” and choose the newly created “Sencha_Touch” library.
To check if you’ve added code completion correctly, create an app.js file in the app folder. Type Ext followed by a “.” — If the steps above were followed correctly, the code completion should work.