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-----------------------------------------