MiamiCoder

Learn To Customize the Ext JS Charts

Jorge — Mon, 09 Nov 2009 22:30:00 -0800

Following up on Custom Markers for Your Ext JS Charts, here’s another example of how you can change the look of the Ext JS charts. In this case, I will show you how to change a data series style so, as shown in the image below, the markers have a different look and are not connected by a line.

How to do it

As usual, it's very important to correctly configure the CHART_URL constant. Observe that I’m using a folder called ext3 for my Ext JS installation. You might need to modify the folder name to match your setup.

Ext.chart.Chart.CHART_URL = 'ext3/resources/charts.swf';

As a second step, let's create a data store to hold some dummy records.

var store = new Ext.data.JsonStore({
    fields:['name', 'games', 'movies','music'],
    data: [
        {name:'Jul 07', games: 245, movies: 300, music:700},
        {name:'Aug 07', games: 240, movies: 350, music:550},
        {name:'Sep 07', games: 355, movies: 400, music:615},
        {name:'Oct 07', games: 375, movies: 420, music:460},
        {name:'Nov 07', games: 490, movies: 450, music:625}
    ]
});

And now we can create our line chart.

var c = new Ext.chart.LineChart({    
    renderTo: Ext.getBody(),
    width:300,
    height:275,
    id:'chart',
    store: store,
    xField: 'name',
    yAxis: new Ext.chart.NumericAxis({
        displayName: 'games',
        labelRenderer : Ext.util.Format.numberRenderer('0,0')
    }),
    tipRenderer : function(chart, record, index, series){
        if(series.yField == 'games'){
            return Ext.util.Format.number(record.data.games, '0,0') + ' games in ' + record.data.name;
        }if(series.yField == 'music'){
            return Ext.util.Format.number(record.data.music, '0,0') + ' CD\'s in ' + record.data.name;
        }
        else{
            return Ext.util.Format.number(record.data.movies, '0,0') + ' movies in ' + record.data.name;
        }
    },
    extraStyle: {
        padding: 10,
        animationEnabled: true,
        legend:{
            display:'bottom'
        },
        xAxis: {
            color: 0x3366cc,
            majorGridLines: {size: 1, color: 0xdddddd}
        },
        yAxis: {
            color: 0x3366cc,
            majorTicks: {color: 0x3366cc, length: 4},
            minorTicks: {color: 0x3366cc, length: 2},
            majorGridLines: {size: 1, color: 0xdddddd}
        }
    },
    series: [{
        type: 'line',
        displayName: 'Movies',
        yField: 'movies',
        style: {
            size: 7,
            borderColor: 0xCC0000,
            fillColor:0xffffff,
            connectPoints:false
        }
    },{
        type:'line',
        displayName: 'Games',
        yField: 'games',
        style: {
            size: 7,
            borderColor: 0x00CC00,
            fillColor: 0xffffff,
            connectPoints:false
        }
    },{
        type:'line',
        displayName: 'Cd\'s',
        yField: 'music',
        style: {
            size:7,
            borderColor: 0x0000CC,
            fillColor: 0xffffff,
            connectPoints:false
        }
    }]
});

How it works

You can stylize the look of a data series using the style object. The size property represents the size of the markers in the series. You can also use borderColor and fillColor to change the border and fill colors of the markers. These two properties accept hex-formatted string or number values, for example: "#ff0000", "ff0000" or 0xff0000.

Setting connectPoints to false allows you to display the line series with no lines connecting the markers.

Where to find more information about Ext JS charts

The Ext JS charts are not well documented yet, but you can find more information at the YUI charts page.

Downloads

Grab the code for the sample from my downloads page.

Want to learn more?

My Ext JS 3.0 Cookbook has more than a hundred step-by-step recipes that you can use to build your Ext JS applications. Download a sample chapter and see for yourself.

Ext JS Books Round-up

Jorge — Mon, 02 Nov 2009 13:09:57 -0800

If you’re thinking of buying a book on Ext JS, here’s a list of the Ext JS books currently in the market.

Note: The Ext JS 3.0 Cookbook is my book.

Learning Ext JS

Authors: Colin Ramsay, Shea Frederick, Steve 'Cutter' Blades

What’s inside

From the building blocks of the application layout, to complex dynamic grids and forms, Learning Ext JS will guide you through the basics of using Ext JS, giving you the knowledge required to create rich user experiences beyond typical web interfaces. It will also provide you with the tools you need to use AJAX, by consuming server-side data directly into the many interfaces of the Ext JS component library.

With this book you will learn to build consistent, attractive web interfaces with the framework components; integrate your existing data and web services with Ext JS data support; enhance your JavaScript skills by using Ext's DOM and AJAX helpers, and extend Ext JS through custom components.

Who this book is written for

This book is written for Web Application Developers who are familiar with HTML but may have little to no experience with JavaScript application development.

More infomation

Learning Ext JS book at Packt Publishing

Ext JS 3.0 Cookbook

Author: Jorge Ramon

What’s inside

Ext JS 3.0 Cookbook is packed with step-by-step recipes for building impressive rich internet applications. It provides clear instructions for getting the most out of Ext JS, and offers many exercises, techniques and patterns for building particular interface styles and features in Ext JS. Pick what you want and move ahead.

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 and code organization.

Who this book is written for

The Ext JS Cookbook is for Ext JS users who want a book of useful techniques, with explanations, that they can refer to and adapt to their purposes. Developers who are already familiar with Ext JS will find practical guidance and numerous examples that can be used as a solid foundation to build upon when creating rich internet applications.

More infomation

Ext JS 3.0 Cookbook at Packt Publishing

