The source code

/** - * @class Ext.ListView +
/**
+ * @class Ext.list.ListView
  * @extends Ext.DataView
- * Ext.ListView is a fast and light-weight implentation of a
+ * 
Ext.list.ListView is a fast and light-weight implentation of a
  * {@link Ext.grid.GridPanel Grid} like view with the following characteristics:
  * 
  * resizable columns
@@ -49,7 +50,7 @@ var store = new Ext.data.JsonStore({
 });
 store.load();
 
-var listView = new Ext.ListView({
+var listView = new Ext.list.ListView({
     store: store,
     multiSelect: true,
     emptyText: 'No images to display',
@@ -94,26 +95,26 @@ listView.on('selectionchange', function(view, nodes){
  * @param {Object} config
  * @xtype listview
  */
-Ext.ListView = Ext.extend(Ext.DataView, {
-    /**
+Ext.list.ListView = Ext.extend(Ext.DataView, {
+    /**
      * Set this property to true to disable the header click handler disabling sort
      * (defaults to false).
      * @type Boolean
      * @property disableHeaders
      */
-    /**
+    /**
      * @cfg {Boolean} hideHeaders
      * true to hide the {@link #internalTpl header row} (defaults to false so
      * the {@link #internalTpl header row} will be shown).
      */
-    /**
+    /**
      * @cfg {String} itemSelector
      * Defaults to 'dl' to work with the preconfigured {@link Ext.DataView#tpl tpl}.
      * This setting specifies the CSS selector (e.g. div.some-class or span:first-child)
      * that will be used to determine what nodes the ListView will be working with.   
      */
     itemSelector: 'dl',
-    /**
+    /**
      * @cfg {String} selectedClass The CSS class applied to a selected row (defaults to
      * 'x-list-selected'). An example overriding the default styling:
     
@@ -122,7 +123,7 @@ Ext.ListView = Ext.extend(Ext.DataView, {
      * @type String
      */
     selectedClass:'x-list-selected',
-    /**
+    /**
      * @cfg {String} overClass The CSS class applied when over a row (defaults to
      * 'x-list-over'). An example overriding the default styling:
     
@@ -131,24 +132,25 @@ Ext.ListView = Ext.extend(Ext.DataView, {
      * @type String
      */
     overClass:'x-list-over',
-    /**
+    /**
      * @cfg {Boolean} reserveScrollOffset
      * By default will defer accounting for the configured {@link #scrollOffset}
      * for 10 milliseconds.  Specify true to account for the configured
      * {@link #scrollOffset} immediately.
      */
-    /**
+    /**
      * @cfg {Number} scrollOffset The amount of space to reserve for the scrollbar (defaults to
-     * 19 pixels)
+     * undefined). If an explicit value isn't specified, this will be automatically
+     * calculated.
      */
-    scrollOffset : 19,
-    /**
+    scrollOffset : undefined,
+    /**
      * @cfg {Boolean/Object} columnResize
-     * Specify true or specify a configuration object for {@link Ext.ListView.ColumnResizer}
+     * Specify true or specify a configuration object for {@link Ext.list.ListView.ColumnResizer}
      * to enable the columns to be resizable (defaults to true).
      */
     columnResize: true,
-    /**
+    /**
      * @cfg {Array} columns An array of column configuration objects, for example:
      * 
 {
@@ -178,31 +180,36 @@ Ext.ListView = Ext.extend(Ext.DataView, {
      * every column needs to be explicitly defined.

      * 
      */
-    /**
+    /**
      * @cfg {Boolean/Object} columnSort
-     * Specify true or specify a configuration object for {@link Ext.ListView.Sorter}
+     * Specify true or specify a configuration object for {@link Ext.list.ListView.Sorter}
      * to enable the columns to be sortable (defaults to true).
      */
     columnSort: true,
-    /**
+    /**
      * @cfg {String/Array} internalTpl
      * The template to be used for the header row.  See {@link #tpl} for more details.
      */
 
+    /*
+     * IE has issues when setting percentage based widths to 100%. Default to 99.
+     */
+    maxWidth: Ext.isIE ? 99 : 100,
+    
     initComponent : function(){
         if(this.columnResize){
-            this.colResizer = new Ext.ListView.ColumnResizer(this.colResizer);
+            this.colResizer = new Ext.list.ColumnResizer(this.colResizer);
             this.colResizer.init(this);
         }
         if(this.columnSort){
-            this.colSorter = new Ext.ListView.Sorter(this.columnSort);
+            this.colSorter = new Ext.list.Sorter(this.columnSort);
             this.colSorter.init(this);
         }
         if(!this.internalTpl){
             this.internalTpl = new Ext.XTemplate(
                 '',
                     '',
-                    '',
+                    '',
                         '{header}',
                     '',
                     '',
@@ -217,7 +224,8 @@ Ext.ListView = Ext.extend(Ext.DataView, {
                 '',
                     '',
                         '',
-                        '',
+                        '
',
+                        ' class="{cls}">',
                             '{[values.tpl.apply(parent)]}',
                         '
',
                         '',
@@ -226,39 +234,49 @@ Ext.ListView = Ext.extend(Ext.DataView, {
                 ''
             );
         };
-        var cs = this.columns, allocatedWidth = 0, colsWithWidth = 0, len = cs.length;
+        
+        var cs = this.columns, 
+            allocatedWidth = 0, 
+            colsWithWidth = 0, 
+            len = cs.length, 
+            columns = [];
+            
         for(var i = 0; i < len; i++){
             var c = cs[i];
-            if(!c.tpl){
-                c.tpl = new Ext.XTemplate('{' + c.dataIndex + '}');
-            }else if(Ext.isString(c.tpl)){
-                c.tpl = new Ext.XTemplate(c.tpl);
+            if(!c.isColumn) {
+                c.xtype = c.xtype ? (/^lv/.test(c.xtype) ? c.xtype : 'lv' + c.xtype) : 'lvcolumn';
+                c = Ext.create(c);
             }
-            c.align = c.align || 'left';
-            if(Ext.isNumber(c.width)){
-                c.width *= 100;
-                allocatedWidth += c.width;
+            if(c.width) {
+                allocatedWidth += c.width*100;
                 colsWithWidth++;
             }
+            columns.push(c);
         }
+        
+        cs = this.columns = columns;
+        
         // auto calculate missing column widths
         if(colsWithWidth < len){
             var remaining = len - colsWithWidth;
-            if(allocatedWidth < 100){
-                var perCol = ((100-allocatedWidth) / remaining);
+            if(allocatedWidth < this.maxWidth){
+                var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100;
                 for(var j = 0; j < len; j++){
                     var c = cs[j];
-                    if(!Ext.isNumber(c.width)){
+                    if(!c.width){
                         c.width = perCol;
                     }
                 }
             }
         }
-        Ext.ListView.superclass.initComponent.call(this);
+        Ext.list.ListView.superclass.initComponent.call(this);
     },
 
     onRender : function(){
-        Ext.ListView.superclass.onRender.apply(this, arguments);
+        this.autoEl = {
+            cls: 'x-list-wrap'  
+        };
+        Ext.list.ListView.superclass.onRender.apply(this, arguments);
 
         this.internalTpl.overwrite(this.el, {columns: this.columns});
         
@@ -274,7 +292,7 @@ Ext.ListView = Ext.extend(Ext.DataView, {
         return this.innerBody;
     },
 
-    /**
+    /**
      * Function which can be overridden which returns the data object passed to this
      * view's {@link #tpl template} to render the whole ListView. The returned object 
      * shall contain the following properties:
@@ -289,7 +307,7 @@ Ext.ListView = Ext.extend(Ext.DataView, {
      * XTemplate as described above.
      */
     collectData : function(){
-        var rs = Ext.ListView.superclass.collectData.apply(this, arguments);
+        var rs = Ext.list.ListView.superclass.collectData.apply(this, arguments);
         return {
             columns: this.columns,
             rows: rs
@@ -311,7 +329,7 @@ Ext.ListView = Ext.extend(Ext.DataView, {
         }
         var bdp = bd.parentNode;
         if(Ext.isNumber(w)){
-            var sw = w - this.scrollOffset;
+            var sw = w - Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
             if(this.reserveScrollOffset || ((bdp.offsetWidth - bdp.clientWidth) > 10)){
                 bd.style.width = sw + 'px';
                 hd.style.width = sw + 'px';
@@ -326,13 +344,13 @@ Ext.ListView = Ext.extend(Ext.DataView, {
                 }, 10);
             }
         }
-        if(Ext.isNumber(h == 'number')){
+        if(Ext.isNumber(h)){
             bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px';
         }
     },
 
     updateIndexes : function(){
-        Ext.ListView.superclass.updateIndexes.apply(this, arguments);
+        Ext.list.ListView.superclass.updateIndexes.apply(this, arguments);
         this.verifyInternalSize();
     },
 
@@ -350,11 +368,14 @@ Ext.ListView = Ext.extend(Ext.DataView, {
     setHdWidths : function(){
         var els = this.innerHd.dom.getElementsByTagName('div');
         for(var i = 0, cs = this.columns, len = cs.length; i < len; i++){
-            els[i].style.width = cs[i].width + '%';
+            els[i].style.width = (cs[i].width*100) + '%';
         }
     }
 });
 
-Ext.reg('listview', Ext.ListView);
+Ext.reg('listview', Ext.list.ListView); + +// Backwards compatibility alias +Ext.ListView = Ext.list.ListView;