X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..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 ea6fbbd2..12ddb87c 100644 --- a/docs/output/Ext.list.ListView.html +++ b/docs/output/Ext.list.ListView.html @@ -1,90 +1,94 @@ -
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