Ext JS in Action

Author: Jesus Garcia

What’s inside

Ext JS in Action teaches the reader about Ext from the ground up. By following the common design patterns demonstrated in the Ext source and in many commercial applications, the book teaches you to achieve the same results you see in world-class commercial JavaScript applications.

This book will guide you through the Ext component model and layouts. It covers Ext utility classes, AJAX, Observable (the Ext events model), DOM helpers and Function Helpers, and illustrates how the use of JavaScript Object Notation (JSON) can allow your application to efficiently communicate over the network to the web server. Finally, you'll build on this foundation to customize or extend Ext widgets.

Who this book is written for

This book is for developers that want to learn about Ext from the ground up. It assumes that you have a solid foundation in JavaScript, but requires no previous exposure to Ext JS.

More infomation

Ext JS in Action Book at Manning Publications

Developing with Ext GWT: Enterprise RIA Development

Author: Grant Slender

What’s inside

Developing in Ext GWT is a fast–paced, practical guide to quickly learning the tasks necessary in building enterprise–class Rich Internet Applications. This book takes the reader through setup, the available widgets, and advanced custom widgets and templates, and concludes with a functional sample client–server application in less than 150 pages.

Not your typical beginner's guide to programming, this book provides a rapid approach to becoming effective with leading commercial RIA tools and libraries. The book has full coverage of the new Ext GWT 2.0 widget library based on GWT 1.6.

Who this book is written for

The reader is assumed to have a sound knowledge of Java, as well as understanding of the basics of web development. It also offers some insight to casual developers who want to add that “enterprise–RIA” look to their existing GWT applications.

More infomation

Developing with Ext GWT: Enterprise RIA Development at APress

Practical Ext JS Projects with Gears

Author: Frank Zammetti

What’s inside

Using a pragmatic approach, in this book you’ll dissect seven full–fledged applications, covering how Ext JS allows you to create these applications with a slick user interface with a minimum of effort. You will also learn how the other parts of Ext JS aside from the GUI widgets provide many of the capabilities modern applications need, such as Ajax and data mechanisms, and how Gears can be brought in to make the applications more powerful.

Among the applications covered are an organizer, a timekeeper, a code cabinet and a game.

Who this book is written for

This book is written for web application developers, senior project leads, and application architects.

More infomation

Practical Ext JS Projects with Gears at APress

Custom Markers for Your Ext JS Charts

Jorge — Sun, 25 Oct 2009 22:58:00 -0800

If you're looking for a quick way to customize your Ext JS charts, one of the things you can do is use images to change the look of a series' data point markers. Let's put together a simple example that will create a chart similar to the one below.

How to do it

First, it's very important to correctly configure your CHART_URL constant.

Ext.chart.Chart.CHART_URL = 'ext3/resources/charts.swf';

Next, let's create data store to hold some dummy records.

var store = new Ext.data.JsonStore({
    fields:['name', 'games', 'movies','music'],
    data: [
        {name:'Jul 07', games: 245, movies: 300, music:700},
        {name:'Aug 07', games: 240, movies: 350, music:550},
        {name:'Sep 07', games: 355, movies: 400, music:615},
        {name:'Oct 07', games: 375, movies: 420, music:460},
        {name:'Nov 07', games: 490, movies: 450, music:625}
    ]
});

And now we can create our line chart.

var chart = new Ext.chart.LineChart({
    renderTo: Ext.getBody(),
    width: 300,
    height: 300,
    id: 'chart',
    store: store,
    xField: 'name',
    yAxis: new Ext.chart.NumericAxis({
        displayName: 'games',
        labelRenderer: Ext.util.Format.numberRenderer('0,0')
    }),
    tipRenderer: function(chart, record, index, series) {
        if (series.yField == 'games') {
            return Ext.util.Format.number(record.data.games, '0,0') + ' games in ' + record.data.name;
        } if (series.yField == 'music') {
            return Ext.util.Format.number(record.data.music, '0,0') + ' CD\'s in ' + record.data.name;
        }
        else {
            return Ext.util.Format.number(record.data.movies, '0,0') + ' movies in ' + record.data.name;
        }
    },
    extraStyle: {
        padding: 10,
        animationEnabled: true,
        font: {
            name: 'Tahoma',
            color: 0x444444,
            size: 11
        },
        legend: {
            display: 'bottom'
        },
        dataTip: {
            padding: 5,
            border: {
                color: 0x99bbe8,
                size: 1
            },
            background: {
                color: 0xDAE7F6,
                alpha: .9
            },
            font: {
                name: 'Tahoma',
                color: 0x15428B,
                size: 10,
                bold: true
            }
        },
        xAxis: {
            color: 0x69aBc8,
            majorTicks: { color: 0x69aBc8, length: 4 },
            minorTicks: { color: 0x69aBc8, length: 2 },
            majorGridLines: { size: 1, color: 0xeeeeee }
        },
        yAxis: {
            color: 0x69aBc8,
            majorTicks: { color: 0x69aBc8, length: 4 },
            minorTicks: { color: 0x69aBc8, length: 2 },
            majorGridLines: { size: 1, color: 0xdfe8f6 }
        }
    },
    series: [{
        type: 'line',
        displayName: 'Movies',
        yField: 'movies',
        style: {
            color: 0xCCCCCC,
            image: 'img/star_red.png',
            mode: 'stretch'
        }
    }, {
        type: 'line',
        displayName: 'Games',
        yField: 'games',
        style: {
            color: 0xCCCCCC,
            image: 'img/star_green.png',
            mode: 'stretch'
        }
    }, {
        type: 'line',
        displayName: 'Cd\'s',
        yField: 'music',
        style: {
            color: 0xCCCCCC,
            image: 'img/star_blue.png',
            mode: 'stretch'
        }
    }]

});

