Ext.XTemplate加载拥有头像的用户

Ext.XTemplate加载拥有头像的用户

1、老规矩先看一下效果图：

2、extjs4+css实现代码：

/*
*title：Ext.XTemplate加载拥有头像的用户
*author： msj
*date：2016-09-19
*description：借鉴了一个大神的css和图片和思路（他用jquery实现、我用extjs4 XTemplate）
*update：
*aphorism：活（工作）就是你的影子（Jobs is your shadow）
*/
var data = [
      ["貂蝉", "../Images/UserCard01.png", '11ssww', '信息化部', "active"],
      ["关云长", "../Images/UserCard02.png", '22ssqq', '信息化部', "active"],
      ["赵子龙", "../Images/UserCard02.png", '33wwqq', '信息化部', ""],
      ["西施", "../Images/UserCard01.png", '4ddda', '信息化部', "active"],

      ["貂蝉", "../Images/UserCard01.png", '1wssww', '信息化部', "active"],
      ["诸葛亮", "../Images/UserCard02.png", '2wssqq', '信息化部', "active"],
      ["赵子龙", "../Images/UserCard02.png", '3wwwqq', '信息化部', ""],
      ["马超", "../Images/UserCard01.png", '4adda', '信息化部', "active"],

      ["大乔", "../Images/UserCard01.png", 'w1ssww', '信息化部', "active"],
      ["司马懿", "../Images/UserCard02.png", 'w2ssqq', '信息化部', "active"],
      ["赵子龙", "../Images/UserCard02.png", 'q3wwqq', '信息化部', ""],
      ["周瑜", "../Images/UserCard02.png", 'wddda', '信息化部', "active"],

      ["小乔", "../Images/UserCard01.png", '11ssw1', '信息化部', ""],
      ["关云长", "../Images/UserCard02.png", '22ssq1', '信息化部', "active"],
      ["赵子龙", "../Images/UserCard02.png", '33wwq1', '信息化部', ""],
      ["黄盖", "../Images/UserCard02.png", '4ddd1', '信息化部', "active"]
];
Ext.define('model_icon', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'name', type: 'string' },
        { name: 'pic', type: 'string' },
        { name: 'id', type: 'string' },
        { name: 'dep', type: 'string' },
        { name: 'checked', type: 'string' }
    ]
});
var store_icon = Ext.create('Ext.data.Store', {
    model: 'model_icon',
    sortInfo: {
        field: 'name',
        direction: 'ASC'
    },
    data: data
});
var dataview = Ext.create('Ext.view.View', {
    deferInitialRefresh: false,
    store: store_icon,
    tpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
            '<div class="card-box {id} {checked}">',
                '<div class="card-box-img">',
                    '<img src="{pic}" />',
                '</div>',
                '<div id={id} class="card-box-content">',
                    '<p>账户：{id}</p>',
                    '<p>姓名：{name}</p>',
                    '<p>部门：{dep}</p>',
                '</div><i></i>',
           '</div>',
        '</tpl>'
    ),
    listeners: {
        itemclick: function (view, record, items, index, e) {
            //切换“active”样式
            Ext.select("." + record.raw[2]).toggleCls("active");
        }
    },
    itemSelector: 'div.card-box',//需要加上选择器
    multiSelect: false,
    autoScroll: true
});
var panel = Ext.create('Ext.Panel', {
    layout: 'border',
    id: 'jDataView',
    closable: true,
    title: 'DataView',
    bodyStyle: {
        background:'#fff'
    },
    items: dataview,
    tbar: [
        {
            style: 'margin-top:6px',
            xtype: 'textfield',
            name: 'employeeName',
            width: 150,
            emptyText: '输入查询关键字',
            enableKeyEvents: true,
            listeners: {
                specialkey: function (field, e) {
                    if (e.getKey() == Ext.EventObject.ENTER) {
                    }
                }
            }
        },
        {
            iconCls: "icon-search",
            text: "搜索",
            handler: function () {
                var sArray = [];
                Ext.select('div.card-box.active').each(function () {//遍历选中（拥有active 样式）的div
                    sArray.push(this.query('.card-box-content')[0].id);
                });
                Ext.example.msg('系统提示', "您选中了<strong>" + sArray.length + '</strong>个人物');
            }
        }
    ]
});
tabPanel.add(panel).show();

3、css样式表：

.card-box{
    width: 195px;
    height: 60px;
    float: left;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 3px;
    margin-left: 10px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
    cursor: pointer;
    font-family:微软雅黑,宋体,Arial,Helvetica,Verdana,sans-serif;
    color:#000000;
    font-size:12px;
}
.card-box.active{
    border: 2px solid #ff5d5b;
    padding:0 0px;
    background: url(../Images/duihao_03.png) right top no-repeat;
}
.card-box-img{
    float: left;
    width: 60px;
    height: 60px;
    line-height: 58px;
    margin:0px;
    padding:0px;
    background-color: #EBEBEB;
    border-right: 1px solid #ccc;
}
.card-box-img img{
    margin-left: 9px;
    margin-top:5px;
    border-radius: 45px;
    vertical-align:middle;
    padding:0px;
}
.card-box-content{
    float: left;
    padding-left: 6px;
    padding-top: 4px;
}
.card-box-content p{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 120px;
    padding:0px;
    margin:0px;
}

4、需要用到的三个图片（图片是借鉴过来的）

本人水平有限，请大神门多指教

-----------------------------------------The End-----------------------------------------