Book Image

Ext JS 3.0 Cookbook

Book Image

Ext JS 3.0 Cookbook

Overview of this book

Using Ext JS you can easily build desktop-style interfaces in your web applications. Over 400,000 developers are working smarter with Ext JS and yet most of them fail to exercise all of the features that this powerful JavaScript library has to offer. Get to grips with all of the features that you would expect with this quick and easy-to-follow Ext JS Cookbook. This book provides clear instructions for getting the most out of Ext JS with and offers many exercises to build impressive rich internet applications. This cookbook shows techniques and "patterns" for building particular interface styles and features in Ext JS. Pick what you want and move ahead. It teaches you how to use all of the Ext JS widgets and components smartly, through practical examples and exercises. Native and custom layouts, forms, grids, listviews, treeviews, charts, tab panels, menus, toolbars, and many more components are covered in a multitude of examples.The book also looks at best practices on data storage, application architecture, code organization, presenting recipes for improving themóour cookbook provides expert information for people working with Ext JS.
Table of Contents (15 chapters)
Ext JS 3.0 Cookbook
Credits
About the Author
About the Reviewer
Preface

A custom column layout


Some applications have special layout requirements that cannot be met by the native Ext JS layouts. Luckily, you can extend these layouts and add the features that you need.

As an example, this recipe explains how to build a custom layout based on the column layout's features. This custom layout will allow you to separate each of the columns with a configurable distance. For example, a sample three-column ColumnLayout layout would look like this by default:

But when using this recipe's custom layout, the same sample allows for user-defined space between columns:

Getting ready...

Since this layout borrows heavily from Ext.layout.ColumnLayout, I recommend that you make yourself familiar with the source code of Ext.layout.ColumnLayout located in the ColumnLayout.js file of the library's SDK.

How to do it...

  1. 1. Create the namespace for your custom layout:

    Ext.namespace('Ext.ux.layout');
    
  2. 2. Define your custom layout as an extension of Ext.layout.ContainerLayout:

    Ext.ux.layout...