How it works

You can stylize the look of a data series using the style object. In this case, the image property defines the image that will be used as data point marker.

Using mode:‘stretch’ will resize the image to the dimensions of the data point marker. And color is the color of the lines and markers in the series. (Not relevant for our markers because we are using images.)

In future articles I will cover other customization options for the Ext JS charts. What about you? Care to share what you’ve done with them?

Downloads

Grab the code for the sample from my downloads page.

Want to learn more?

My Ext JS 3.0 Cookbook has more than a hundred step-by-step recipes that you can use to build your Ext JS applications. Download a sample chapter and see for yourself.

Free GUI Tool for the Microsoft Ajax Minifier

Jorge — Sat, 17 Oct 2009 22:46:00 -0800

This tool I wrote is a Windows application that allows you to interact with the Microsoft Ajax Minifier without using the command line or Visual Studio. With this GUI tool you can do the following:

browse to the JavaScript file to be minified
run the minifier in the background
enable/disable the minifier’s hypercrunch and analysis options
open the output folder once the minifier finishes
view the minifier’s output

Download

Download the installer of the free GUI tool for the Microsoft Ajax Minifier.

More information about the Microsoft Ajax Minifier

The Microsoft Ajax Minifier reduces the size of a JavaScript file by removing unnecessary content from the JavaScript file. The tool supports two modes: normal crunching and hypercrunching.

In normal crunching, the tool strips comments, unnecessary whitespace, curly-braces, and semicolons from a JavaScript file. In hypercrunching mode, the the tool shortens the names of local variables (variables in functions but not global variables) and removes unreachable code.

For detailed information about the Microsoft Ajax Minifier, check these sources:

Scott Guthrie’s announcement of the Microsoft Ajax Minifier tool
Stephen Walter’s post, Using the Microsoft Ajax Minifier

Have comments or suggestions?

If you have any type of feedback, I’d love to hear from you. Leave me a comment, or reach me via Twitter or email.

Enjoy!

Displaying an Image Inside an Ext JS GridPanel’s Cell (Part 3)

Jorge — Sun, 11 Oct 2009 02:11:41 -0800

Are you stuck figuring out how to display an image inside an Ext GridPanel cell? In this article we will examine how this can be done using a template column. (In part 1 and part 2 of this series we explored how it can be done using a renderer function.)

As in previous articles, the example I will use is a GridPanel that displays movie rentals information. Along with movie titles and number of rentals, the grid will display rental trends using a small icon, as shown in the following screenshot:

How to do it

First, we need to define the styles used to insert the trend icons in the gridd’s cells:

<style type="text/css">
   .trend-down 
   {
       background:url(img/trend-down.png) right no-repeat !important;
   }
   .trend-neutral 
   {
       background:url(img/trend-neutral.png) right no-repeat !important;
   }
   .trend-up 
   {
       background:url(img/trend-up.png) right no-repeat !important;
   }
   .padding-img
   {
       width:18px;height:0px;
   }
</style>

An ArrayStore will feed the grid a few dummy records:

var store = new Ext.data.ArrayStore({
    fields: ['title', 'rentals', 'trend'],
    data: [['ACADEMY DINOSAUR', 305, 'up'],
    ['DRAGONFLY STRANGERS', 240, 'neutral'],
    ['FAMILY SWEET', 188, 'down'],
    ['FREAKY POCUS', 205, 'up'],
    ['GABLES METROPOLIS', 265, 'up']]
});

As we will use a TemplateColumn, we need an instance of the XTemplate class to provide the formatting for the column’s cells:

var template = new Ext.XTemplate(
   '<span class="{[this.getTrendClass(values.trend)]}">{rentals}' + 
   '<img class="padding-img" src="' + Ext.BLANK_IMAGE_URL + '"/></span>',
   {
        getTrendClass : function(trend) {
            var retValue = '';
            switch (trend) {                
                 case 'down':
                     retValue = 'trend-down';
                     break;
                 case 'neutral':
                     retValue = 'trend-neutral';
                     break;
                 case 'up':
                     retValue = 'trend-up';
                     break;
                 default:
                    retValue = 'trend-neutral';
                     break;
             }
             return retValue;
        }
   }
);  
    
template.compile();

Next comes the GridPanel definition:

var grid = new Ext.grid.GridPanel({
    title: 'Movie rentals this month',
    store: store,
    columns: [
     { id: 'title-col', header: "Title", width: 275, dataIndex: 'title', sortable: true },
     { header: "Rentals", width: 75, dataIndex: 'rentals', sortable: true, align: 'right', 
        xtype:'templatecolumn', tpl:template}
],
    autoExpandColumn: 'title-col',
    renderTo: Ext.getBody(),
    width: 350,
    height: 175,
    loadMask: true
});

How it works

A TemplateColumn is a column definition class that renders a value by processing a record's data using a configured XTemplate.

By using the xtype:’templatecolumn’ and tpl:template configuration options on the rentals column, we are specifying that the data type of this column is TemplateColumn, and its XTemplate instance is the previously defined template object.

Note that template will render the cell’s contents as a span element that contains the value of the record’s rentals field:

'<span class="{[this.getTrendClass(values.trend)]}">{rentals}' + 
'<img class="padding-img" src="' + Ext.BLANK_IMAGE_URL + '"/></span>'

To understand how the icon that represents the trend value is inserted, observe that inside the template we use the {[ ... ]} tags to call the template’s member function getTrendClass:

