Packt+ | Advance your knowledge in tech

You're reading from PHP Ajax Cookbook Over 60 simple but incredibly effective recipes to Ajaxify PHP websites with this book and ebook

Product type Paperback

Published in Dec 2011

Publisher

ISBN-13 9781849513081

Length 340 pages

Edition Edition

Languages

PHP

Tools

ASP.NET AJAX

Concepts

Front End Web Development

Table of Contents (16) Chapters

PHP Ajax Cookbook

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

1. AJAX Libraries FREE CHAPTER

2. Basic Utilities

3. Useful Tools Using jQuery

4. Advanced Utilities

5. Debugging and Troubleshooting

6. Optimization

7. Implementing Best Practices to Build Ajax Websites

8. Ajax Mashups

9. iPhone and Ajax

Index

Designing components using Ext JS

Ext JS is a JavaScript framework that offers a lot of cross-browser user interface widgets. The core of Ext JS is build-on component design, which can be easily extended to meet our needs.

Getting ready

We can download the latest version of Ext JS framework from www.sencha.com, Ext JS section. Now, we are ready to build a classic Ext JS layout with two columns and one accordion. We can also prepare a simple HTML file ajax/center-content.html to test the Ajax functionality:

…
<body>
<p>Center content</p>
</body>
…

How to do it...

First of all, we will include mandatory files like CSS and Ext JS library files.

<link rel="stylesheet" href="css/ext-all.css" /> 

<script src="js/ext-base.js"></script> 
<script src="js/ext-all.js"></script>

We will continue with the onReady function, which will run our script:

<script type="text/javascript"> 
Ext.onReady(function(){

  var viewport = new Ext.Viewport({
    layout:'border',
      items:[{
      region:'west',
      id:'west-panel',
      title:'West',
      split:true,
      width: 200,

      layout:'accordion',
      items: [{
          html: 'Navigation content',
          title:'Navigation'
          },{
        title:'Settings',
        html: 'Settings content'
        }]
      },{
    region:'center',
    layout:'column',
    autoLoad:{
      url: 'ajax/center-content.html', 
      method:'GET'
       }
    }]
  });
}); 
</script>

Our layout with an accordion navigation is ready:

How it works...

Ext JS is built for developers, to make their lives easier. As you can see in the source, we have built a layout with a simple JavaScript object. We have a "Viewport" with two items. One is positioned to the left (region: West) and the second to the right (region: East). We don't have to take care of the CSS in this case. Everything is handled directly by Ext JS through our variables like width, margins, cmargins, and so on. The layout property is really powerful. The inner layout on the West side is an accordion with the items Navigation and Settings. In the center column, we can see content loaded via Ajax, using the autoLoad method.

There's more...

The possible options for layout are: Absolute, Anchor, Card, Column, Fit, Table, Vbox, and Hbox.