`
zengshaotao
  • 浏览: 777443 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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.             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代码： 

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. %>  
分享到：
| extjs4表单控件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Extjs4后台框架

    这个“Extjs4后台框架”可能指的是一个特定的、与ExtJS4集成的后端解决方案，用于支持前端应用的数据交互和管理。让我们深入探讨一下ExtJS4及其相关的后台开发概念。 首先，ExtJS4提供了丰富的组件库，包括表格、...

    Extjs panel里添加checkboxgrop后台动态获取数据

    Extjs checkboxgrop动态获取后台数据，并默认为全选状态

    Extjs4的FormPanel从后台load json数据的要点

    在本篇文章中，我们将深入探讨如何使用Extjs4中的FormPanel组件从后台加载JSON数据，并将其映射到表单的各个字段中进行显示。这是一项非常实用的技术，尤其是在需要动态填充表单的情况下。 ### 一、Extjs4 ...

    extjs学习 分页后台处理

    以下是对EXTJS分页后台处理的详细说明： 首先，`Store`对象是EXTJS中用于存储数据的核心组件。在你的代码中，`Store`被创建并配置了`baseParams`、`JsonReader`和`HttpProxy`。 1. `baseParams`: 这个属性用于传递...

    extjs动态生成表格,前台+后台

    4. Ext.Ajax.request：ExtJS提供的异步请求API，用于与服务器进行通信。 5. JSON：数据交换格式，用于传递后端返回的列信息。 6. 动态生成：通过JavaScript代码动态创建ColumnModel和Store，从而实现表格的动态生成...

    extjs 前后台交互参数出现中文乱码问题的解决方法

    ### extjs前后台交互参数出现中文乱码问题的解决方法 #### 问题背景与原因分析 在使用MyEclipse开发工具进行Web应用开发时，尤其是采用ExtJS框架结合Ajax技术进行前后端数据交互的过程中，可能会遇到一个常见的...

    Extjs和后台数据库交互的程序，增删改查

    在“Extjs和后台数据库交互的程序，增删改查”项目中，我们将探讨如何利用ExtJS与后台数据库进行数据的添加、删除、修改和查询操作。 1. **ExtJS的数据模型（Model）** 在ExtJS中，数据模型定义了对象的结构，包括...

    EXTJS产品级别管理后台源代码

    EXTJS产品级别管理后台源代码则是一个使用EXTJS开发的后端管理系统，主要用于处理产品的分级和管理任务。 在EXTJS中，产品级别的管理可能涉及到以下几个核心概念和技术： 1. **EXTJS组件系统**：EXTJS的核心是其...

    基于ExtJS3的后台管理系统模板

    4、通过ColumnHeaderGroup 和 DatePickerPlus，演示了ExtJS插件的基本用法； 5、使用JSON，模拟从后台动态获取数据； 注意事项： 因为file协议不支持Ajax获取数据，所以请把该项目部署到Nginx、Apache或Tomcat等...

    ExtJS4多文件上传，带进度条及管理

    4. **进度条更新**：通过swfupload提供的API获取每个文件的上传进度，并更新对应的进度条。 5. **文件操作**：提供暂停、继续、取消等操作，更新相应状态。 **七、安全和优化** 在实际应用中，还需要考虑文件上传的...

    extjs后台交互完整示例

    在"extjs后台交互完整示例"中，我们可以看到如何使用ExtJS与服务器进行数据交换，这对于创建动态和数据驱动的应用程序至关重要。 首先，我们要理解ExtJS的数据模型和存储机制。它提供了Store对象，作为客户端数据的...

    extjs后台程序

    在"extjs后台程序"这个项目中，我们很可能看到的是EXTJS如何与Java Web服务进行通信，实现信息的发布和图片的上传功能。这涉及到以下几个关键知识点： 1. **EXTJS组件**：EXTJS提供了丰富的组件库，如Grid（表格）...

    extjs和数据库的后台交互

    4. **Model和Store**：在ExtJS中，Model定义了数据的结构和行为，Store则负责管理一组Model实例，提供数据加载、排序、过滤等功能。开发者可以配置Store的proxy属性，指定与后台交互的方式，比如设置为`Ext.data....

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...

    ExtJS4.2后台分页需要的几个文件

    在ExtJS4.2中实现后台分页是一个重要的功能，特别是在处理大量数据时，它可以显著提高应用程序的性能和用户体验。后台分页意味着数据不在前端一次性加载，而是分批次从服务器获取，这样可以避免一次性加载过多数据...

    Extjs4 图片浏览器

    6. **Data Binding（数据绑定）**：ExtJS4的一个重要特性，允许UI元素与后台数据模型实时同步，当选择新的图片时，ImageViewer会自动更新以显示新图片。 7. **Events（事件）**：通过监听用户的交互行为，如点击...

    EXTJS网站后台以及JSP+JSTL+EL网站前台

    4. 图片轮播：EXTJS的Carousel组件可用于实现图片轮播效果，可以设置自动播放、导航箭头、指示器等特性，为用户提供良好的用户体验。 5. 视频上传和播放：EXTJS本身不直接支持视频处理，但可以结合HTML5的video元素...

    ssh+extjs4整合开发

    EXTJS4支持Ajax和JSONP，可以方便地与后台的RESTful服务进行通信，动态加载数据。在本示例中，EXTJS4的组件可能被用来创建一个用户友好的界面，用户可以通过这些组件与后端SSH服务进行交互，如查询、编辑和保存数据...

    extjs 分页

    在EXTJS分页场景中，DAO通常处理分页请求，根据请求的页码和每页记录数，从服务器获取对应的数据块。EXTJS中的Ajax请求或者Restful API都可以实现这一功能。 四、Action（动作控制器） Action是EXTJS中处理业务...

    extjs4 ssh 项目源码

    这个项目展示了如何在后台使用SSH框架来处理业务逻辑和数据存储，而在前端使用ExtJS 4创建交互式的用户界面。 **ExtJS 4** ExtJS 4 是 Sencha 公司提供的一个用于构建Web应用的JavaScript库。它提供了大量的组件和...

Magicbox
Global site tag (gtag.js) - Google Analytics