getTrendClass : function(trend) {
    var retValue = '';
    switch (trend) {                
         case 'down':
             retValue = 'trend-down';
             break;
         case 'neutral':
             retValue = 'trend-neutral';
             break;
         case 'up':
             retValue = 'trend-up';
             break;
         default:
            retValue = 'trend-neutral';
             break;
     }
     return retValue;
}

getTrendClass changes the style of the span element using the css classes defined earlier. The style simply assigns a background image to the span element, and this image is one of the three icons that represent the three trends: neutral, up, and down.

Also in the template, the transparent image (Ext.BLANK_IMAGE_URL) serves to add some padding between the cell’s value and the right border of the cell. This prevents the value from displaying right over the trend icon, which is positioned on the background and right-aligned.

What about you?

Do you have a favorite approach to accomplish this task? Share your thoughts in the comments section. :-)

Downloads

Download the sample from my downloads page.

Displaying an Image Inside an Ext JS GridPanel’s Cell (Part 2)

Jorge — Sun, 04 Oct 2009 13:43:39 -0800

This is how you can display an image and a value inside an Ext GridPanel cell using a renderer function.

As in the previous example, to explain the approach I will use a GridPanel that displays movie rentals information. Together with movie titles and number of rentals, the grid will display rental trends using a small icon, as shown in the following screenshot:

How to do it

An ArrayStore will provide a few dummy records:

var store = new Ext.data.ArrayStore({
    fields: ['title', 'rentals', 'trend'],
    data: [['ACADEMY DINOSAUR', 305, 'up'],
    ['DRAGONFLY STRANGERS', 240, 'neutral'],
    ['FAMILY SWEET', 188, 'down'],
    ['FREAKY POCUS', 205, 'up'],
    ['GABLES METROPOLIS', 265, 'up']]
});

Next comes the GridPanel definition:

var grid = new Ext.grid.GridPanel({
    title: 'Movie rentals this month',
    store: store,
    columns: [
     { id: 'title-col', header: "Title", width: 275, dataIndex: 'title', sortable: true },
     { header: "Rentals", width: 75, dataIndex: 'rentals', sortable: true, align: 'right', 
        renderer: function(value, metaData, record, rowIndex, colIndex, store) {
             switch (record.data.trend) {
                 case 'down':
                     metaData.css = 'trend-down';
                     break;
                 case 'neutral':
                     metaData.css = 'trend-neutral';
                     break;
                 case 'up':
                     metaData.css = 'trend-up';
                     break;
             }
             return value + String.format('<img class="padding-img" src="{0}"/>',Ext.BLANK_IMAGE_URL);     
         }
     }
],
    autoExpandColumn: 'title-col',
    renderTo: Ext.getBody(),
    width: 350,
    height: 175,
    loadMask: true
});

How it works

In this example we assign a renderer function to the rentals column, and use the trend value to modify the rentals grid cell. This is possible because the renderer function's arguments include the current record object. From the record, we can get to the trend value via record.data.trend.

How do we display the value and the icon in the same cell? Well, we add the trend icon to the cell's background by inspecting record.data.trend and modifying the css property of the metaData object:

switch (record.data.trend) {
 case 'down':
     metaData.css = 'trend-down';
     break;
 case 'neutral':
     metaData.css = 'trend-neutral';
     break;
 case 'up':
     metaData.css = 'trend-up';
     break;
}

Here are the styles used:

<style type="text/css">
   .trend-down 
   {
           background:url(img/trend-down.png) right no-repeat !important;
   }
   .trend-neutral 
   {
           background:url(img/trend-neutral.png) right no-repeat !important;
   }
   .trend-up 
   {
           background:url(img/trend-up.png) right no-repeat !important;
   }
   .padding-img
   {
           width:18px;height:0px;
   }
</style>

As the column and the icon are both right-aligned and the icon is on the background, the cell's value is going to be positioned over the icon. But we want to display the value to the left of the icon, not over it. To accomplish this, we use a transparent image (using Ext.BLANK_IMAGE_URL) to add some padding between the value and the right border of the cell. This makes room for the icon:

return value + String.format('<img class="padding-img" src="{0}"/>',Ext.BLANK_IMAGE_URL);

Downloads

Download the sample from my downloads page.

How to Display an Image Inside an Ext JS GridPanel’s Cell

Jorge — Fri, 25 Sep 2009 21:17:00 -0800

A simple approach you can take to displaying an image inside an Ext GridPanel’s cell consists of using a renderer function to modify the cell’s appearance.

To explain this approach, I will use a sample GridPanel that displays movie rentals information. Together with movie titles and number of rentals, the grid will display rental trends using a small icon, as shown in the following screenshot:

How to do it

First, we need some data to work with. An ArrayStore with a few dummy records will do the job:

var store = new Ext.data.ArrayStore({
    fields: ['title', 'rentals', 'trend'],
    data: [['ACADEMY DINOSAUR', 305,'up' ],
    ['DRAGONFLY STRANGERS', 240, 'neutral'],
    ['FAMILY SWEET', 188, 'down'],
    ['FREAKY POCUS', 205, 'up'],
    ['GABLES METROPOLIS',265,'up']]
});

Next comes the GridPanel definition:

