ext4【监听事件 beforeload，用法】【grid 带参数查询分页 store beforeload 解决办法】

最新推荐文章于 2021-02-06 18:44:00 发布

AndyYuan10000

最新推荐文章于 2021-02-06 18:44:00 发布

阅读量1.3w

点赞数 1

分类专栏： ext 文章标签： ext stylesheet extjs string javascript header

本文链接：https://blog.csdn.net/wwwyuanliang10000/article/details/7256555

版权

ext 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<%@ 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>
	<title>demo</title>
	<base href="<%=basePath%>">
	<%
		String extPath = request.getContextPath();
		String extBasePath = request.getScheme() + "://"
				+ request.getServerName() + ":" + request.getServerPort()
				+ extPath + "/";
	%>
		<!-- 样式区 （开始） -->
		<!-- Extjs 核心样式库 -->
		<link rel="stylesheet" type="text/css"
			href="<%=extPath%>/Extjs4/resources/css/ext-all.css" />
		<!-- Extjs 中文字体显示效果补丁 -->
		<link rel="stylesheet" type="text/css"
			href="<%=extPath%>/Extjs4/resources/css/ext-ch-patch.css" />
		<!-- 小图标样式 -->
		<link rel="stylesheet" type="text/css"
			href="<%=extPath%>/Extjs4/resources/css/icons.css" />
		<!-- 样式区 （结束） -->
		<!-- JavaScript （开始） -->
		<!-- 定义Extjs常量 -->
		<script type="text/javascript">
			//域路径
			var extPath = '<%=extPath%>';
			//域名访问路径
			var extBasePath = '<%=extBasePath%>';
			//默认后台分页数据量
			var defaultPageRecordNum = 10;
		</script>
		<!-- Extjs 核心脚本 -->
		<script type="text/javascript" src="<%=extPath%>/Extjs4/bootstrap.js"></script>
		<script type="text/javascript" src="<%=extPath%>/Extjs4/ext-all.js"></script>
		<!-- Extjs 中文脚本 -->
		<script type="text/javascript" src="<%=extPath%>/Extjs4/ext-lang-zh_CN.js"></script>
		<!-- JavaScript （结束） -->
	</head>

	<body>
	</body>
</html>
<script>

	Ext.onReady(function(){
		var store = Ext.create('Ext.data.Store',{
			pageSize:10,
			fields:['id','userName','age'],
			autoLoad:false,
		    proxy: {
		        type: 'ajax',
		        url : extPath+'/gridStore.action',
		        actionMethods : {
					read : 'POST'
				},
		        reader: {
		            type: 'json',
		            root: 'resultList',
		            totalProperty:'totalCount'
		        }
		    }
		});

		store.on('beforeload', function (store, options) {
        var new_params = { id: '9999999' };
        Ext.apply(store.proxy.extraParams, new_params);
        	alert('beforeload');
    	});
		store.load({
	       params: { start: 0, limit: 10 }
	   })

		var grid = Ext.create('Ext.grid.Panel',{
			alias:'widget.gridPanel',
			height:200,
			width:400,
			store:store,
			columns:[
				{header:'id',dataIndex:'id'},
				{header:'userName',dataIndex:'userName'},
				{header:'age',dataIndex:'age'}
			],
			renderTo: Ext.getBody(),
	    });

	});

</script>

//Struts2 服务器端代码:

  public String gridStore(){
        HttpServletRequest request = ServletActionContext.getRequest();
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("utf-8");
        System.out.println("__________________________"+request.getParameter("id"));
        try {
            response.getWriter().write("[{id:100,userName:'张三',age:24},{id:101,userName:'好人',age:24},{id:102,userName:'刘德华',age:28}]");
        } catch (IOException e) {
            e.printStackTrace();
        }

        return null;
    }

二、grid 带参数查询分页 store beforeload 解决办法

将搜索条件放在store的baseParams中，每次加载都赋值

yua

store.on('beforeload', function (store, options) {
        var new_params = { name: Ext.getCmp('search').getValue() };
        Ext.apply(store.proxy.extraParams, new_params);
        // alert('beforeload');
    });

AndyYuan10000

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ext4【监听事件 beforeload，用法】【grid 带参数查询分页 store beforeload 解决办法】

<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%> demo "> <% String
复制链接

扫一扫