X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..6a7e4474cba9d8be4b2ec445e10f1691f7277c50:/src/widgets/list/ListView.js diff --git a/src/widgets/list/ListView.js b/src/widgets/list/ListView.js index c25bd845..ad17a1ec 100644 --- a/src/widgets/list/ListView.js +++ b/src/widgets/list/ListView.js @@ -1,377 +1,377 @@ /*! - * Ext JS Library 3.1.1 - * Copyright(c) 2006-2010 Ext JS, LLC + * Ext JS Library 3.2.0 + * Copyright(c) 2006-2010 Ext JS, Inc. * licensing@extjs.com * http://www.extjs.com/license */ -/** - * @class Ext.list.ListView - * @extends Ext.DataView - *

Ext.list.ListView is a fast and light-weight implentation of a - * {@link Ext.grid.GridPanel Grid} like view with the following characteristics:

- *
- *

Example usage:

- * 

-// consume JSON of this form:
-{
-   "images":[
-      {
-         "name":"dance_fever.jpg",
-         "size":2067,
-         "lastmod":1236974993000,
-         "url":"images\/thumbs\/dance_fever.jpg"
-      },
-      {
-         "name":"zack_sink.jpg",
-         "size":2303,
-         "lastmod":1236974993000,
-         "url":"images\/thumbs\/zack_sink.jpg"
-      }
-   ]
-} 
-var store = new Ext.data.JsonStore({
-    url: 'get-images.php',
-    root: 'images',
-    fields: [
-        'name', 'url',
-        {name:'size', type: 'float'},
-        {name:'lastmod', type:'date', dateFormat:'timestamp'}
-    ]
-});
-store.load();
-
-var listView = new Ext.list.ListView({
-    store: store,
-    multiSelect: true,
-    emptyText: 'No images to display',
-    reserveScrollOffset: true,
-    columns: [{
-        header: 'File',
-        width: .5,
-        dataIndex: 'name'
-    },{
-        header: 'Last Modified',
-        width: .35, 
-        dataIndex: 'lastmod',
-        tpl: '{lastmod:date("m-d h:i a")}'
-    },{
-        header: 'Size',
-        dataIndex: 'size',
-        tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
-        align: 'right'
-    }]
-});
-
-// put it in a Panel so it looks pretty
-var panel = new Ext.Panel({
-    id:'images-view',
-    width:425,
-    height:250,
-    collapsible:true,
-    layout:'fit',
-    title:'Simple ListView (0 items selected)',
-    items: listView
-});
-panel.render(document.body);
-
-// little bit of feedback
-listView.on('selectionchange', function(view, nodes){
-    var l = nodes.length;
-    var s = l != 1 ? 's' : '';
-    panel.setTitle('Simple ListView ('+l+' item'+s+' selected)');
-});
- *
- * @constructor - * @param {Object} config - * @xtype listview - */ -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: - 

-    .x-list-selected {background-color: yellow;}
-
- * @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: - 

-    .x-list-over {background-color: orange;}
-
- * @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 - * undefined). If an explicit value isn't specified, this will be automatically - * calculated. - */ - scrollOffset : undefined, - /** - * @cfg {Boolean/Object} columnResize - * 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: - * 