var grid = new Ext.grid.GridPanel({
    title: 'Movie rentals this month',
    store: store,
    columns: [
     { id: 'title-col', header: "Title", width: 180, dataIndex: 'title', sortable: true },
     { header: "Rentals", width: 75, dataIndex: 'rentals', sortable: true, align: 'right' },
     { header: "Trend", width: 75, resizable: false, dataIndex: 'trend', sortable: true, align: 'center',
         renderer: function(value, metaData, record, rowIndex, colIndex, store) {
             switch (value) {
                 case 'down':   
                     metaData.css = 'trend-down';
                     break;
                 case 'neutral':    
                     metaData.css = 'trend-neutral';
                     break;
                 case 'up':   
                     metaData.css = 'trend-up';
                     break;
             }
             return '';     // Return an empty string so only the cell's background is visible
         }
     }
    ],
    autoExpandColumn: 'title-col',
    renderTo: Ext.getBody(),
    width: 350,
    height: 200,
    loadMask: true
});

How it works

The insteresting part in the above code is the trend column's renderer. A renderer function is an interceptor method that can change the grid cell before it is rendered.

Inside the renderer, we add the trend image by inspecting the cell's value and modifying the css property of the metaData object:

renderer: function(value, metaData, record, rowIndex, colIndex, store) {
     switch (value) {
         case 'down':   
             metaData.css = 'trend-down';
             break;
         case 'neutral':    
             metaData.css = 'trend-neutral';
             break;
         case 'up':   
             metaData.css = 'trend-up';
             break;
     }
     return '';     // Return an empty string so only the cell's background is visible
}

The styles assigned to metaData.css simply change the cell's background to reflect the trend. Here are the styles used:

<style type="text/css">
   .trend-down 
   {
           background:url(img/trend-down.png) 20px no-repeat !important;
   }
   .trend-neutral 
   {
           background:url(img/trend-neutral.png) 20px no-repeat !important;
   }
   .trend-up 
   {
           background:url(img/trend-up.png) 20px no-repeat !important;
   }
</style>

The metaData object has another property, metaData.attr, that you can use to apply attributes to the cell's data container element, for example: metaData.attr = 'style="font-weight:bold";'.

You can create a more complex logic based on the renderer function's other arguments: record, rowIndex, colIndex and store.

Downloads

Download the sample from my downloads page.

Announcing the Ext JS 3.0 Cookbook

Jorge — Fri, 28 Aug 2009 22:23:00 -0800

I’m excited to announce the Ext JS 3.0 Cookbook, a book I wrote for Packt Publishing over the last several months.

Ext JS 3.0 Cookbook is packed with step-by-step recipes for building rich internet applications using the Ext JS JavaScript library. Each recipe is a carefully organized sequence of instructions to complete a task as efficiently as possible.

The Ext JS 3.0 Cookbook is for developers who want a book of useful techniques, with explanations, that they can refer to and adapt to their purposes.

Developers who are already familiar with Ext JS will find practical guidance and numerous examples covering most of the library's features and components, that can be used as a solid foundation to build upon when creating rich internet applications.

What you will learn from the Ext JS 3.0 Cookbook

Some of the subjects covered by the book are the following:

Work with different browsers, platforms, and the DOM, as well as determine and understand the different Ext JS data types
Create your own custom data types the Ext JS way
Build great-looking and friendly forms, use client and server-side field validation, form loading, submission, field customization, and layout techniques
Explore the different layouts provided by the Ext JS library as well as create your own, and understand their common uses
Display, edit, and group tabular data generated by the server using the grid component, the new RowEditor Class, and the new lightweight ListView component
Explore multiple ways of displaying master-details relationships
Visualize information using charts
Use patterns to build a solid and flexible application architecture, such as auto-saving form elements, component state management and code modules
Explore the advantages and efficiency tradeoffs of different widgets
Build your own custom components on top of the Ext framework and enhance the custom components created by the Ext JS users' community

How to obtain the Ext JS 3.0 Cookbook

You can order the book by visiting the Ext JS 3.0 Cookbook page at Packt Publishing.

Ext JS Layouts: Messenger Window, Part 2

Jorge — Tue, 04 Aug 2009 19:48:30 -0800

In this article I will enhance the Ext JS layout I started building in Ext JS Layouts: Messenger Window, Part 1. The layout is a messenger-like window that shows the status of the user, displays the user’s contacts on a treeview, and provides menus for changing status, sharing quick messages and navigating to the user’s profile editor or contact card.

Be mindful that I’m not aiming for a full-fledged instant messenger implementation. I’m rather trying to illustrate the different steps involved in the creation of a UI with Ext JS.

My goal for this iteration is to augment the window I built with the following visual features:

Edit favorites and a Change favorites layout menus that activate with a right-click on the Favorites node of the Contacts treeview
Send instant message, Send email message and Add to favorites menus that activate with a right-click on any of the displayed contacts

This is how the finished window will look like:

Using the Ext.Action Class to implement menu handlers

To implement the Edit favorites and Change favorites functionality, I will use instances of Ext.Action. I will use the text and handler comfiguration options to specify the menu item’s text and the handler function:

var editFavAction = new Ext.Action({
    text: 'Edit favorites',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Edit favorites...');
    }
});

var changeFavAction = new Ext.Action({
    text: 'Change favorites layout',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Change favorites layout...');
    }
});

var favMenu = new Ext.menu.Menu({
    items: [editFavAction, changeFavAction]
});

The favMenu menu looks like this:

In the same fashion, Action instances will handle the Send instant message, Send email message and Add to favorites features:

var sendImAction = new Ext.Action({
    text: 'Send instant message',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Send instant message...');
    }
});

var sendMailAction = new Ext.Action({
    text: 'Send email message',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Send email message...');
    }
});

var addToFavesAction = new Ext.Action({
    text: 'Add to favorites',
    handler: function() {
        Ext.Msg.alert('Action executed', 'Add to favorites...');
    }
});

var contactMenu = new Ext.menu.Menu({
    items: [sendImAction, sendMailAction, '-', addToFavesAction]
});

