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 ='' +'' +'' +'' +'';//拼接HTML尾		var content_tail = '' +'' +'' +'';	var content_id = 0;	//div idvar updatePanelsBody = function(content_id,questionName,answer){var content = [];var content_middle; if(answer){content.push('' +' ');}else{content.push('' +' ');}content.push(content_head);if(answer){content_middle = '
'+questionName+'
' +'
'+answer+'
';}else{content_middle = '
'+questionName+'
';}content.push(content_middle);content.push('');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 : '' +content_head+'
你好
' +'
欢迎使用众知道，请输入您的问题，点击发送获取我们帮助！
 ' +'' +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' +'

'}}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,'
' +'很抱歉您的问题在问题库中没有找到匹配的答案！');}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聊天框的效果