三、【ExtJS4学习笔记】Ajax远程访问数据源示例
前端页面:
01.
<
HTML
>
02.
<
HEAD
>
03.
<
TITLE
>远程数据源的组合框示例</
TITLE
>
04.
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=utf-8"
>
05.
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"extjs4/resources/css/ext-all.css"
/>
06.
<
script
type
=
"text/javascript"
src
=
"extjs4/bootstrap.js"
></
script
>
07.
<
script
type
=
"text/javascript"
src
=
"extjs4/ext-lang-zh_CN.js"
></
script
>
08.
<
script
type
=
"text/javascript"
>
09.
Ext.onReady(function(){
10.
//创建数据模型
11.
Ext.regModel('BookInfo', {
12.
fields: [{name: 'bookName'}]
13.
});
14.
//定义组合框中显示的数据源
15.
var bookStore = Ext.create('Ext.data.Store',{
16.
model : 'BookInfo',
17.
proxy: {
18.
type: 'ajax',//Ext.data.AjaxProxy
19.
url : 'bookSearchServer.jsp',
20.
reader: new Ext.data.ArrayReader({model : 'BookInfo'})
21.
}
22.
});
23.
//创建表单
24.
Ext.create('Ext.form.Panel',{
25.
title:'Ext.form.field.ComboBox远程数据源示例',
26.
frame : true,
27.
height:100,
28.
width:270,
29.
renderTo: Ext.getBody(),
30.
bodyPadding: 5,
31.
defaults:{//统一设置表单字段默认属性
32.
labelSeparator :':',//分隔符
33.
labelWidth : 70,//标签宽度
34.
width : 200,//字段宽度
35.
labelAlign : 'left'//标签对齐方式
36.
},
37.
items:[{
38.
xtype : 'combo',
39.
fieldLabel:'书籍列表',
40.
listConfig : {
41.
loadingText : '正在加载书籍信息',//加载数据时显示的提示信息
42.
emptyText : '未找到匹配值',//当值不在列表是的提示信息
43.
maxHeight : 100//设置下拉列表的最大高度为60像素
44.
},
45.
allQuery:'allbook',//查询全部信息的查询字符串
46.
minChars : 3,//下拉列表框自动选择前用户需要输入的最小字符数量
47.
queryDelay : 300,//查询延迟时间
48.
queryParam : 'searchbook',//查询的名字
49.
triggerAction: 'all',//单击触发按钮显示全部数据
50.
store : bookStore,//设置数据源
51.
displayField:'bookName',//定义要显示的字段
52.
valueField:'bookName',//定义值字段
53.
queryMode: 'remote'//远程模式
54.
}]
55.
});
56.
});
57.
</
script
>
58.
</
HEAD
>
59.
<
BODY
STYLE
=
"margin: 10px"
>
60.
</
BODY
>
61.
</
HTML
>
JSP代码:
01.
<%@ page language=
"java"
contentType=
"text/html; charset=utf-8"
pageEncoding=
"utf-8"
%>
02.
<%
03.
String bookName = request.getParameter(
"searchbook"
);
04.
String jav =
"['java编程思想'],['java入门'],['javascript程序设计']"
;
05.
String cpp =
"['c++编程思想'],['c++入门'],['c++程序设计']"
;
06.
String php =
"['php程序设计'],['php入门'],['php从入门到精通']"
;
07.
String books =
""
;
08.
if
(bookName.equals(
"allbook"
)){
09.
books =
"["
+jav+
","
+cpp+
","
+php+
"]"
;
10.
response.getWriter().write(books);
11.
return
;
12.
}
else
{
13.
bookName = bookName.substring(0,3);
//取查询字符串的前3个字符
14.
System.out.println(bookName);
15.
16.
if
(bookName.equals(
"jav"
)){
17.
books =
"["
+jav+
"]"
;
18.
}
else
if
(bookName.equals(
"c++"
)){
19.
books =
"["
+cpp+
"]"
;
20.
}
else
if
(bookName.equals(
"php"
)){
21.
books =
"["
+php+
"]"
;
22.
}
else
{
23.
books =
"[['没有数据']]"
;
24.
}
25.
response.getWriter().write(books);
26.
}
27.
%>
附:ExtJs4学习笔记目录
- 【ExtJs4学习笔记01】基础知识
- 【ExtJS4学习笔记02】Form表单控件
- 【ExtJS4学习笔记03】Ajax远程访问数据源示例
- 【ExtJS4学习笔记04】uploadForm图片上传
- 【ExtJS4学习笔记05】Panel面板使用
- 【ExtJS4学习笔记06】一些小知识点
- 【ExtJS4学习笔记07】事件绑定
- 【ExtJS4学习笔记08】Template
- 【ExtJS4学习笔记09】数据模型
- 【ExtJS4学习笔记10】Grid
- 【ExtJS4学习笔记11】树控件
原文出处:hnhnhnhnhn的博客