This is the finished contactMenu:

Action instances allow for sharing pieces of functionality among different components. They are not strictly needed in this case, but could be beneficial in the future, if you wanted to, for example, add a global menu to the window, that would perform the same functionality as the context menus:

var globalMenu = new Ext.menu.Menu({
    items: [editFavAction, changeFavAction,'-',
    sendImAction, sendMailAction,'-', addToFavesAction]
});

Creating a context menu for the Ext.tree.TreePanel instance

I can use the tree panel’s contextmenu event to show either the favorite menu or the contact menu. To decide what menu will be shown, I simply check the selected node’s id:

listeners: {
    contextmenu: function(node, e) {
        node.select();
        var contextMenu;
        if (node.id == 'favorites') {
            contextMenu = favMenu;
        } else if (node.id != 'available' && node.id != 'offline') {
            contextMenu = contactMenu;
        }
	if (contextMenu) {
            contextMenu.contextNode = node;
            contextMenu.showAt(e.getXY());
	}
    }
}

Notice above how both menus remain inactive when the selected node is either the Available or Offline branch.

Next steps

With the menus in place, I now have a pretty decent Contacts window. Next step: the Chat window.

Stay tuned!

Downloads

Download the full sample from my downloads page.

Ext JS Layouts: Messenger Window, Part 1

Jorge — Sat, 18 Jul 2009 00:18:00 -0800

Today I start a series of posts dedicated to Ext JS layouts. I will initiate this series creating a messenger-like interface that will have an area for displaying contacts and their statuses, and an area for displaying a conversation. The goal is not to implement a messenger system, but rather to walk through the steps required for building a user interface, and end up with some code that you can use as a learning tool.

In this post I will focus on the contacts area of my messenger-like interface. I will use a window as the container. Inside this window I will place a number of controls that will satisfy these requirements:

Display the name, avatar and status of the current user
Provide the user with a means to change her current status, selecting from available, busy, away or appear offline
Provide the user with a means to share a quick message and show the music she’s listening to
Provide the user with a means to navigate to her profile, contact card, or space
Display a the user’s contacts, organized by favorites, available and offline

In future posts I will enhance and refine this interface. By the end of this post, I will have a window that looks like this:

Looks familiar? :-)

All right. Let’s get started.

The messenger window

I already decided that my container will be a window. All I need for the moment is a title and the dimensions:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger'
});

And this is how it looks like:

Display the name, avatar and status of the current user

I will use the window’s toolbar to display the name and avatar of the user. First, I will create the toolbar and use the new button group component to layout the toolbar items in two columns, one for the avatar and one for the user’s name:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2
    }]
});

The avatar and user name go in as toolbar buttons. I’m making them buttons because I want to allow the user to click on them and perform some tasks. This is the window now:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2,
        items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2 },
            { xtype: 'splitbutton', text: 'Jorge (available)' }]
        }]
});

It’s starting to look good:

Provide the user with a means to change her current status

To allow for status changes, I will add a menu to the username button. Here’s the code:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2,
        items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2 },
            { xtype: 'splitbutton', text: 'Jorge (available)',
                menu: [{ text: 'Available', iconCls: 'ico-sts-available' },
                        { text: 'Busy', iconCls: 'ico-sts-busy' },
                        { text: 'Away', iconCls: 'ico-sts-away' },
                        { text: 'Appear Offline', iconCls: 'ico-sts-offline'}]
        }]
    }]
});

And this is how it looks:

Provide the user with a means to share a quick message and show the music she’s listening to

For this, I will use a split button, placed immediately below the username button:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2,
        items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2 },
            { xtype: 'splitbutton', text: 'Jorge (available)',
                menu: [{ text: 'Available', iconCls: 'ico-sts-available' },
                        { text: 'Busy', iconCls: 'ico-sts-busy' },
                        { text: 'Away', iconCls: 'ico-sts-away' },
                        { text: 'Appear Offline', iconCls: 'ico-sts-offline'}]
            },{ xtype: 'splitbutton', text: 'Share a quick message',
                menu: [{ text: 'Show what I am listening to'}]
         }]
    }]
});

Provide the user with a means to navigate to her profile, contact card, or space

I will add this feature in the form of a menu attached to the avatar button:

var wnd = new Ext.Window({
    width: 300,
    height: 450,
    layout:'fit',
    title: 'Instant Messenger',
    tbar: [{
        xtype: 'buttongroup',
        columns: 2,
        items: [{ xtype: 'button', scale: 'large', iconCls: 'icon-user', rowspan: 2,
        menu: [{ text: 'Show profile' }, { text: 'View contact card' },
               { text: 'Go to your space'}]
            },{ xtype: 'splitbutton', text: 'Jorge (available)',
                menu: [{ text: 'Available', iconCls: 'ico-sts-available' },
                        { text: 'Busy', iconCls: 'ico-sts-busy' },
                        { text: 'Away', iconCls: 'ico-sts-away' },
                        { text: 'Appear Offline', iconCls: 'ico-sts-offline'}]
            },{ xtype: 'splitbutton', text: 'Share a quick message',
                menu: [{ text: 'Show what I am listening to'}]
         }]
    }]
});

This is how the menu looks:

Display a the user’s contacts, organized by favorites, available and offline

The contacts will be shown with a treview. I will create an invisible root node and three branch nodes named Favorites, Available and Offline. The user’s contacts will be leaf nodes under these branches.

First, I add the tree to the window:

