extjs 远程数据源

1本地数据源组合框

1. Ext.onReady(function(){
2. //创建数据模型
3. Ext.regModel('PostInfo', {
4. fields: [{name: 'province'}, {name: 'post'}]
5. });
6. //定义组合框中显示的数据源
7. var postStore = Ext.create('Ext.data.Store', {
8. model: 'PostInfo',
9. data: [
10. {province:'北京', post: '100000'},
11. {province:'通县', post: '101100'},
12. {province:'昌平', post: '102200'},
13. {province:'大兴', post: '102600'},
14. {province:'密云', post: '101500'},
15. {province:'延庆', post: '102100'},
16. {province:'顺义', post: '101300'},
17. {province:'怀柔', post: '101400'}
18. ]
19. });
20. //创建表单
21. Ext.create('Ext.form.Panel', {
22. title: 'Ext.form.field.ComboBox本地数据源示例',
23. renderTo:Ext.getBody(),
24. bodyPadding: 5,
25. frame: true,
26. height: 100,
27. width: 270,
28. defaults: {//统一设置表单字段默认属性
29. labelSeparator: ':', //分隔符
30. labelWidth: 70, //标签宽度
31. width: 200, //字段宽度
32. labelAlign: 'left'//标签对齐方式
33. },
34. items: [{
35. xtype: 'combo',
36. listConfig: {
37. emptyText: '未找到匹配值', //当值不在列表时的提示信息
38. maxHeight: 60 //设置下拉列表的最大高度为60像素
39. },
40. name: 'post',
41. fieldLabel: '邮政编码',
42. triggerAction: 'all',//单击除法按钮显示全部数据
43. store: postStore, //设置数据源
44. displayField: 'province',//定义要显示的字段
45. valueField: 'post', //定义值字段
46. queryMode: 'local', //本地模式
47. forceSelection: true, //要求输入值必须在列表中存在
48. typeAhead: true, //允许自动选择匹配的剩余部分文本
49. value: '102600' //默认选择大兴
50. }]
51. });
52. });

2.远程数据源的组合框

1. Ext.onReady(function(){
2. //创建数据模型
3. Ext.regModel('BookInfo', {
4. fields: [{name: 'bookName'}]
5. });
6. //定义组合框中显示的数据源
7. var bookStore = Ext.create('Ext.data.Store', {
8. model: 'BookInfo',
9. proxy: {
10. type: 'ajax', //Ext.data.AjaxProxy
11. url: 'bookSearchServer.jsp',
12. reader: new Ext.data.ArrayReader({model: 'BookInfo'})
13. }
14. });
15. //创建表单
16. Ext.create('Ext.form.Panel', {
17. title: 'Ext.form.field.ComboBox远程数据源示例',
18. renderTo:Ext.getBody(),
19. bodyPadding: 5,
20. frame: true,
21. height: 100,
22. width: 270,
23. defaults: {//统一设置表单字段默认属性
24. labelSeparator: ':', //分隔符
25. labelWidth: 70, //标签宽度
26. width: 200, //字段宽度
27. labelAlign: 'left'//标签对齐方式
28. },
29. items: [{
30. xtype: 'combo',
31. fieldLabel: '书籍列表',
32. listConfig: {
33. loadingText: '正在加载书籍信息', //加载数据时显示的提示信息
34. emptyText: '未找到匹配值', //当值不在列表时的提示信息
35. maxHeight: 60 //设置下拉列表的最大高度为60像素
36. },
37. allQuery: 'allbook', //查询全部信息的查询字符串
38. minChars: 3, //下拉列表框自动选择当前用户需要输入的最小字符数量
39. queryDelay: 300, //查询延迟时间
40. queryParam: 'searchbook',//查询的名字
41. triggerAction: 'all', //单击触发按钮显示全部数据
42. store: bookStore, //设置数据源
43. displayField: 'bookName', //定义要显示的字段
44. valueField: 'bookName', //定义字段值
45. queryMode: 'remote'//远程模式
46. }]
47. });
48. });

bookSearchServer.jsp

1. <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%>
2. <%
3. String path = request.getContextPath();
4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
5. %>
6. <%
7. String bookName = request.getParameter("searchbook");
8. String jav = "['java编程思想'],['java入门'],['javascript程序设计']";
9. String cpp = "['c++编程思想'],['c++入门'],['c++程序设计']";
10. String php = "['php编程思想'],['php入门'],['php程序设计']";
11. String books = "";
12. if(bookName.equals("allbook")){
13. books = "[" + jav + "," + cpp + "," +  php +  "]";
14. response.getWriter().write(books);
15. return;
16. }else{
17. bookName = bookName.substring(0, 3); //取查询字符串的前3个字符串
18. if(bookName.equals("jav")){
19. books = "[" + jav + "]";
20. }else if(bookName.equals("c++")){
21. books = "[" + cpp + "]";
22. }else if(bookName.equals("php")){
23. books = "[" + php + "]";
24. }else{
25. books = "[[没有数据'']]";
26. }
27. response.getWriter().write(books);
28. }
29. %>