ExtJS ComboBox读取数据库数据用法

建立读取数据的POJO

public class UserRole {
 
 private String roleId;
 private String roleName;
 private String roleDesc;
 public String getRoleId() {
  return roleId;
 }
 public void setRoleId(String roleId) {
  this.roleId = roleId;
 }
 public String getRoleName() {
  return roleName;
 }
 public void setRoleName(String roleName) {
  this.roleName = roleName;
 }
 public String getRoleDesc() {
  return roleDesc;
 }
 public void setRoleDesc(String roleDesc) {
  this.roleDesc = roleDesc;
 }
 }

在用ExtJS的时候，很多时候用到comboBox控件，这个控件可以有选择的给其他人员使用，而不是输入的方式。

comboBox可以加载本地配置好的数据，但是也可以通过加载数据库的表信息，直接读取。下面就是我读取的方法：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">    
    <title>文件上传</title>
	<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css">
	<!--  <link rel="stylesheet" type="text/css" href="./utiljs/global.css">-->	
	<script type="text/javascript" src="./extjs/ext-base.js"></script>
	<script type="text/javascript" src="./extjs/ext-all.js"></script>
	<script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script>
  </head>
  
 
  <body>
	<script type="text/javascript">
	
	Ext.onReady(function() {	
				
			var record=[
		    	{name : 'roleId',type : 'string'},
		    	{name : 'roleName',type : 'string'},
		    	{name : 'roleDesc',type : 'string'}
			];
					
			var recordHeads = Ext.data.Record.create(record);
			
			//定义查询数据的url
		    var datastore = new Ext.data.Store( {
				proxy:new Ext.data.HttpProxy(new Ext.data.Connection({timeout:0,url:'./json/combo_buildComboBox.action'})),
				reader : new Ext.data.JsonReader( {
					root : 'rolelist', //后台返回的list集合
					totalProperty : 'total' //用于计算全部数据的total
				}, recordHeads),
				remoteSort : false
			});
			
			datastore.load(); //加载store()，必须否则不加载action数据
			
			var combo = new Ext.form.ComboBox({
				width : 180,
				allowBlank : false,     //不允许为空
				emptyText : '请选择',
				//editable : false,         //是否允许输入
				store : datastore,
				mode : 'local',
				triggerAction : 'query',
				valueField : 'roleId',
				displayField : 'roleName',
				applyTo : 'combo'
			});
			
	});
</script>
	<input id=combo type="text" />
	<!-- comboBox必须放在input标签里面 -->
  </body>
</html>

这里是页面的comboBox的组件的js展示部分。

后台action逻辑代码部分，这里我单独分离出来，用jdbc连接。

package com.lzb.webutils.action;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.lzb.webutils.entity.UserRole;
import com.opensymphony.xwork2.ActionSupport;
/**
 * 创建一个从数据库加载数据的下拉列表
 * 这里是以t_sys_role表的数据为例子
 * @author lizhenbin
 *
 */
public class ComboBoxAction extends ActionSupport {
	
	private UserRole role;
	private List<UserRole> rolelist;
	private int total;
	
	//这里用JDBC加载数据
	public String buildComboBox() throws Exception{
		
		List<UserRole> tempRole = new ArrayList<UserRole>();
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;

		Class.forName("oracle.jdbc.driver.OracleDriver").newInstance();
		conn = DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:ora10g","piaolala","piaolala");
		stmt = conn.createStatement();
		rs = stmt.executeQuery("select * from t_sys_role");
		while(rs.next()) {
			UserRole u = new UserRole();
			u.setRoleId(rs.getString("ROLEID"));
			u.setRoleName(rs.getString("ROLENAME"));
			u.setRoleDesc(rs.getString("ROLEDESC"));
			tempRole.add(u);
		}
		for(UserRole u : tempRole) {
			System.out.println("RoleId: "+u.getRoleId()+" RoleName: "+u.getRoleName()+" RoleDesc: "+u.getRoleDesc());
		}
		this.rolelist = tempRole;
		this.total = tempRole.size(); //返回个数
		return "success";
	}
	
	public UserRole getRole() {
		return role;
	}
	public void setRole(UserRole role) {
		this.role = role;
	}
	public List<UserRole> getRolelist() {
		return rolelist;
	}
	public void setRolelist(List<UserRole> rolelist) {
		this.rolelist = rolelist;
	}
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}

}

因为我返回的时json数据，所有再struts中配置信息如下：

<package name="webutils_json" namespace="/json"  extends="json-default">
	<action name="combo_*" method="{1}" class="com.lzb.webutils.action.ComboBoxAction">
		<result type="json"></result>
	</action>
</package>

这样再js里面的store就可以获取到数据了。

ExtJS ComboBox读取数据库数据用法

相关推荐