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. DataView uses an Ext.XTemplate as its internal templating mechanisma, and 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
  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

Method Defined By

Public Events

Event Defined By