update countries example

examples/lists/countries/js/example.js

@@ -418,17 +418,33 @@ Ox.load(['UI', 'Geo'], function() {
     }
 
     /*
-    ...
+    This renders the list.
     */
     function renderList() {
         return ui.view == 'grid'
+            /*
+            For grid view, we use Ox.IconList.
+            */
             ? Ox.IconList({
+                /*
+                The border radius of the icons, in px.
+                */
                 borderRadius: 16,
+                /*
+                Signals that all icons have the same ratio, in this case `1`.
+                */
                 fixedRatio: 1,
+                /*
+                A function that takes item data, sort option and icon size, and
+                returns an object with the icon's image URL, width, height,
+                title and info. Info is the "subtitle", and we'll display the
+                formatted value of the current sort key.
+                */
                 item: function(data, sort, size) {
                     var key = sort[0].key == 'name' ? 'code' : sort[0].key,
                         column = Ox.getObjectById(columns, key),
                         info = (column.format || Ox.identity)(data[key]);
+                    Ox.print('DDD', data)
                     return {
                         height: size,
                         id: data.id,
@@ -439,25 +455,55 @@ Ox.load(['UI', 'Geo'], function() {
                     };
                 },
                 items: items,
+                // FIXME
                 keys: ['flag', 'name'],
+                /*
+                Maximum number of items that can be selected.
+                */
                 max: 1,
+                /*
+                Since the total number of items isn't very large, we don't need
+                pagination, so we set `pageLength` to a larger number.
+                */
                 pageLength: 1000,
                 query: query,
+                /*
+                This enables "select-as-you-type". When the list has focus, the
+                user can just type a few letters, and if they match the
+                beginning of an item's `name` property, that item will be
+                selected.
+                */
                 selectAsYouType: 'name',
                 selected: ui.selected,
+                /*
+                The icon size, in px.
+                */
                 size: 128,
                 sort: Ox.clone(ui.sort, true),
+                /*
+                The unique key. Whenever the list fires a `select` event, it
+                will reference this as the item's unique id.
+                */
                 unique: 'code'
             })
             .bindEvent({
                 init: init,
                 select: select
             })
+        /*
+        For list view, we use Ox.TableList.
+        */
         : Ox.TableList({
+                /*
+                The list columns, as defined earlier.
+                */
                 columns: columns,
                 columnsMovable: true,
                 columnsRemovable: true,
                 columnsVisible: true,
+                /*
+                The other options are similar as above.
+                */
                 items: items,
                 max: 1,
                 pageLength: 1000,
@@ -471,6 +517,10 @@ Ox.load(['UI', 'Geo'], function() {
             .bindEvent({
                 init: init,
                 select: select,
+                /*
+                As the TableList has its own UI for sorting, we also bind to its
+                `sort` event.
+                */
                 sort: sort
             });
     }