items: [{ xtype: 'treepanel',
    id: 'contacts-tree',
    border: false,
    useArrows: true,
    autoScroll: true,
    animate: true,
    containerScroll: true,
    bodyCssClass: 'tree-body',
    dataUrl: 'messenger.aspx',
    requestMethod: 'get',
    rootVisible: false,
    root: {
        nodeType: 'async',
        text: 'My Reporting Project',
        draggable: false,
        id: 'root-node'
}}]

Then, below the window definition, I add the favorites, available and offline branch nodes, as well as a few dummy contacts. I use the afterrender event to acquire a reference to the root node and then add child nodes to it:

var tree = Ext.getCmp('contacts-tree');
tree.on('afterrender', function(loader, node) {
    var root = tree.getRootNode();
    var node = root.appendChild({ id: 'favorites', text: 'Favorites', expanded: true, iconCls: 'ico-fav' });
    node.appendChild({ text: 'Susie', leaf: true, iconCls: 'ico-sts-available' });
    node.appendChild({ text: 'Lara', leaf: true, iconCls: 'ico-sts-away' });

    node = root.appendChild({ text: 'Available', expanded: true, iconCls: 'ico-grp-available' });
    node.appendChild({ text: 'Jonh', leaf: true, iconCls: 'ico-sts-busy' });
    node.appendChild({ text: 'Lara', leaf: true, iconCls: 'ico-sts-away' });
    node.appendChild({ text: 'Susie', leaf: true, iconCls: 'ico-sts-available' });

    node = root.appendChild({ text: 'Offline', expanded: true, iconCls: 'ico-grp-offline' });

})

And the window looks just the way I had planned:

This does it for now. In the next post of this series I will continue adding features to this contacts window.

Downloads

Download the full sample from my downloads page.

Debugging Your BlackBerry Application’s Server Code with Visual Studio

Jorge — Mon, 01 Jun 2009 18:17:00 -0800

This is how you debug the .NET server code that handles your BlackBerry application’s requests. You can set breakpoints in the server page or module and have them hit when the BlackBerry simulator makes a request to the server. The steps below use my end-to-end BlackBerry application as an example.

Open the solution with Visual Studio and set the web application, KowledgeBase.Web.UI in this case, as the startup project.
Open the web project’s properties, Web tab. Set the handler (BBHandler.ashx) as the start page.
Set breakpoints in the handler’s code and start the debugger
Browse to the handler page. See how the breakpoint is hit. Press F5 to go past the breakpoints and allow the ProcessRequest function to return. Now the debugger is attached and you can move on to the BlackBerry project.
Start the BlackBerry MDS simulator.
Start debugging your BlackBerry project in your favorite IDE. Make sure the BlackBerry application is pointing to your server project's URL. You can grab this URL from your browser's address bar, since VS pointed the browser to it.
Now you can exercise the functionality that talks to the server. You should be able to step through the server code once you hit the first breakpoint in it.

Why Prices at the Supermarket Are Not Dropping. Four Reasons to Be Cynical

Jorge — Sun, 03 May 2009 01:29:23 -0800

A post on the Consumer Reports Money & Shopping Blog focuses on the fact that after the economic slowdown, while commodities costs sunk, prices at the supermarket and the pump did not drop as quickly, and prices of some goods actually kept rising.

According to different experts, there are at least four arguments companies use to justify their reluctance to drop prices:

Fear of a price war. Rather than production costs, prices are dictated by what the competition charges. Price wars ensue when competitors lower their prices. And the fear of tumbling profits because a price war makes stores keep their prices unchanged.

Manufacturers do not want to disappoint you. Since manufacturers think the bonanza will not last, it does not make sense to drop prices now and risk creating tension with the customers down the road, when prices will be hiked again.

You would not appreciate it. While people feel great pain from price increases, they tend to be less appreciative of price decreases. If companies are not sure that the decreases are going to last, it does not make sense for them to drop prices.

It is your turn to help. Companies not always burden the consumers with their extra costs. Keeping prices high is a way to recoup lost profits for companies whose price hikes were not enough to fully cover their own costs.

After reading these explanations, is there reason to shout conspiracy?

The Daily Stand-up Meetings Remind Me That…

Jorge — Sun, 26 Apr 2009 14:42:45 -0800

In no particular order:

There are plenty of reasons for a programmer to lose focus in a four-hour period.

Sometimes my boss goes directly to a developer and tries to reprioritize her tasks.

Learning the business domain by osmosis is not enough for most programmers.

Overanalysis and featuritis must be fought daily.

Overanalyzer and great coder are not synonyms.

It's hard for a programmer to explain what they are doing, even to another programmer.

Knowledge of, and love for the testing discipline, do not come spontaneously.

"Please create unit tests" does not do the trick.

"Please enter the bugs in the tracking system" does not work either.

If something can possibly be misunderstood, it will be misunderstood. If it can't possibly be misunderstood, guess what?

Ext JS With ASP.NET MVC Sample

Jorge — Sat, 21 Mar 2009 22:52:00 -0800

This is a simple example of how you can use Ext JS and ASP.NET MVC together. The scenario is the same I have used in my previous Ext JS with PHP articles: I am going to display a number of fictitious categories using an Ext JS combo box. In this case, the combo box items’ data – the categories – will be served by an ASP.NET MVC application.

The MVC application

When I create the ASP.NET MVC application, Visual Studio builds a default folder structure where the main components of the application are distributed like this:

The Controllers folder is where you put Controller classes that handle URL requests
The Models folder will contain classes that represent and manipulate data
Views is the folder where you put UI template files that are responsible for rendering output
Scripts is where you put JavaScript library files and scripts
Content is where you put CSS and image files, and other non-dynamic/non-JavaScript content
App_Data is where you store data files you want to read/write

Large applications will likely use multiple Visual Studio projects, but I will stick to this default structure in order to keep the example simple.