-{
-    align: 'right',
-    dataIndex: 'size',
-    header: 'Size',
-    tpl: '{size:fileSize}',
-    width: .35
-}
-     *
- * Acceptable properties for each column configuration object are: - *
- */ - /** - * @cfg {Boolean/Object} columnSort - * 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.list.ColumnResizer(this.colResizer); - this.colResizer.init(this); - } - if(this.columnSort){ - this.colSorter = new Ext.list.Sorter(this.columnSort); - this.colSorter.init(this); - } - if(!this.internalTpl){ - this.internalTpl = new Ext.XTemplate( - '
', - '', - '
', - '{header}', - '
', - '', - '
', - '
', - '
', - '
' - ); - } - if(!this.tpl){ - this.tpl = new Ext.XTemplate( - '', - '
', - '', - '
', - ' class="{cls}">', - '{[values.tpl.apply(parent)]}', - '
', - '', - '
', - '
', - '' - ); - }; - - 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.isColumn) { - c.xtype = c.xtype ? (/^lv/.test(c.xtype) ? c.xtype : 'lv' + c.xtype) : 'lvcolumn'; - c = Ext.create(c); - } - 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 < this.maxWidth){ - var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100; - for(var j = 0; j < len; j++){ - var c = cs[j]; - if(!c.width){ - c.width = perCol; - } - } - } - } - Ext.list.ListView.superclass.initComponent.call(this); - }, - - onRender : function(){ - this.autoEl = { - cls: 'x-list-wrap' - }; - Ext.list.ListView.superclass.onRender.apply(this, arguments); - - this.internalTpl.overwrite(this.el, {columns: this.columns}); - - this.innerBody = Ext.get(this.el.dom.childNodes[1].firstChild); - this.innerHd = Ext.get(this.el.dom.firstChild.firstChild); - - if(this.hideHeaders){ - this.el.dom.firstChild.style.display = 'none'; - } - }, - - getTemplateTarget : function(){ - 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:

- *
- * @param {Array} records An Array of {@link Ext.data.Record}s to be rendered into the DataView. - * @param {Number} startIndex the index number of the Record being prepared for rendering. - * @return {Object} A data object containing properties to be processed by a repeating - * XTemplate as described above. - */ - collectData : function(){ - var rs = Ext.list.ListView.superclass.collectData.apply(this, arguments); - return { - columns: this.columns, - rows: rs - } - }, - - verifyInternalSize : function(){ - if(this.lastSize){ - this.onResize(this.lastSize.width, this.lastSize.height); - } - }, - - // private - onResize : function(w, h){ - var bd = this.innerBody.dom; - var hd = this.innerHd.dom - if(!bd){ - return; - } - var bdp = bd.parentNode; - if(Ext.isNumber(w)){ - 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'; - }else{ - bd.style.width = w + 'px'; - hd.style.width = w + 'px'; - setTimeout(function(){ - if((bdp.offsetWidth - bdp.clientWidth) > 10){ - bd.style.width = sw + 'px'; - hd.style.width = sw + 'px'; - } - }, 10); - } - } - if(Ext.isNumber(h)){ - bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px'; - } - }, - - updateIndexes : function(){ - Ext.list.ListView.superclass.updateIndexes.apply(this, arguments); - this.verifyInternalSize(); - }, - - findHeaderIndex : function(hd){ - hd = hd.dom || hd; - var pn = hd.parentNode, cs = pn.parentNode.childNodes; - for(var i = 0, c; c = cs[i]; i++){ - if(c == pn){ - return i; - } - } - return -1; - }, - - 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*100) + '%'; - } - } -}); - -Ext.reg('listview', Ext.list.ListView); - -// Backwards compatibility alias +/** + * @class Ext.list.ListView + * @extends Ext.DataView + *

Ext.list.ListView is a fast and light-weight implentation of a + * {@link Ext.grid.GridPanel Grid} like view with the following characteristics:

+ *
+ *

Example usage:

+ * 

+// consume JSON of this form:
+{
+   "images":[
+      {
+         "name":"dance_fever.jpg",
+         "size":2067,
+         "lastmod":1236974993000,
+         "url":"images\/thumbs\/dance_fever.jpg"
+      },
+      {
+         "name":"zack_sink.jpg",
+         "size":2303,
+         "lastmod":1236974993000,
+         "url":"images\/thumbs\/zack_sink.jpg"
+      }
+   ]
+}
+var store = new Ext.data.JsonStore({
+    url: 'get-images.php',
+    root: 'images',
+    fields: [
+        'name', 'url',
+        {name:'size', type: 'float'},
+        {name:'lastmod', type:'date', dateFormat:'timestamp'}
+    ]
+});
+store.load();
+
+var listView = new Ext.list.ListView({
+    store: store,
+    multiSelect: true,
+    emptyText: 'No images to display',
+    reserveScrollOffset: true,
+    columns: [{
+        header: 'File',
+        width: .5,
+        dataIndex: 'name'
+    },{
+        header: 'Last Modified',
+        width: .35,
+        dataIndex: 'lastmod',
+        tpl: '{lastmod:date("m-d h:i a")}'
+    },{
+        header: 'Size',
+        dataIndex: 'size',
+        tpl: '{size:fileSize}', // format using Ext.util.Format.fileSize()
+        align: 'right'
+    }]
+});
+
+// put it in a Panel so it looks pretty
+var panel = new Ext.Panel({
+    id:'images-view',
+    width:425,
+    height:250,
+    collapsible:true,
+    layout:'fit',
+    title:'Simple ListView (0 items selected)',
+    items: listView
+});
+panel.render(document.body);
+
+// little bit of feedback
+listView.on('selectionchange', function(view, nodes){
+    var l = nodes.length;
+    var s = l != 1 ? 's' : '';
+    panel.setTitle('Simple ListView ('+l+' item'+s+' selected)');
+});
+ *
+ * @constructor + * @param {Object} config + * @xtype listview + */ +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: + 

