Hello World with Extjs

Hello World with Extjs

Before explaining how to create hello world application with Extjs. Let me first explain folder structure for Extjs applications.

I have used eclipse to create helloworld application. You can use any other IDE to create Extjs applications. In WebContent folder we have to copy unzipped downloaded Extjs. We can copy complete package or the required files and folders which we need for the application. You don’t really have to call the folder extjs, though;  it’s just a convention. You can name it scripts or lib or resources, or anything that you feel is appropriate. As you can see in above image, I have copied only required folders and files. We need resources folder which include the js files, css files, and the default set of images.  we have copied the ext-all.js file from the Ext JS 4 library folder.  The ext-all.js file contains the complete Ext JS 4 API code.

Now let write our code to display “Hello world !!!” in a alert box using Extjs. As you see we have included reference of CSS file from resource folder and included ext-all.js file in our index.html file.

Content of index.html file.

Open index.html file in browser, we will get popup window with “Hello World !!!” in it.

hello world-output

The starting point of the Ext JS4 application is an Ext.onReady() function. The onReady() function takes  a function as an argument. The onReady() function is called when the document is loaded and DOM is ready.  We’ve created a simple dialog box using Ext.Msg.alert() method.





Leave a Reply

Your email address will not be published. Required fields are marked *