ExtJs 中实现类似淘宝机器人效果

近日刚好有需求说要做一个类似淘宝机器人的问题库系统，由于我们的系统是用ExtJs做的，大家都知道ExtJs是一个前端开发框架

它给我们提供了很多组件可用，于是我就查看了下API，最后结合一些HTML和CSS的知识，算是完成了需求。效果图如下：



总的思路是：

在一个Window里面，放入了一个Pancel，和一个Form

Panel用于显示对话信息，Form用户向后台提交数据，

点击发送按钮时提交一个Ajax请求，请求返回后将数据通过拼接Html的方式展示在Panel里面。

代码如下：

Js：

Ext.require(['Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.state.*',
'Ext.form.*']);

// 创建一个命名空间，所有方法和变量都应该在命名空间内，可以避免变量和方法名重复
Ext.ns('Crms.allKnow');

Ext.QuickTips.init();

Crms.allKnow.getFastSearchGrid = function() {
//拼接HTML头
var content_head ='<span class="s1"></span>' +
'<span class="s2"></span>' +
'<span class="s3"></span>' +
'<span class="s4"></span>' +
'<div class="content">';

//拼接HTML尾
var content_tail = '<span class="s5"></span>' +
'<span class="s6"></span>' +
'<span class="s7"></span>' +
'<span class="s8"></span></div></div>';

var content_id = 0;	//div id

var updatePanelsBody = function(content_id,questionName,answer){

var content = [];
var content_middle;

if(answer){
content.push('<div class="circleBox">' +
'<div class="containerBox boxStyle_answer" id="content'+content_id+'"> ');
}else{
content.push('<div class="circleBox">' +
'<div class="containerBox boxStyle_question" id="content'+content_id+'"> ');
}

content.push(content_head);

if(answer){
content_middle = '<h4>'+questionName+'</h4>' +
'<p>'+answer+'</p>';
}else{
content_middle = '<h4>'+questionName+'</h4>';
}

content.push(content_middle);
content.push('</div>');

content.push(content_tail);

Ext.getCmp("history_panel").body.insertHtml('beforeEnd', content.join(''));
Ext.getCmp("history_panel").body.scroll('b', 10000, {
duration: 0.1
});

if(answer){
$("#content"+content_id).css('marginLeft','1%');
}else{
$("#content"+content_id).css('marginRight','1%');
}

//content_id ++; //自增
Ext.getCmp('questionFastSearchSendMsgForm').getForm().reset();

}

// 数据源
var questionFastSearchDs = new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({
url : 'AllKnowAction_queryQuestionInPoolPage.action',
actionMethods : {
read : 'POST'
},
reader : {
type : 'json',// Ext.data.reader.Json解析器
root : 'pageVo.lists',// 直接从pageVo中获取
totalProperty : 'pageVo.count'
}
}),
pageSize :  10,
fields : [{
type : 'int',
name : 'id'
}, {
type : 'String',
name : 'question'
}]
});

