-<div xmlns:ext="http://www.extjs.com" class="body-wrap"><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a> <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a> <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a> <img src="resources/elbow-end.gif"><a href="output/Ext.DataView.html" ext:member="" ext:cls="Ext.DataView">DataView</a> <img src="resources/elbow-end.gif">ListView</pre></div><h1>Class <a href="source/ListView.html#cls-Ext.list.ListView">Ext.list.ListView</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.list</td></tr><tr><td class="label">Defined In:</td><td class="hd-info">ListView.js</td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/ListView.html#cls-Ext.list.ListView">ListView</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.DataView.html" ext:cls="Ext.DataView" ext:member="">DataView</a></td></tr></table><div class="description"><p>Ext.list.ListView is a fast and light-weight implentation of a\r
-<a href="output/Ext.grid.GridPanel.html" ext:cls="Ext.grid.GridPanel">Grid</a> like view with the following characteristics:</p>\r
-<div class="mdetail-params"><ul>\r
-<li>resizable columns</li>\r
-<li>selectable</li>\r
-<li>column widths are initially proportioned by percentage based on the container\r
-width and number of columns</li>\r
-<li>uses templates to render the data in any required format</li>\r
-<li>no horizontal scrolling</li>\r
-<li>no editing</li>\r
-</ul></div>\r
-<p>Example usage:</p>\r
-<pre><code><i>// consume JSON of this form:\r</i>
-{\r
- <em>"images"</em>:[\r
- {\r
- <em>"name"</em>:<em>"dance_fever.jpg"</em>,\r
- <em>"size"</em>:2067,\r
- <em>"lastmod"</em>:1236974993000,\r
- <em>"url"</em>:<em>"images\/thumbs\/dance_fever.jpg"</em>\r
- },\r
- {\r
- <em>"name"</em>:<em>"zack_sink.jpg"</em>,\r
- <em>"size"</em>:2303,\r
- <em>"lastmod"</em>:1236974993000,\r
- <em>"url"</em>:<em>"images\/thumbs\/zack_sink.jpg"</em>\r
- }\r
- ]\r
-} \r
-<b>var</b> store = <b>new</b> Ext.data.JsonStore({\r
- url: <em>'get-images.php'</em>,\r
- root: <em>'images'</em>,\r
- fields: [\r
- <em>'name'</em>, <em>'url'</em>,\r
- {name:<em>'size'</em>, type: <em>'float'</em>},\r
- {name:<em>'lastmod'</em>, type:<em>'date'</em>, dateFormat:<em>'timestamp'</em>}\r
- ]\r
-});\r
-store.load();\r
-\r
-<b>var</b> listView = <b>new</b> Ext.list.ListView({\r
- store: store,\r
- multiSelect: true,\r
- emptyText: <em>'No images to display'</em>,\r
- reserveScrollOffset: true,\r
- columns: [{\r
- header: <em>'File'</em>,\r
- width: .5,\r
- dataIndex: <em>'name'</em>\r
- },{\r
- header: <em>'Last Modified'</em>,\r
- width: .35, \r
- dataIndex: <em>'lastmod'</em>,\r
- tpl: <em>'{lastmod:date(<em>"m-d h:i a"</em>)}'</em>\r
- },{\r
- header: <em>'Size'</em>,\r
- dataIndex: <em>'size'</em>,\r
- tpl: <em>'{size:fileSize}'</em>, <i>// format using Ext.util.Format.fileSize()\r</i>
- align: <em>'right'</em>\r
- }]\r
-});\r
-\r
-<i>// put it <b>in</b> a Panel so it looks pretty\r</i>
-<b>var</b> panel = <b>new</b> Ext.Panel({\r
- id:<em>'images-view'</em>,\r
- width:425,\r
- height:250,\r
- collapsible:true,\r
- layout:<em>'fit'</em>,\r
- title:<em>'Simple ListView <i>(0 items selected)</i>'</em>,\r
- items: listView\r
-});\r
-panel.render(document.body);\r
-\r
-<i>// little bit of feedback\r</i>
-listView.on(<em>'selectionchange'</em>, <b>function</b>(view, nodes){\r
- <b>var</b> l = nodes.length;\r
- <b>var</b> s = l != 1 ? <em>'s'</em> : <em>''</em>;\r
- panel.setTitle(<em>'Simple ListView <i>('</em>+l+<em>' item'</em>+s+<em>' selected)</i>'</em>);\r
+<div class="body-wrap" xmlns:ext="http://www.extjs.com"><div class="top-tools"><a class="inner-link" href="#Ext.list.ListView-props"><img src="resources/images/default/s.gif" class="item-icon icon-prop">Properties</a> <a class="inner-link" href="#Ext.list.ListView-methods"><img src="resources/images/default/s.gif" class="item-icon icon-method">Methods</a> <a class="inner-link" href="#Ext.list.ListView-events"><img src="resources/images/default/s.gif" class="item-icon icon-event">Events</a> <a class="inner-link" href="#Ext.list.ListView-configs"><img src="resources/images/default/s.gif" class="item-icon icon-config">Config Options</a> <a class="bookmark" href="../docs/?class=Ext.list.ListView"><img src="resources/images/default/s.gif" class="item-icon icon-fav">Direct Link</a> </div><div class="inheritance res-block"><pre class="res-block-inner"><a href="output/Ext.util.Observable.html" ext:member="" ext:cls="Ext.util.Observable">Observable</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.Component.html" ext:member="" ext:cls="Ext.Component">Component</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.BoxComponent.html" ext:member="" ext:cls="Ext.BoxComponent">BoxComponent</a>
+ <img src="resources/elbow-end.gif"><a href="output/Ext.DataView.html" ext:member="" ext:cls="Ext.DataView">DataView</a>
+ <img src="resources/elbow-end.gif">ListView</pre></div><h1>Class <a href="source/ListView.html#cls-Ext.list.ListView">Ext.list.ListView</a></h1><table cellspacing="0"><tr><td class="label">Package:</td><td class="hd-info">Ext.list</td></tr><tr><td class="label">Defined In:</td><td class="hd-info"><a href="source/ListView.html#cls-Ext.list.ListView">ListView.js</a></td></tr><tr><td class="label">Class:</td><td class="hd-info"><a href="source/ListView.html#cls-Ext.list.ListView">ListView</a></td></tr><tr><td class="label">Extends:</td><td class="hd-info"><a href="output/Ext.DataView.html" ext:cls="Ext.DataView" ext:member="">DataView</a></td></tr></table><div class="description"><p>Ext.list.ListView is a fast and light-weight implentation of a
+<a href="output/Ext.grid.GridPanel.html" ext:cls="Ext.grid.GridPanel">Grid</a> like view with the following characteristics:</p>
+<div class="mdetail-params"><ul>
+<li>resizable columns</li>
+<li>selectable</li>
+<li>column widths are initially proportioned by percentage based on the container
+width and number of columns</li>
+<li>uses templates to render the data in any required format</li>
+<li>no horizontal scrolling</li>
+<li>no editing</li>
+</ul></div>
+<p>Example usage:</p>
+<pre><code><i>// consume JSON of this form:</i>
+{
+ <em>"images"</em>:[
+ {
+ <em>"name"</em>:<em>"dance_fever.jpg"</em>,
+ <em>"size"</em>:2067,
+ <em>"lastmod"</em>:1236974993000,
+ <em>"url"</em>:<em>"images\/thumbs\/dance_fever.jpg"</em>
+ },
+ {
+ <em>"name"</em>:<em>"zack_sink.jpg"</em>,
+ <em>"size"</em>:2303,
+ <em>"lastmod"</em>:1236974993000,
+ <em>"url"</em>:<em>"images\/thumbs\/zack_sink.jpg"</em>
+ }
+ ]
+}
+<b>var</b> store = <b>new</b> Ext.data.JsonStore({
+ url: <em>'get-images.php'</em>,
+ root: <em>'images'</em>,
+ fields: [
+ <em>'name'</em>, <em>'url'</em>,
+ {name:<em>'size'</em>, type: <em>'float'</em>},
+ {name:<em>'lastmod'</em>, type:<em>'date'</em>, dateFormat:<em>'timestamp'</em>}
+ ]
+});
+store.load();
+
+<b>var</b> listView = <b>new</b> Ext.list.ListView({
+ store: store,
+ multiSelect: true,
+ emptyText: <em>'No images to display'</em>,
+ reserveScrollOffset: true,
+ columns: [{
+ header: <em>'File'</em>,
+ width: .5,
+ dataIndex: <em>'name'</em>
+ },{
+ header: <em>'Last Modified'</em>,
+ width: .35,
+ dataIndex: <em>'lastmod'</em>,
+ tpl: <em>'{lastmod:date(<em>"m-d h:i a"</em>)}'</em>
+ },{
+ header: <em>'Size'</em>,
+ dataIndex: <em>'size'</em>,
+ tpl: <em>'{size:fileSize}'</em>, <i>// format using Ext.util.Format.fileSize()</i>
+ align: <em>'right'</em>
+ }]
+});
+
+<i>// put it <b>in</b> a Panel so it looks pretty</i>
+<b>var</b> panel = <b>new</b> Ext.Panel({
+ id:<em>'images-view'</em>,
+ width:425,
+ height:250,
+ collapsible:true,
+ layout:<em>'fit'</em>,
+ title:<em>'Simple ListView <i>(0 items selected)</i>'</em>,
+ items: listView
+});
+panel.render(document.body);
+
+<i>// little bit of feedback</i>
+listView.on(<em>'selectionchange'</em>, <b>function</b>(view, nodes){
+ <b>var</b> l = nodes.length;
+ <b>var</b> s = l != 1 ? <em>'s'</em> : <em>''</em>;
+ panel.setTitle(<em>'Simple ListView <i>('</em>+l+<em>' item'</em>+s+<em>' selected)</i>'</em>);