博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

extjs4 model

Posted on 2011-11-09 23:16  linFen  阅读(2469)  评论(0)  编辑  收藏  举报
  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>  
<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代码 复制代码 收藏代码
  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. %>