var questionFastSearchWin = Ext.create('Ext.window.Window', {
title : "众知道",
width : 800,
modal : true,
//resizable : false,
maximizable:true,
//minimizable : true,
constrain:true,  // 控制整改拖动不能超过浏览器边界
height : 500,
closeAction : 'destroy',
layout:'border',
id : 'questionFastSearchWindowId',
/*listeners: {
minimize: function (win, opts) {
questionFastSearchWin.collapse();
}
},*/
items : [
Ext.create('Ext.panel.Panel', {
bodyPadding : 5,
html : '<div class="circleBox"><div class="containerBox boxStyle_answer" style="margin-left: 1%;">' +
content_head+
'<h4>你好</h4>' +
'<p>欢迎使用众知道，请输入您的问题，点击发送获取我们帮助！</p> ' +
'</div>' +content_tail,
region:'center',
autoScroll: true,
id : 'history_panel'
}),
Ext.create('Ext.form.Panel', {
bodyPadding : 5,
id : 'questionFastSearchSendMsgForm',
region:'south',
items : [{
xtype : 'combo',
margin : "5 30 0 50",
id : 'questionTitle',
width : 550,
hideTrigger : true,
store : questionFastSearchDs,
displayField : 'question',
valueField : 'id',
emptyText : '请输入关键字查找问题',
allowBlank : false,
forceSelection : true,
queryMode : 'remote',
typeAhead : true,
pageSize :  10,
triggerAction : 'all',
name : 'allKnowVo.question',
listeners : {
change : function(field,newValue,oldValue,eOpts){
if($.trim(newValue)){
//将输入数据加入到数据源的参数中搜索
questionFastSearchDs.proxy.extraParams['allKnowVo.question'] = field.getRawValue();
questionFastSearchDs.load();
//展开下拉框
field.expand();
}
}
}
},{
xtype: 'button',
text: '发送',
id : 'questionSeedBtn',
cls: 'crmButtonCls',
width : 120,
height : 45,
margin : "10 0 5 20",
handler: function() {
var form = this.up('form').getForm();
if (!form.isValid()) {
return;
}

var questionName = Ext.getCmp('questionTitle').getRawValue();
var questionId = Ext.getCmp('questionTitle').getValue();

updatePanelsBody(content_id,questionName);
content_id ++;

var params = {};
params['allKnowVo.id'] = questionId;

Ext.Ajax.request({
url : 'AllKnowAction_queryQuestionsAnswer.action',
disableCaching : true,// 禁止缓存
timeout : 30000,// 最大等待时间,超出则会触发超时
method : "POST",
params : params,
success : function(response, opts) {
var ret = Ext.JSON.decode(response.responseText); // JSON对象化
var answerList = ret.answerList;
if(answerList.length>1){
var answer = '';
for(var i=0;i<answerList.length;i++){
if(answerList[i].isbest==1){
//最优解
answer += '答案'+(i+1)+':  '+answerList[i].answer+'<b><font size="2" color="red">   <--最优解</font></b></br></br>';
}else{
answer += '答案'+(i+1)+':  '+answerList[i].answer+'</br></br>';
}
//如果有图片
if(answerList[i].picturepath){
var absPath = answerList[i].picturepath;
var relativePath = absPath.substring(absPath.indexOf('CRM')-1,absPath.length)

answer += '<a href="'+relativePath+'" target="_blank" title="查看大图" >' +
'<img style="width:390px; height:200px;" alt="图片没找到！" src="'+relativePath+'"></a></br></br>'
}
}
updatePanelsBody(content_id,questionName,answer);
}else if(answerList.length==1){
updatePanelsBody(content_id,questionName,'答案:  '+answerList[0].answer);
}else if(answerList.length==0){
updatePanelsBody(content_id,questionName,'<img src="images/newui/errico.gif"  alt="图片没找到！" /></br>' +
'很抱歉您的问题在问题库中没有找到匹配的答案！');
}
content_id ++;
}
})
}
}],
layout : {
type : "table",
columns : 2
},
// 监听回车
listeners : {
afterRender : function(thisForm, options) {
this.keyNav = Ext.create('Ext.util.KeyNav', this.el, {
enter : function() {
// 筛选表格
var btn = Ext.getCmp('questionSeedBtn');
btn.handler();
},
scope : this
});
}
}
})]
})
return questionFastSearchWin;
}

Css：

/*众知道快速检索需要用到的样式*/
.circleBox {
font-size: 12px;
margin-top: 20px;
}

.containerBox {
margin: 0 auto;
width: auto !important;
max-width: 400px;

}

.circleBox span {
height: 1px;
font-size: 1px;
display: block;
}

.content {
position: relative;
}

.s1,.s8 {
margin: 0 5px;
}

.s2,.s7 {
margin: 0 3px;
border-left: solid 2px;
border-right: solid 2px;
}

.s3,.s6 {
margin: 0 2px;
border-left: solid 1px;
border-right: solid 1px;
}

.s4,.s5 {
margin: 0 1px;
border-left: solid 1px;
border-right: solid 1px;
}

.content h4 {
color: #036;
font-size: 18px;
padding: 4px;
word-wrap:break-word;
overflow:hidden;
}

.content p {
line-height: 160%;
font-size: 12px;
border-top: dotted 1px #d00;
padding: 4px;
}

/*定义样式  答案*/
.boxStyle_answer .content {
border-left: solid 1px #68D2F9;
border-right: solid 1px #68D2F9;
}

.boxStyle_answer span {
border-color: #68D2F9;
}

.boxStyle_answer .s1,.boxStyle_answer .s8 {
background: #68D2F9;
}

.boxStyle_answer .content,
.boxStyle_answer .s2,
.boxStyle_answer .s3,
.boxStyle_answer .s4,
.boxStyle_answer .s5,
.boxStyle_answer .s6,
.boxStyle_answer .s7
{
background: #68D2F9;
}

/*定义样式  问题*/
.boxStyle_question .content {
border-left: solid 1px #EAA886;
border-right: solid 1px #EAA886;
}

.boxStyle_question span {
border-color: #EAA886;
}

.boxStyle_question .s1,
.boxStyle_question .s8 {
background: #EAA886;
}

.boxStyle_question .content,
.boxStyle_question .s2,
.boxStyle_question .s3,
.boxStyle_question .s4,
.boxStyle_question .s5,
.boxStyle_question .s6,
.boxStyle_question .s7
{
background: #EAA886;
}

样式主要是为了实现圆角DIV，和区别问题与答案

CSS厉害的人，还能做得更好看，比如类似QQ聊天框的效果