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

Using templates to change the look of combo box items


A combo box allows you to control the look of its items. In this recipe, the Movies Browser uses a ComboBox instance to display movie titles, as shown in the following screenshot:

The user experience can be enhanced by displaying not just the title, the year, the rating, but also the description of the movie as shown in the following screenshot:

How to do it...

  1. 1. Create the styles needed for the combo's items:

    <style type="text/css">
    .movie-item {
    font: normal 12px tahoma, arial, helvetica, sans-serif;
    line-height:150%;
    padding:5px 20px 5px 10px;
    border:1px solid #fff;
    border-bottom:1px solid #eeeeee;
    white-space: normal;
    color:#555;
    }
    .movie-item h2 {
    display: block;
    font: inherit;
    font-weight: bold;
    color:#336699;
    }
    .movie-item h2 span {
    float: right;
    font-weight: normal;
    color:#555;
    margin:0 0 5px 5px;
    width:100px;
    display: block;
    clear: none;
    }
    .panel-icon
    {
    background: url(img/folder-movie.png) 0 no-repeat !important;
    }
    &lt...