better list demo

demos/test/list.js

@@ -19,7 +19,6 @@ $(function() {
                 id: "year",
                 title: "Year"
             },
-            /*
             {
                 id: "language",
                 title: "Language"
@@ -28,13 +27,13 @@ $(function() {
                 id: "genre",
                 title: "Genre"
             }
-            */
         ],
         $group = [],
         elements = [],
         rightPanelWidth = $document.width() - 256;
+
     $.each(groups, function(i, v) {
-        var size = rightPanelWidth / 3 + (rightPanelWidth % 3 > i);
+        var size = rightPanelWidth / 5 + (rightPanelWidth % 5 > i);
         $group[i] = new Ox.TextList({
             columns: [
                 {
@@ -44,15 +43,15 @@ $(function() {
                     title: v.title,
                     unique: true,
                     visible: true,
-                    width: size - 60 - ($.browser.mozilla ? 16 : 12)
+                    width: size - 40 - ($.browser.mozilla ? 16 : 12)
                 },
                 {
                     align: "right",
                     id: "items",
                     operator: "-",
-                    title: "Items",
+                    title: "#",
                     visible: true,
-                    width: 60
+                    width: 40
                 }
             ],
             id: "group_" + v.id,
@@ -74,8 +73,8 @@ $(function() {
             },
             sort: [
                 {
-                    key: "name",
-                    operator: "+"
+                    key: v.id == "year" ? "name" : "items",
+                    operator: "-"
                 }
             ]
         });
@@ -85,13 +84,27 @@ $(function() {
             size: size
         });
     });
-    Ox.print("elements", elements)
 
-    var $groupsPanel = new Ox.SplitPanel({
-            elements: elements,
+    var $groupsInnerPanel = new Ox.SplitPanel({
+            elements: [
+                elements[1],
+                elements[2],
+                elements[3]
+            ],
             orientation: "horizontal"
         }),
 
+        $groupsOuterPanel = new Ox.SplitPanel({
+            elements: [
+                elements[0],
+                {
+                    element: $groupsInnerPanel
+                },
+                elements[4]
+            ],
+            orientation: "horizontal"
+        })
+
         $list = new Ox.TextList({
             columns: [
                 {
@@ -327,7 +340,7 @@ $(function() {
         $contentPanel = new Ox.SplitPanel({
             elements: [
                 {
-                    element: $groupsPanel,
+                    element: $groupsOuterPanel,
                     size: 128
                 },
                 {
@@ -366,7 +379,14 @@ $(function() {
             orientation: "vertical"
         }),
 
+        $loadingIcon = new Ox.LoadingIcon({
+            size: "medium"
+        });
+
         $mainMenu = new Ox.MainMenu({
+            extras: [
+                $loadingIcon
+            ],
             menus: [
                 {
                     id: "demo",
@@ -423,6 +443,16 @@ $(function() {
             orientation: "vertical"
         }).appendTo($body);
 
+    Ox.Request.requests() && $loadingIcon.start();
+    Ox.Event.bind(null, "requestStart", function() {
+        Ox.print("start")
+        $loadingIcon.start();
+    });
+    Ox.Event.bind(null, "requestStop", function() {
+        Ox.print("stop")
+        $loadingIcon.stop();
+    });
+
     $.each(groups, function(i, group) {
         Ox.Event.bind(null, "select_group_" + group.id, function(event, data) {
             $list.options({