ExtJS - UI组件 - DataView

转载请注明出处:https://www.cnblogs.com/cqpanda/p/17019670.html
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html

更新记录
2023年1月2日 从笔记迁移到博客。

说明

实例

实例：基本使用1

Ext.create('Ext.view.View', {
    //定义数据来源
    store: bugStore,
    //定义显示模板
    tpl: '<tpl for=".">' +
    '<div class="bug-wrapper">' +
        '<span class=－title－>{title}</span>' +
        '<span class="severity severity-{severity}">{severity}</span>' +
        '<span class="description">{description}</span>' +
        '<span class="status {[values.status.toLowerCase().replace(" ", "-")]}">{status}</span>' +
    '</div>' +
    '</tpl>',
    //无数据时显示文本
    emptyText: 'Woo hoo! No Bugs Found!',
    deferEmptyText: false
});

实例：基本使用2

//Step 1
var myTpl = [
    '<tplfor=".">',
    '<p class="user">{firstName} {lastName}</p>',
    '</tpl>'
].join('');

//Step 2
var myDataview = Ext.create('Ext.view.View', {
    store: myStore, 
    //step 3
    tpl: myTpl,
    //step 4
    padding:6,
    emptyText: '<b>No users available</b>'
});

Ext.onReady(function(){  
    Ext.tip.QuickTipManager.init();   
    var myStore = Ext.create('Myapp.store.users');  
    var mytpl = [    
        '<tplfor=".">',    
        '<p class="user">{firstName} {lastName}</p>',    
        '</tpl>'  
    ].join('');  

    var myDataview = Ext.create('Ext.view.View', {    
        store: myStore,    
        tpl: myTpl,    
        padding: 6,    
        itemSelector: 'p.user',    
        emptyText: '<b>No users available</b>'  
    });  
});

实例：清除筛选器

dataview.getStore().clearFilter();

实例：进行排序

dataview.getStore().sort('severity', 'DESC');

实例：设置过滤器

dataview.getStore().filter('severity', combo.getValue());

实例：设置点击事件

itemSelector property
It defines which DOM node item will be used to select each item

var myDataview = Ext.create('Ext.view.View', {
    store: myStore,
    tpl: myTpl,
    padding: 6,
    itemSelector: 'p.user',
    emptyText: '<b>No users available</b>',
    listeners: {
        itemclick: {
            fn:function( view, record, item, index, evt, eOpts ){
                Ext.Msg.alert("Dataview record selected", record.get('firstName') + " " + record.get('lastName') + " has been selected");
        }
    }
};