X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..6b044c28b5f26fb99c86c237ffad19741c0f7f3d:/docs/output/Ext.list.ListView.html?ds=sidebyside diff --git a/docs/output/Ext.list.ListView.html b/docs/output/Ext.list.ListView.html index 14a47520..12ddb87c 100644 --- a/docs/output/Ext.list.ListView.html +++ b/docs/output/Ext.list.ListView.html @@ -1,82 +1,86 @@ -
Observable
  Component
    BoxComponent
      DataView
        ListView

Class Ext.list.ListView

Package:Ext.list
Defined In:ListView.js
Class:ListView
Extends:DataView

Ext.list.ListView is a fast and light-weight implentation of a -Grid like view with the following characteristics:

-
    -
  • resizable columns
    • -
  • selectable
    • -
  • column widths are initially proportioned by percentage based on the container -width and number of columns
    • -
  • uses templates to render the data in any required format
    • -
  • no horizontal scrolling
    • -
  • no editing
    • -
-

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)');
+
Properties
Methods
Events
Config Options
Direct Link
Observable
+  Component
+    BoxComponent
+      DataView
+        ListView
Class Ext.list.ListView
Package:Ext.list
Defined In:ListView.js
Class:ListView
Extends:DataView
Ext.list.ListView is a fast and light-weight implentation of a
+Grid like view with the following characteristics:

+
    
+
  • resizable columns
    • 
+
  • selectable
    • 
+
  • column widths are initially proportioned by percentage based on the container
+width and number of columns
    • 
+
  • uses templates to render the data in any required format
    • 
+
  • no horizontal scrolling
    • 
+
  • no editing
    • 
+

+
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)');
 });
Config Options
Config OptionsDefined By
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 hidden : Boolean
Render this component hidden (default is false). If true, the
-hide method will be called internally.
Component
 hideHeaders : Boolean
true to hide the header row (defaults to false so
+hide method will be called internally.
Component
 hideHeaders : Boolean
true to hide the header row (defaults to false so
 the header row will be shown).
ListView
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
Public Properties
PropertyDefined By
 disableHeaders : Boolean
Set this property to true to disable the header click handler disabling sort
+take advantage of lazy instantiation and rendering.
Component
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent
Public Properties
PropertyDefined By
 disableHeaders : Boolean
Set this property to true to disable the header click handler disabling sort
 (defaults to false).
ListView
 disabled : Boolean
True if this component is disabled. Read-only.
Component