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

hnhnhnhnhn

浏览: 77156 次

最近访客更多访客>>

akingde

sqllib

monk0123456

lingyu5219

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

ExtJS4

ExtJS4

前端页面：

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

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

分享到：

ExtJS4学习笔记四－－图片上传 | ExtJS4学习笔记二－－表单控件相关

2011-08-31 15:10
浏览 3301
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

ExtJS4学习笔记十一 树控件的使用

ExtJS4学习笔记十－－Grid使用

ExtJS4学习笔记九－－数据模型的使用

ExtJS4学习笔记八－－Template的使用

ExtJS4学习笔记七－－事件绑定相关

ExtJS4学习笔记六－－一些小知识点

ExtJS4学习笔记五－－面板使用

ExtJS4学习笔记四－－图片上传

ExtJS4学习笔记二－－表单控件相关

ExtJs4学习笔记一－－基础知识

最近访客更多访客>>

ExtJS4学习笔记十一树控件的使用