Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      DataView

Class Ext.DataView

Package:Ext
Defined In:DataView.js
Class:DataView
Extends:BoxComponent
A mechanism for displaying data using custom layout templates and formatting. A DataView is bound to an Ext.data.Store so that as the data in the store changes the view is automatically updated to reflect the changes. The view also provides built-in behavior for many common events that can occur for its contained items including click, doubleclick, mouseover, mouseout, etc. as well as a built-in selection model. In order to use these features, an itemSelector config must be provided for the DataView to determine what nodes it will be working with.

The example below binds a DataView to a Ext.data.Store and renders it into an Ext.Panel.

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 tpl = new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="thumb-wrap" id="{name}">',
        '<div class="thumb"><img src="{url}" title="{name}"></div>',
        '<span class="x-editable">{shortName}</span></div>',
    '</tpl>',
    '<div class="x-clear"></div>'
);

var panel = new Ext.Panel({
    id:'images-view',
    frame:true,
    width:535,
    autoHeight:true,
    collapsible:true,
    layout:'fit',
    title:'Simple DataView',

    items: new Ext.DataView({
        store: store,
        tpl: tpl,
        autoHeight:true,
        multiSelect: true,
        overClass:'x-view-over',
        itemSelector:'div.thumb-wrap',
        emptyText: 'No images to display'
    })
});
panel.render(document.body);

Config Options

Config Options Defined By
  allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
  autoHeight : Boolean
True to use height:'auto', false to use fixed height (defaults to false).
BoxComponent
  autoWidth : Boolean
True to use width:'auto', false to use fixed width (defaults to false).
BoxComponent
  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
  height : Number
The height of this component in pixels (defaults to auto).
BoxComponent
  id : String
The unique id of this component (defaults to an auto-assigned id).
Component
  overClass : String
A CSS class to apply to each item in the view on mouseover (defaults to undefined).
DataView
  selectedClass : String
A CSS class to apply to each selected item in the view (defaults to 'x-view-selected').
DataView
  stateId : String
The unique id for this component to use for state management purposes (defaults to the component id).
Component
  store : Ext.data.Store
The Ext.data.Store to bind this DataView to.
DataView
  width : Number
The width of this component in pixels (defaults to auto).
BoxComponent

Public Properties

Property Defined By
  disabled : Boolean
True if this component is disabled. Read-only.
Component
  hidden : Boolean
True if this component is hidden. Read-only.
Component
  rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By

Public Events

Event Defined By