Notice: register_sidebar was called incorrectly. No id was set in the arguments array for the "Sidebar" sidebar. Defaulting to "sidebar-1". Manually set the id to "sidebar-1" to silence this notice and keep existing sidebar content. Please see Debugging in WordPress for more information. (This message was added in version 4.2.0.) in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 4140

Notice: The called constructor method for WP_Widget in mts_Widget_Tabs is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3895

Notice: The called constructor method for WP_Widget in mts_ad_widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3895

Notice: The called constructor method for WP_Widget in mts_ad_300_widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3895

Notice: The called constructor method for WP_Widget in swt_tweet_widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3895

Notice: The called constructor method for WP_Widget in Facebook_Like_Widget is deprecated since version 4.3.0! Use
__construct()
instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 3895
Sencha’s EXTJS 4: Getting Started Quickly

Sencha’s EXTJS 4: Getting Started Quickly


Notice: Undefined index: mts_posttop_adcode in /home1/jccrosby/public_html/admin.crsby.com/wp-content/themes/playbook/single.php on line 19

Prerequisites:

Getting started with Sencha’s EXTJS

  1. Download the Library – EXTJS 4.0.7: http://www.sencha.com/products/extjs/download/ext-js-4.0.7/1234
  2. Unzip the contents of the download to a folder in root of your web server. I used /extjs. It should look something like the following image where “extjs” is at the root of your web server:

    Screen Shot of Unpacked EXTJS Files

    Screen Shot of Unpacked EXTJS Files

  3. Make sure your web server is running and open http://localhost/extjs/index.html in your browser.
  4. Click the View the Examples button.
  5. This is a good place to start to see what EXTJS is capable of.

At this point your ready to go. The Getting Started Guide has plenty of information to get your rolling and provide you will a decent knowledge set for EXTJS development.

You want to build something though right? So, let’s build.

  1. Create a directory named “extplay” in the root of your web server.
  2. In the extplay directory create a MyApp.html file.
    Usually EXTJS applications are contained in a single HTML file.
  3. Open the MyApp.html file in your text editor.
  4. Add the following HTML template code to your application:
    <!--<!DOCTYPE HTML>
    <html>
        <head>
            <title>EXTJS Getting Started: MyApp</title>
            <link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
            <script type="text/javascript" src="/extjs/ext-all.js"></script>
            <script type="text/javascript" src="app.js"></script>
        </head>
        <body></body>
    </html>
  5. You will notice the app.js file in the HTML above.
  6. Create the app.js file in your extplay directory and open it in your text editor.
  7. Now we can write some code for our simple application.
  8. Add the following code to the app.js file:
    Ext.onReady(function() {
     Ext.Msg.alert('Status', '<h1>Hello World!</h1>');
    });
  9. Open MyApp.html (http://localhost/extplay/MyApp.html) in your browser. You should see something similar to the following image:

    Sencha EXTJS: Message Box

    The EXTJS Message Box

  10. This is not a full-on EXTJS application – this just illustrates how you can use pieces and parts of EXTJS when and how you’d like.
  11. Let’s create a EXTJS application.
  12. Open app.js.
  13. Replace the code in app.js with the following code:
    Ext.application({
       name: 'MyApp',
       launch: function() {
        Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
        {
         title: 'EXTJS: MyApp',
         html : 'Hello World!'
        }
       ]
      });
     }
    });
  14. Open MyApp.html in a browser or refesh the browser if it is already open.
  15. You should see something similar to the following:

    Sencha EXTJS: EXTJS Barebones Application

    Sencha EXTJS: EXTJS Barebones Application

  16. Here is what is going on in the code example:
    1. Ext.application: Defines the application named “MyApp”
    2. launch: The built in launch event creates a Viewport and sets it’s config object with a layout and items.
    3. layout: Tells the Viewport to fit to the size of its parent (in this case the body of the HTML)
    4. items: defines the children of the viewport. In this case a title and some HTML.

Now you’ve got an EXTJS 4 application up and running. What do you think?

I’ll follow this post up with some more information on what really goes on with the application, creating and managing the “items” or children of your application & how Sencha handles dependancies and deployment.

SenchaResources:


Notice: Undefined variable: defaults in /home1/jccrosby/public_html/admin.crsby.com/wp-content/themes/playbook/functions.php on line 340

Notice: Undefined index: mts_postend_adcode in /home1/jccrosby/public_html/admin.crsby.com/wp-content/themes/playbook/single.php on line 28

Notice: WP_Query was called with an argument that is deprecated since version 3.1.0! caller_get_posts is deprecated. Use ignore_sticky_posts instead. in /home1/jccrosby/public_html/admin.crsby.com/wp-includes/functions.php on line 4024
Comments
  1. Amateur
    • John Crosby
  2. Harshwardhan
  3. Arun

Leave a Reply

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