ExtJS4学习笔记三－－远程访问数据源示例

来源：互联网发布：茅台防伪溯源软件编辑：程序博客网时间：2024/06/08 09:49

前端页面：

Html代码  
<HTML>  
 <HEAD>  
  <TITLE>远程数据源的组合框示例</TITLE>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <link rel="stylesheet" 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 STYLE="margin: 10px">  
 </BODY>  
</HTML>  

JSP代码：

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);  
}  
%>  

0 0