类似气泡的样式demo

实现如上样式的代码。以下只是一个demo

js的代码：

Ext.define('XDS.view.main.Main', {
    extend: 'Ext.DataView',
    xtype: 'app-main',

    requires: [
        'Ext.MessageBox',


        'XDS.view.main.MainController',
        'XDS.view.main.MainModel',
        'XDS.view.main.List'
    ],


    controller: 'main',
    viewModel: 'main',

//样式
   cls:'userProfile',
   store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Peter',  age: 26},
            {name: 'Ray',   age: 21},
            {name: 'Egon', age: 24},
            {name: 'Winston', age: 24}
        ]
    },
//需要解决最后一项时，不再有line-wrap下面的before.判断是不是dataview的最后一项，若是就隐藏！
itemTpl:Ext.create('Ext.XTemplate',
'<div class="timeline-item x-item-select" role="option" tabindex="-1" data-recordindex="1" data-recordid="104" data-boundview="profiletimeline-1134" aria-selected="true">',
'<div class="profile-pic-wrap">',
'<img src="http://img3.duitang.com/uploads/item/201402/19/20140219214112_VHNVS.jpeg" width="60" height="60">',
'<div>2 小时</div>',
'</div>',
'<div class="line-wrap">',
'<div class="contents-wrap">',
'<div class="job-meeting">',
'<a href="#">Job Meeting</a>',
'</div>',
'<div>"hahhahahahahahahhahahah"</div>',
'</div>',
'</div>',
'</div>'
)

});

scss样式代码，可根据自己的需要进行修改：

.userProfile {


.timeline-item .contents-wrap .job-meeting a {
color: #35baf6;
text-decoration: none;
font-weight: bold;
margin-bottom: 10px;
display: block;
}

.timeline-item .line-wrap:before {
content: "";
position: absolute;
width: 50px;
height: 100%;
border-right: solid 2px #35baf6;
left: 0;
top: 70px;
}

.timeline-item .profile-pic-wrap img {
height: 46px;
width: 46px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
}

.timeline-item .profile-pic-wrap {
   width: 100px;
float: left;
font-size: 10px;
text-align: center;
position: relative;
/* background: #fff; */
padding: 5px 0;
}
.timeline-item .contents-wrap {
margin: 0 0px 15px 110px;
border: 1px solid #ddd;
position: relative;
padding: 15px;
white-space: normal;
}
.timeline-item .contents-wrap:before {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #ddd;
margin: 15px 0 0 -9px;
}
.timeline-item .contents-wrap:after {
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid #fff;
margin: 15px 0 0 -8px;
}
.timeline-item .contents-wrap:before, .timeline-item .contents-wrap:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
left: 0;
top: 0;
}
/*控制左边竖线的位置*/
.timeline-item .line-wrap {
position: relative;
}
}