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

    前端页面： 

    Html代码  收藏代码
    1. <HTML>  
    2.  <HEAD>  
    3.   <TITLE>远程数据源的组合框示例</TITLE>  
    4.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    5.   <link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />  
    6.   <script type="text/javascript" src="extjs4/bootstrap.js"></script>  
    7.   <script type="text/javascript" src="extjs4/ext-lang-zh_CN.js"></script>  
    8.   <script type="text/javascript">  
    9.     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.             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代码： 

    Jsp代码  收藏代码
      1. <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>  
      2. <%  
      3. String bookName = request.getParameter("searchbook");  
      4. String jav = "['java编程思想'],['java入门'],['javascript程序设计']";  
      5. String cpp = "['c++编程思想'],['c++入门'],['c++程序设计']";  
      6. String php = "['php程序设计'],['php入门'],['php从入门到精通']";  
      7. String books = "";  
      8. if(bookName.equals("allbook")){  
      9.     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. %>  
  • 相关阅读:
    CKEditor4x word导入不保存格式的解决方案
    为了希望正式开始开发
    HTTP权威指南-URL与资源
    HTTP权威指南-HTTP概述
    同源策略和跨域访问
    普通Html文件图片上传(Storing Image To DB)
    PostgreSQL时间戳提取的特殊需求
    (转)百度前端规范、腾讯前端规范
    整理一下嵌入式WEB开发中的各种屏蔽(转)
    Excel表格指定列数据转换成文本
  • 原文地址：https://www.cnblogs.com/zhaoxd/p/3049231.html
Copyright © 2020-2023  润新知