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

javaPie

于 2016-01-25 10:29:30 发布

阅读量744

点赞数

分类专栏： ExtJs

ExtJs 专栏收录该内容

246 篇文章 5 订阅

订阅专栏

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

摘要：【ExtJS4学习笔记03】Ajax远程访问数据源示例：远程数据源的组合框示例

三、【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学习笔记目录

原文出处：hnhnhnhnhn的博客

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

声明：本文由「子任」原创编辑整理，转载请保留链接: 【ExtJS4学习笔记03】Ajax远程访问数据源示例

javaPie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【ExtJS4学习笔记03】Ajax远程访问数据源示例

【ExtJS4学习笔记03】Ajax远程访问数据源示例摘要：【ExtJS4学习笔记03】Ajax远程访问数据源示例：远程数据源的组合框示例三、【ExtJS4学习笔记】Ajax远程访问数据源示例前端页面：view sourceprint01.HTML>02.HEAD>03.TITLE>远程数据源的组合框示例TITLE>
复制链接

扫一扫

专栏目录