Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / docs / source / ListView.html
index 3f3ba1f..449be7a 100644 (file)
@@ -1,20 +1,15 @@
-<html>
-<head>
-  <title>The source code</title>
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
-</head>
-<body  onload="prettyPrint();">
-    <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.0.3
- * Copyright(c) 2006-2009 Ext JS, LLC
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.ListView"></div>/**\r
- * @class Ext.ListView\r
+<html>\r
+<head>\r
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js"><div id="cls-Ext.list.ListView"></div>/**\r
+ * @class Ext.list.ListView\r
  * @extends Ext.DataView\r
- * <p>Ext.ListView is a fast and light-weight implentation of a\r
+ * <p>Ext.list.ListView is a fast and light-weight implentation of a\r
  * {@link Ext.grid.GridPanel Grid} like view with the following characteristics:</p>\r
  * <div class="mdetail-params"><ul>\r
  * <li>resizable columns</li>\r
@@ -55,7 +50,7 @@ var store = new Ext.data.JsonStore({
 });\r
 store.load();\r
 \r
-var listView = new Ext.ListView({\r
+var listView = new Ext.list.ListView({\r
     store: store,\r
     multiSelect: true,\r
     emptyText: 'No images to display',\r
@@ -100,26 +95,26 @@ listView.on('selectionchange', function(view, nodes){
  * @param {Object} config\r
  * @xtype listview\r
  */\r
-Ext.ListView = Ext.extend(Ext.DataView, {\r
-    <div id="prop-Ext.ListView-disableHeaders"></div>/**\r
+Ext.list.ListView = Ext.extend(Ext.DataView, {\r
+    <div id="prop-Ext.list.ListView-disableHeaders"></div>/**\r
      * Set this property to <tt>true</tt> to disable the header click handler disabling sort\r
      * (defaults to <tt>false</tt>).\r
      * @type Boolean\r
      * @property disableHeaders\r
      */\r
-    <div id="cfg-Ext.ListView-hideHeaders"></div>/**\r
+    <div id="cfg-Ext.list.ListView-hideHeaders"></div>/**\r
      * @cfg {Boolean} hideHeaders\r
      * <tt>true</tt> to hide the {@link #internalTpl header row} (defaults to <tt>false</tt> so\r
      * the {@link #internalTpl header row} will be shown).\r
      */\r
-    <div id="cfg-Ext.ListView-itemSelector"></div>/**\r
+    <div id="cfg-Ext.list.ListView-itemSelector"></div>/**\r
      * @cfg {String} itemSelector\r
      * Defaults to <tt>'dl'</tt> to work with the preconfigured <b><tt>{@link Ext.DataView#tpl tpl}</tt></b>.\r
      * This setting specifies the CSS selector (e.g. <tt>div.some-class</tt> or <tt>span:first-child</tt>)\r
      * that will be used to determine what nodes the ListView will be working with.   \r
      */\r
     itemSelector: 'dl',\r
-    <div id="cfg-Ext.ListView-selectedClass"></div>/**\r
+    <div id="cfg-Ext.list.ListView-selectedClass"></div>/**\r
      * @cfg {String} selectedClass The CSS class applied to a selected row (defaults to\r
      * <tt>'x-list-selected'</tt>). An example overriding the default styling:\r
     <pre><code>\r
@@ -128,7 +123,7 @@ Ext.ListView = Ext.extend(Ext.DataView, {
      * @type String\r
      */\r
     selectedClass:'x-list-selected',\r
-    <div id="cfg-Ext.ListView-overClass"></div>/**\r
+    <div id="cfg-Ext.list.ListView-overClass"></div>/**\r
      * @cfg {String} overClass The CSS class applied when over a row (defaults to\r
      * <tt>'x-list-over'</tt>). An example overriding the default styling:\r
     <pre><code>\r
@@ -137,25 +132,25 @@ Ext.ListView = Ext.extend(Ext.DataView, {
      * @type String\r
      */\r
     overClass:'x-list-over',\r
-    <div id="cfg-Ext.ListView-reserveScrollOffset"></div>/**\r
+    <div id="cfg-Ext.list.ListView-reserveScrollOffset"></div>/**\r
      * @cfg {Boolean} reserveScrollOffset\r
      * By default will defer accounting for the configured <b><tt>{@link #scrollOffset}</tt></b>\r
      * for 10 milliseconds.  Specify <tt>true</tt> to account for the configured\r
      * <b><tt>{@link #scrollOffset}</tt></b> immediately.\r
      */\r
-    <div id="cfg-Ext.ListView-scrollOffset"></div>/**\r
+    <div id="cfg-Ext.list.ListView-scrollOffset"></div>/**\r
      * @cfg {Number} scrollOffset The amount of space to reserve for the scrollbar (defaults to\r
      * <tt>undefined</tt>). If an explicit value isn't specified, this will be automatically\r
      * calculated.\r
      */\r
     scrollOffset : undefined,\r
-    <div id="cfg-Ext.ListView-columnResize"></div>/**\r
+    <div id="cfg-Ext.list.ListView-columnResize"></div>/**\r
      * @cfg {Boolean/Object} columnResize\r
-     * Specify <tt>true</tt> or specify a configuration object for {@link Ext.ListView.ColumnResizer}\r
+     * Specify <tt>true</tt> or specify a configuration object for {@link Ext.list.ListView.ColumnResizer}\r
      * to enable the columns to be resizable (defaults to <tt>true</tt>).\r
      */\r
     columnResize: true,\r
-    <div id="cfg-Ext.ListView-columns"></div>/**\r
+    <div id="cfg-Ext.list.ListView-columns"></div>/**\r
      * @cfg {Array} columns An array of column configuration objects, for example:\r
      * <pre><code>\r
 {\r
@@ -185,13 +180,13 @@ Ext.ListView = Ext.extend(Ext.DataView, {
      * every column needs to be explicitly defined.</div></li>\r
      * </ul></div>\r
      */\r
-    <div id="cfg-Ext.ListView-columnSort"></div>/**\r
+    <div id="cfg-Ext.list.ListView-columnSort"></div>/**\r
      * @cfg {Boolean/Object} columnSort\r
-     * Specify <tt>true</tt> or specify a configuration object for {@link Ext.ListView.Sorter}\r
+     * Specify <tt>true</tt> or specify a configuration object for {@link Ext.list.ListView.Sorter}\r
      * to enable the columns to be sortable (defaults to <tt>true</tt>).\r
      */\r
     columnSort: true,\r
-    <div id="cfg-Ext.ListView-internalTpl"></div>/**\r
+    <div id="cfg-Ext.list.ListView-internalTpl"></div>/**\r
      * @cfg {String/Array} internalTpl\r
      * The template to be used for the header row.  See {@link #tpl} for more details.\r
      */\r
@@ -203,18 +198,18 @@ Ext.ListView = Ext.extend(Ext.DataView, {
     \r
     initComponent : function(){\r
         if(this.columnResize){\r
-            this.colResizer = new Ext.ListView.ColumnResizer(this.colResizer);\r
+            this.colResizer = new Ext.list.ColumnResizer(this.colResizer);\r
             this.colResizer.init(this);\r
         }\r
         if(this.columnSort){\r
-            this.colSorter = new Ext.ListView.Sorter(this.columnSort);\r
+            this.colSorter = new Ext.list.Sorter(this.columnSort);\r
             this.colSorter.init(this);\r
         }\r
         if(!this.internalTpl){\r
             this.internalTpl = new Ext.XTemplate(\r
                 '<div class="x-list-header"><div class="x-list-header-inner">',\r
                     '<tpl for="columns">',\r
-                    '<div style="width:{width}%;text-align:{align};"><em unselectable="on" id="',this.id, '-xlhd-{#}">',\r
+                    '<div style="width:{[values.width*100]}%;text-align:{align};"><em unselectable="on" id="',this.id, '-xlhd-{#}">',\r
                         '{header}',\r
                     '</em></div>',\r
                     '</tpl>',\r
@@ -229,7 +224,8 @@ Ext.ListView = Ext.extend(Ext.DataView, {
                 '<tpl for="rows">',\r
                     '<dl>',\r
                         '<tpl for="parent.columns">',\r
-                        '<dt style="width:{width}%;text-align:{align};"><em unselectable="on">',\r
+                        '<dt style="width:{[values.width*100]}%;text-align:{align};">',\r
+                        '<em unselectable="on"<tpl if="cls"> class="{cls}</tpl>">',\r
                             '{[values.tpl.apply(parent)]}',\r
                         '</em></dt>',\r
                         '</tpl>',\r
@@ -238,48 +234,49 @@ Ext.ListView = Ext.extend(Ext.DataView, {
                 '</tpl>'\r
             );\r
         };\r
+        \r
         var cs = this.columns, \r
             allocatedWidth = 0, \r
             colsWithWidth = 0, \r
             len = cs.length, \r
             columns = [];\r
+            \r
         for(var i = 0; i < len; i++){\r
-            var c = Ext.apply({}, cs[i]);\r
-            if(!c.tpl){\r
-                c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');\r
-            }else if(Ext.isString(c.tpl)){\r
-                c.tpl = new Ext.XTemplate(c.tpl);\r
+            var c = cs[i];\r
+            if(!c.isColumn) {\r
+                c.xtype = c.xtype ? (/^lv/.test(c.xtype) ? c.xtype : 'lv' + c.xtype) : 'lvcolumn';\r
+                c = Ext.create(c);\r
             }\r
-            c.align = c.align || 'left';\r
-            if(Ext.isNumber(c.width)){\r
-                c.width *= 100;\r
-                allocatedWidth += c.width;\r
+            if(c.width) {\r
+                allocatedWidth += c.width*100;\r
                 colsWithWidth++;\r
             }\r
             columns.push(c);\r
         }\r
+        \r
         cs = this.columns = columns;\r
+        \r
         // auto calculate missing column widths\r
         if(colsWithWidth < len){\r
             var remaining = len - colsWithWidth;\r
             if(allocatedWidth < this.maxWidth){\r
-                var perCol = ((this.maxWidth-allocatedWidth) / remaining);\r
+                var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100;\r
                 for(var j = 0; j < len; j++){\r
                     var c = cs[j];\r
-                    if(!Ext.isNumber(c.width)){\r
+                    if(!c.width){\r
                         c.width = perCol;\r
                     }\r
                 }\r
             }\r
         }\r
-        Ext.ListView.superclass.initComponent.call(this);\r
+        Ext.list.ListView.superclass.initComponent.call(this);\r
     },\r
 \r
     onRender : function(){\r
         this.autoEl = {\r
             cls: 'x-list-wrap'  \r
         };\r
-        Ext.ListView.superclass.onRender.apply(this, arguments);\r
+        Ext.list.ListView.superclass.onRender.apply(this, arguments);\r
 \r
         this.internalTpl.overwrite(this.el, {columns: this.columns});\r
         \r
@@ -295,7 +292,7 @@ Ext.ListView = Ext.extend(Ext.DataView, {
         return this.innerBody;\r
     },\r
 \r
-    <div id="method-Ext.ListView-collectData"></div>/**\r
+    <div id="method-Ext.list.ListView-collectData"></div>/**\r
      * <p>Function which can be overridden which returns the data object passed to this\r
      * view's {@link #tpl template} to render the whole ListView. The returned object \r
      * shall contain the following properties:</p>\r
@@ -310,7 +307,7 @@ Ext.ListView = Ext.extend(Ext.DataView, {
      * XTemplate as described above.\r
      */\r
     collectData : function(){\r
-        var rs = Ext.ListView.superclass.collectData.apply(this, arguments);\r
+        var rs = Ext.list.ListView.superclass.collectData.apply(this, arguments);\r
         return {\r
             columns: this.columns,\r
             rows: rs\r
@@ -353,7 +350,7 @@ Ext.ListView = Ext.extend(Ext.DataView, {
     },\r
 \r
     updateIndexes : function(){\r
-        Ext.ListView.superclass.updateIndexes.apply(this, arguments);\r
+        Ext.list.ListView.superclass.updateIndexes.apply(this, arguments);\r
         this.verifyInternalSize();\r
     },\r
 \r
@@ -371,11 +368,14 @@ Ext.ListView = Ext.extend(Ext.DataView, {
     setHdWidths : function(){\r
         var els = this.innerHd.dom.getElementsByTagName('div');\r
         for(var i = 0, cs = this.columns, len = cs.length; i < len; i++){\r
-            els[i].style.width = cs[i].width + '%';\r
+            els[i].style.width = (cs[i].width*100) + '%';\r
         }\r
     }\r
 });\r
 \r
-Ext.reg('listview', Ext.ListView);</pre>
-</body>
+Ext.reg('listview', Ext.list.ListView);\r
+\r
+// Backwards compatibility alias\r
+Ext.ListView = Ext.list.ListView;</pre>    \r
+</body>\r
 </html>
\ No newline at end of file