From f364b2b1e05cec0976f2b3a90740d4fac35f19d6 Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Wed, 27 Jun 2012 18:25:16 +0200
Subject: [PATCH] update cities example

---
 examples/lists/cities/js/example.js | 36 +++++++++++++----------------
 1 file changed, 16 insertions(+), 20 deletions(-)

diff --git a/examples/lists/cities/js/example.js b/examples/lists/cities/js/example.js
index ca8c29a5..67264db8 100644
--- a/examples/lists/cities/js/example.js
+++ b/examples/lists/cities/js/example.js
@@ -164,22 +164,6 @@ Ox.load({UI: {showScreen: true}, Geo: {}}, function() {
                     First of all, we define the columns.
                     */
                     columns: [
-                        {
-                            /*
-                            We don't want to display the id, so we omit the
-                            `visible` attribute, which defaults to `false`. We
-                            still have to include the id in the list of columns,
-                            since it's the unique key of our table. In
-                            consequence, whenever the list fires a `select`
-                            event, it will reference this value as the item's
-                            id.
-                            */
-                            id: 'id',
-                            operator: '+',
-                            title: 'ID',
-                            unique: true,
-                            width: 80
-                        },
                         {
                             /*
                             We use the `format` function to display the region
@@ -329,6 +313,11 @@ Ox.load({UI: {showScreen: true}, Geo: {}}, function() {
                             visible: true,
                             width: 80
                         },
+                        /*
+                        The elevation data is not very accurate, so we omit the
+                        `visible` attribute, which defaults to `false`. Still,
+                        the user can make the column visible.
+                        */
                         {
                             align: 'right',
                             format: function(value) {
@@ -341,15 +330,16 @@ Ox.load({UI: {showScreen: true}, Geo: {}}, function() {
                         }
                     ],
                     /*
-                    This allows the user to move the columns around
+                    This allows the user to move the columns around.
                     */
                     columnsMovable: true,
                     /*
-                    This enables the UI to show or hide specific columns
+                    This adds a menu that can be used to show or hide specific
+                    columns.
                     */
                     columnsRemovable: true,
                     /*
-                    This makes sure the column titles get displayed
+                    This makes sure the column titles get displayed.
                     */
                     columnsVisible: true,
                     /*
@@ -378,7 +368,13 @@ Ox.load({UI: {showScreen: true}, Geo: {}}, function() {
                     In this case, the `init` event will have a `population`
                     property that is the sum of the population of all items.
                     */
-                    sums: ['population']
+                    sums: ['population'],
+                    /*
+                    The 'id' property is the unique key of our table. In
+                    consequence, whenever the list fires a `select` event, it
+                    will reference this value as the item's unique id.
+                    */
+                    unique: 'id'
                 })
                 .bindEvent({
                     /*