+    .x-list-selected {background-color: yellow;}
+
+ * @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: + 

+    .x-list-over {background-color: orange;}
+
+ * @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 + * undefined). If an explicit value isn't specified, this will be automatically + * calculated. + */ + scrollOffset : undefined, + /** + * @cfg {Boolean/Object} columnResize + * 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: + * 

+{
+    align: 'right',
+    dataIndex: 'size',
+    header: 'Size',
+    tpl: '{size:fileSize}',
+    width: .35
+}
+     *
+ * Acceptable properties for each column configuration object are: + *
+ */ + /** + * @cfg {Boolean/Object} columnSort + * 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.list.ColumnResizer(this.colResizer); + this.colResizer.init(this); + } + if(this.columnSort){ + this.colSorter = new Ext.list.Sorter(this.columnSort); + this.colSorter.init(this); + } + if(!this.internalTpl){ + this.internalTpl = new Ext.XTemplate( + '
', + '', + '
', + '{header}', + '
', + '', + '
', + '
', + '
', + '
' + ); + } + if(!this.tpl){ + this.tpl = new Ext.XTemplate( + '', + '
', + '', + '
', + ' class="{cls}">', + '{[values.tpl.apply(parent)]}', + '
', + '', + '
', + '
', + '' + ); + }; + + 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.isColumn) { + c.xtype = c.xtype ? (/^lv/.test(c.xtype) ? c.xtype : 'lv' + c.xtype) : 'lvcolumn'; + c = Ext.create(c); + } + 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 < this.maxWidth){ + var perCol = ((this.maxWidth-allocatedWidth) / remaining)/100; + for(var j = 0; j < len; j++){ + var c = cs[j]; + if(!c.width){ + c.width = perCol; + } + } + } + } + Ext.list.ListView.superclass.initComponent.call(this); + }, + + onRender : function(){ + this.autoEl = { + cls: 'x-list-wrap' + }; + Ext.list.ListView.superclass.onRender.apply(this, arguments); + + this.internalTpl.overwrite(this.el, {columns: this.columns}); + + this.innerBody = Ext.get(this.el.dom.childNodes[1].firstChild); + this.innerHd = Ext.get(this.el.dom.firstChild.firstChild); + + if(this.hideHeaders){ + this.el.dom.firstChild.style.display = 'none'; + } + }, + + getTemplateTarget : function(){ + 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:

+ *
+ * @param {Array} records An Array of {@link Ext.data.Record}s to be rendered into the DataView. + * @param {Number} startIndex the index number of the Record being prepared for rendering. + * @return {Object} A data object containing properties to be processed by a repeating + * XTemplate as described above. + */ + collectData : function(){ + var rs = Ext.list.ListView.superclass.collectData.apply(this, arguments); + return { + columns: this.columns, + rows: rs + } + }, + + verifyInternalSize : function(){ + if(this.lastSize){ + this.onResize(this.lastSize.width, this.lastSize.height); + } + }, + + // private + onResize : function(w, h){ + var bd = this.innerBody.dom; + var hd = this.innerHd.dom; + if(!bd){ + return; + } + var bdp = bd.parentNode; + if(Ext.isNumber(w)){ + 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'; + }else{ + bd.style.width = w + 'px'; + hd.style.width = w + 'px'; + setTimeout(function(){ + if((bdp.offsetWidth - bdp.clientWidth) > 10){ + bd.style.width = sw + 'px'; + hd.style.width = sw + 'px'; + } + }, 10); + } + } + if(Ext.isNumber(h)){ + bdp.style.height = (h - hd.parentNode.offsetHeight) + 'px'; + } + }, + + updateIndexes : function(){ + Ext.list.ListView.superclass.updateIndexes.apply(this, arguments); + this.verifyInternalSize(); + }, + + findHeaderIndex : function(hd){ + hd = hd.dom || hd; + var pn = hd.parentNode, cs = pn.parentNode.childNodes; + for(var i = 0, c; c = cs[i]; i++){ + if(c == pn){ + return i; + } + } + return -1; + }, + + 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*100) + '%'; + } + } +}); + +Ext.reg('listview', Ext.list.ListView); + +// Backwards compatibility alias Ext.ListView = Ext.list.ListView; \ No newline at end of file