X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/docs/output/Ext.ListView.html diff --git a/docs/output/Ext.ListView.html b/docs/output/Ext.ListView.html new file mode 100644 index 00000000..bc48f956 --- /dev/null +++ b/docs/output/Ext.ListView.html @@ -0,0 +1,1066 @@ +
Properties Methods Events Config Options Direct Link 
Observable
  Component
    BoxComponent
      DataView
        ListView

Class Ext.ListView

Package:Ext
Defined In:ListView.js
Class:ListView
Extends:DataView
xtype:listview

Ext.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.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
 deferEmptyText : Boolean
True to defer emptyText being applied until the store's first load
DataView
 disabled : Boolean
Render this component disabled (default is false).
Component
 disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
 emptyText : String
The text to display in the view when there is no data to display (defaults to '').
DataView
 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 +the header row will be shown).
ListView
 internalTpl : String/Array
The template to be used for the header row. See tpl for more details.
ListView
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 scrollOffset : Number
The amount of space to reserve for the scrollbar (defaults to +19 pixels)
ListView
 store : Ext.data.Store
The Ext.data.Store to bind this DataView to.
DataView
 trackOver : Boolean
True to enable mouseenter and mouseleave events
DataView
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 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
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

MethodDefined By

Public Events

EventDefined By
\ No newline at end of file