ExtJs笔记——在嵌套布局的基础上，获取数据库的数据！

最新推荐文章于 2021-01-20 04:01:33 发布

漏气的可乐

最新推荐文章于 2021-01-20 04:01:33 发布

阅读量196

点赞数

分类专栏： Extjs 文章标签： Extjs布局 extjs连接mysql Extjs3.2 Extjs和ajax的运用

本文链接：https://blog.csdn.net/weixin_43841301/article/details/99818857

版权

Extjs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

** 在前一个博客中，记载了嵌套布局的使用，经过测试通过简单的extjs+servlet+mysql 使用c3po最原始的方法完成了对数据库的查询，在此进行记录，今天会继续研究增加删除和修改的功能有需要的可以敬请期待！
上代码主要是将嵌套布局中可编辑性表格的data进行了修改，将他改为动态接收数据库的数据！**

首先是js的代码块  我已经将下面的弹窗删除以方便大家观看， 显示的浏览器中的按钮还没加实际的作用 有需要反射类以及插件的可以留言

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="ext-3.2.0/resources/css/ext-all.css" />
<script src="ext-3.2.0/adapter/ext/ext-base-debug.js"></script>
<script src="ext-3.2.0/ext-all-debug.js"></script>
<script type="text/javascript " src="js/jquery-3.3.1.js"></script>
<script>
	Ext.onReady(function() {
				var data;
				$.ajax({
							url : "${pageContext.request.contextPath}/StudentServlet?method=selectAll",   这里用了反射来获取方法的名称
							async : false,                       //将ajax的异步改为同步就可以将 局部变量保存下来 
							success : function(res) {
								for ( var p in res) {            
									data=res;
								}
							}

						})
				console.log(data.length)                          //测试语句可以选择删除
				var store = new Ext.data.JsonStore({ //定义数据的字段和日期格式
					data : data,
					fields : [ "id", "name", "email", "sex", {
						name : "bornDate",
						type : "date",
						dateFormat : "Y-n-j"
					} ]
				});

				var colM = new Ext.grid.ColumnModel([ { //定义每一列的属性  方法中的属性用json格式表示 记得[]
					header : "姓名",
					dataIndex : "name",
					sortable : true, //可排序的
					editor : new Ext.form.TextField()
				//将此各定义为可以输入的
				}, {
					header : "性别",
					dataIndex : "sex",
					sortable : true,
					editor : new Ext.form.ComboBox({
						transform : "sexList",
						triggerAction : "all",
						lazyRender : true
					})
				}, {
					header : "邮件",
					dataIndex : "email",
					sortable : true,
					editor : new Ext.form.TextField()
				}, {
					header : "出生日期",
					dataIndex : "bornDate",
					renderer : Ext.util.Format.dateRenderer("Y年m月d日"),
					sortable : true,
					editor : new Ext.form.DateField({
						format : "Y年m月d日"
					})
				} ]);
				new Ext.Viewport(
						{ //布局开始
							enableTabScroll : true, //允许出现滚动条
							layout : "border", //总体采用border布局
							items : [ {
								xtype : "tabpanel", //类型为选项面板
								region : "center", //居中
								items : [
										{
											title : "电子邮件",
											layout : "border", //border布局
											items : [
													{
														region : "west", // 向西
														width : 200,
														height : 200,
														layout : "accordion", //手风琴的布局
														layoutConfig : {
															animate : true
														}, //添加动画效果
														collapsible : true, //可折叠 允许伸缩
														items : [ {
															title : "邮件夹"
														}, {
															title : "邮件搜索"
														}, {
															title : "邮箱管理"
														} ]
													},
													{
														region : "center",//居中
														layout : "fit", //填满布局
														items : [ new Ext.grid.EditorGridPanel(
																{ //可编辑的表格
																	cm : colM,
																	store : store,
																	title : "学生管理",
																	tbar : [
																			new Ext.Toolbar.TextItem(
																					'工具栏'),//添加文本工具栏
																			{
																				xtype : "tbfill"
																			}, //类型  工具栏文件 将工具栏的的工具移至靠右
																			//插入代码
																			
																			{
																				xtype : "tbseparator"
																			},//类型为工具栏分隔符
																			{
																				pressed : false,
																				text : "添加"
																			},//开关初始状态为关
																			{
																				xtype : "tbseparator"
																			},
																			{
																				pressed : false,
																				text : "保存"
																			} ],

																	autoExpandColumn : 3
																//自动扩展  下标为3的表格
																}) ]
													} ]
										}, {
											title : "网络存储"
										}, {
											title : "日常安排"
										} ]
							} ]
						});
			});
</script>
</head>
<body>
	<select id="sexList">
		<option>男</option>
		<option>女</option>
	</select>
</body>
</html>

dao方法
  public List<Student> selectAll(){
    	String sql="select * from student";
    	List<Student> list=new ArrayList<Student>();
    	connection=  JdbcUtil.getConnection();
    	try {
    		list=qr.query(connection, sql, new BeanListHandler<Student>(Student.class));
    	} catch (SQLException e) {
    		// TODO Auto-generated catch block
    		e.printStackTrace();
    	}finally {
    		JdbcUtil.closeConnection(connection);
    	}
    	return list;
    }

Servlet类     将list转换为json 进行传递 前台就可以直接就行接收
public String selectAll(HttpServletRequest request,HttpServletResponse response) throws Exception {
		System.out.println("查询全部学生");   
		List<Student> list=new StudentDao().selectAll();
		ObjectMapper mapper=new ObjectMapper();
		String json=mapper.writeValueAsString(list);
		response.setContentType("application/json;charset=UTF-8");
		response.getWriter().println(json);
		return null;
	}

漏气的可乐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs笔记——在嵌套布局的基础上，获取数据库的数据！

** 在前一个博客中，记载了嵌套布局的使用，经过测试通过简单的extjs+servlet+mysql 使用c3po最原始的方法完成了对数据库的查询，在此进行记录，今天会继续研究增加删除和修改的功能有需要的可以敬请期待！上代码主要是将嵌套布局中可编辑性表格的data进行了修改，将他改为动态接收数据库的数据！**首先是js的代码块我已经将下面的弹窗删除以方便大家观看，显示的浏览器中的按钮...
复制链接

扫一扫

专栏目录