建立读取数据的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就可以获取到数据了。
分享到：
相关推荐
通过Servlet让Extjs GridPanel 显示数据库数据
ext精髓,Extjs如何与数据库交互,可以很快的叫你EXT一些知识
Extjs和数据库交互，增删改查Extjs和数据库交互，增删改查（修改测试通过）
extjs读取解析后端json格式数据并显示条形图,非常好看的特效，只能用炫酷来形容，感兴趣就下载看看吧，用在自己的网站觉得吸引眼球！
extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显extjs editgrid combobox 回显
EXTJS的COMBOBOX级联实现和数据提交VALUE[文].pdf
extjs 自动补全，模拟下拉列表combobox
NULL 博文链接：https://dengli19881102.iteye.com/blog/1046190
extjs显示数据库代码，实例。
Extjs和后台数据库交互的程序，增删改查（终极版），个人测试过，直接导入myeclipse，然后启动tomcat即可运行，增删改查都实现了，可成功运行。 如有问题，可联系我，一起解决。
Extjs如何与数据库交互
使用JDBC访问sqlserver 获得数据 生成Json串 Extjs 动态加载Tree 这是个完整项目 但是数据源需要自己配置 重在演示整个流程
Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子 Combobox二级联动列子
该项目使用SSH2框架+jQuery+ExtJs+MySql数据库+MyEclipse开发环境。1、设计构思 将订单模块分成管理员和顾客两个管理部分： 管理员：可以查看所有的订单，对已付款的订单进行发货，查看订单详情，按不同方式查询订单...
Extjs分页使用java实现数据库数据查询.docx
酒店管理系统(SpringMVC+Extjs)附带数据库sql
extJs4 ComboBox 代码组合框实例，ComboBox 各个主要参数详细解释
客户关系管理系统(Struts2+spring+Extjs)附带数据库sql
ExtJs 连接数据库并且生成动态树 ExtJs 连接数据库并且生成动态树 ExtJs 连接数据库并且生成动态树
EXTJS 库存管理系统数据库脚本EXTJS 库存管理系统数据库脚本EXTJS 库存管理系统数据库脚本EXTJS 库存管理系统数据库脚本