【ExtJS4学习笔记03】Ajax远程访问数据源示例_H5之家

三、【ExtJS4学习笔记】Ajax远程访问数据源示例

前端页面：

<HTML> <HEAD> <TITLE>远程数据源的组合框示例</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link type="text/css" href="extjs4/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs4/bootstrap.js"></script> <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function(){ //创建数据模型 Ext.regModel('BookInfo', { fields: [{name: 'bookName'}] }); //定义组合框中显示的数据源 var bookStore = Ext.create('Ext.data.Store',{ model : 'BookInfo', proxy: { type: 'ajax',//Ext.data.AjaxProxy url : 'bookSearchServer.jsp', reader: new Ext.data.ArrayReader({model : 'BookInfo'}) } }); //创建表单 Ext.create('Ext.form.Panel',{ title:'Ext.form.field.ComboBox远程数据源示例', frame : true, height:100, width:270, renderTo: Ext.getBody(), bodyPadding: 5, defaults:{//统一设置表单字段默认属性 labelSeparator :'：',//分隔符 labelWidth : 70,//标签宽度 width : 200,//字段宽度 labelAlign : 'left'//标签对齐方式 }, items:[{ xtype : 'combo', fieldLabel:'书籍列表', listConfig : { loadingText : '正在加载书籍信息',//加载数据时显示的提示信息 emptyText : '未找到匹配值',//当值不在列表是的提示信息 maxHeight : 100//设置下拉列表的最大高度为60像素 }, allQuery:'allbook',//查询全部信息的查询字符串 minChars : 3,//下拉列表框自动选择前用户需要输入的最小字符数量 queryDelay : 300,//查询延迟时间 queryParam : 'searchbook',//查询的名字 triggerAction: 'all',//单击触发按钮显示全部数据 store : bookStore,//设置数据源 displayField:'bookName',//定义要显示的字段 valueField:'bookName',//定义值字段 queryMode: 'remote'//远程模式 }] }); }); </script> </HEAD> <BODY> </BODY> </HTML>

JSP代码：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String bookName = request.getParameter("searchbook"); String jav = "['java编程思想'],['java入门'],['javascript程序设计']"; String cpp = "['c++编程思想'],['c++入门'],['c++程序设计']"; String php = "['php程序设计'],['php入门'],['php从入门到精通']"; String books = ""; if(bookName.equals("allbook")){ books = "["+jav+","+cpp+","+php+"]"; response.getWriter().write(books); return; }else{ bookName = bookName.substring(0,3);//取查询字符串的前3个字符 System.out.println(bookName); if(bookName.equals("jav")){ books = "["+jav+"]"; }else if(bookName.equals("c++")){ books = "["+cpp+"]"; }else if(bookName.equals("php")){ books = "["+php+"]"; }else{ books = "[['没有数据']]"; } response.getWriter().write(books); } %> 附：ExtJs4学习笔记目录

原文出处：hnhnhnhnhn的博客

你可以继续阅读相关【ExtJs4 , ExtJs4学习 , 前端技术】的文章。