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

ExtJS4 Ajax数据源示例

最新推荐文章于 2017-02-20 10:13:53 发布

转载最新推荐文章于 2017-02-20 10:13:53 发布 · 785 阅读

ExtJs 专栏收录该内容

246 篇文章

订阅专栏

【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.
    %>