The View

In a model-view-controller scenario the View renders entities from the Model into a form suitable for interaction. The View in this example is the html page containing the Categories combo box.

I called this page combo.html, and the Ext JS components I use are a ComboBox and a JsonStore:

Ext.onReady(function() {

    var categoriesStore = new Ext.data.JsonStore({
        url: 'http://localhost/MvcApp/Categories',
        root: 'Categories',
        fields: ['Id', 'Name']
    });

    var combo = new Ext.form.ComboBox({
        store: categoriesStore,
        displayField: 'Name',
        valueField: 'Id',
        typeAhead: true,
        mode: 'remote',
        forceSelection: true,
        triggerAction: 'all',
        emptyText: 'Select a category...',
        selectOnFocus: true,
        applyTo: 'categories-combo'
    });
});

The Controller

To adhere to the default url routing rules in ASP.NET MVC, the Controller is named CategoriesController. This will permit that requests to the http://localhost/MvcApp/Categories url in the view (combo.html) get routed to my Controller.

CategoriesController will handle the View requests and will ask the Model to produce the needed data:

public JsonResult Index() {

    CategoriesContainer container = CategoriesDataContext.GetCategories();

    return  this.Json(container);

}

When a request is made to the http://localhost/MvcApp/Categories url, the Index() method will be executed. Note that the return value of Index() is of type JsonResult and not ActionResult. This indicates that the method returns JSON-encoded data. The encoding is acomplished with the call to Controller.Json() .

CategoriesContainer and CategoriesDataContext are part of the Model. Let’s now take a look at them.

Building the Model

The term “model” refers to the objects that represent the data of the application, as well as the corresponding domain logic with the business rules and validation. CategoriesContainer is a Class that exposes an array of Category objects:

public class CategoriesContainer
{
    public Category[] Categories { get; set; }
}

A key point here is that when serialized to JSON, an instance of CategoriesContainer will have the signature the View’s JsonStore is expecting.

CategoriesDataContext creates the categories data. In a real-world application this would likely be more involved than simply hard-coding the data. :-)

public class CategoriesDataContext
{
    public static CategoriesContainer GetCategories() {
        Category[] categoriesArray = new Category[10];
        for (int i = 0; i < 10; i++) {
            Category category = new Category { Id = i, Name = "Category " + i.ToString() };
            categoriesArray[i] = category;
        }
        CategoriesContainer container = new CategoriesContainer();
        container.Categories = categoriesArray;
        return container;
    }
}

And last, the definition of a category can be something as simple as this Category Class:

public class Category
{
    public int Id {get;set;}
    public string Name {get;set;}
}

Downloads

Download the full sample from my downloads page.

How to Add a Simulator to the BlackBerry JDE

Jorge — Wed, 25 Feb 2009 20:54:00 -0800

I am currently fixing a problem with one of our BlackBerry applications. The problem only shows on the 8330 devices and while trying to debug it, I realized that the 8330’s simulator was not showing in the JDE’s list of available simulators.

In this post I will explain what I did to add the 8330’s simulator to the list of available profiles.

After downloading the 8330 simulator pakage from the BlackBerry developers site and installing it, I opened the SimPackage-JDE.rc file located in the JDE installation folder (You can open it with a text editor). This file, which contains a couple of entries per simulator profile, is the settings file used by the JDE to run the different simulators. This is how the entries look:

## RIM Java Development Environment
# Settings file
SimulatorCommand7130-JDE=<install_dir>\fledge.exe /app=Jvm.dll /handheld=7130 /session=7130 /app-param=DisableRegistration /app-param=JvmAlxConfigFile:7130.xml /data-port=0x4d44 /data-port=0x4d4e /pin=0x2100000A
SimulatorDirectory7130-JDE=<install_dir>
SimulatorCommand7130e-JDE=<install_dir>\fledge.exe /app=Jvm.dll /handheld=7130e /session=7130e /app-param=DisableRegistration /app-param=JvmAlxConfigFile:7130e.xml /data-port=0x4d44 /data-port=0x4d4e /pin=0x2100000A
SimulatorDirectory7130e-JDE=<install_dir>
SimulatorCommand8100-JDE=<install_dir>\fledge.exe /app=Jvm.dll /handheld=8100 /session=8100 /app-param=DisableRegistration /app-param=JvmAlxConfigFile:8100.xml /data-port=0x4d44 /data-port=0x4d4e /pin=0x2100000A
SimulatorDirectory8100-JDE=<install_dir>

As you can see, each simulator’s settings consist of an entry that specifies the command used to run the simulator and an entry that specifies the folder where the simulator resides.

Knowing this, I created two more entries form my just-installed simulator. In this case, instead of using the <install_dir> placeholder, I used the actual path to the simulator. I also used the command line parameters for the 8330 simulator, which I grabbed from the 8330.bat file in C:\Program Files\Research In Motion\BlackBerry Smartphone Simulators 4.3.0\4.3.0.124 (8330):

SimulatorCommand8800-JDE="C:\Program Files\Research In Motion\BlackBerry Smartphone Simulators 4.3.0\4.3.0.124 (8330)\fledge.exe /app=Jvm.dll" /handheld=8330 /session=8330 /app-param=DisableRegistration /app-param=JvmAlxConfigFile:8330.xml /data-port=0x4d44 /data-port=0x4d4e /pin=0x2100000A
SimulatorDirectory8800-JDE="C:\Program Files\Research In Motion\BlackBerry Smartphone Simulators 4.3.0\4.3.0.124 (8330)"

After doing this, the 8330’s profile showed in the JDE’s simulators list: