PropertiesMethodsEventsConfig OptionsDirect Link

Class Ext.DataView

Defined In: DataView.js
Class: Ext.DataView
Extends: Ext.BoxComponent
能够为自己设计模板和特定格式而提供的一种数据显示机制。 DataView采用Ext.XTemplate为其模板处理的机制,并依靠Ext.data.Store来绑定数据,这样的话store中数据发生变化时便会自动更新前台。DataView亦提供许多针对对象项(item)的内建事件,如单击、双击、mouseover、mouseout等等,还包括一个内建的选区模型(selection model)。要实现以上这些功能,必须要为DataView对象设置一个itemSelector协同工作。

下面给出的例子是已将DataView绑定到一个Ext.data.Store对象并在一个上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);

配置项

配置项 定义者

公告属性

属性 定义者

公共方法

方法 定义者

公告事件

事件 定义者