ExtJs 中实现类似淘宝机器人效果_js嵌入淘宝机器人-CSDN博客

本文链接：https://blog.csdn.net/xiaozji/article/details/43486131

近日刚好有需求说要做一个类似淘宝机器人的问题库系统，由于我们的系统是用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聊天框的效果