`
爪哇岛岛主
  • 浏览: 38759 次
  • 性别: Icon_minigender_1
  • 来自: 杭州(也就是天堂)
社区版块
存档分类
最新评论

ext grid HttpProxy store servlet分页

阅读更多
我直接上代码了
Ext.onReady(function(){

	//定义列模型
	var cm = new Ext.grid.ColumnModel([
		{header:'编号',width:50,dataIndex:'Id'},
		{header:'姓名',width:80,dataIndex:'Name',tooltip:'这是你的姓名'},
		{header:'性别',width:40,dataIndex:'Sex',align:'center'},
		{header:'学历',width:80,dataIndex:'Education',align:'center'},
		{id:'memo',header:'备注',dataIndex:'Memo'}
	]);
	
	
	
	//proxy
	var proxy = new Ext.data.HttpProxy({url:"servlet/PageServlet",method:'post'});
	
	//record
	var human = Ext.data.Record.create([
		{name:'Id',type:'string',mapping:'hid'},
		{name:'Name',type:'string',mapping:'name'},
		{name:'Sex',type:'string',mapping:'sex'},
		{name:'Education',type:'string',mapping:'edu'},
		{name:'Memo',type:'string',mapping:'memo'}
	]);
	
	//reader
	var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},human);
	//store
	var store = new Ext.data.Store({
		proxy:proxy,
		reader:reader
	});
	store.load({params:{start:0,limit:6}});
	var grid = new Ext.grid.GridPanel({
		title:'中国公民',
		width:600,
		collapsible:true,
		autoHeight:true,


cm:cm,
store: store,
renderTo:'mydiv',
autoExpandColumn:'memo',
buttonAlign:'center',
loadMask: {msg:'正在加载数据,请稍侯……'}, 
bbar:new Ext.PagingToolbar({
store:store,
pageSize:6,
displayInfo:true,
buttons:[
{text:'隐藏摘要'},
{text:'菜单',menu:new Ext.menu.Menu({items:[{text:'菜单项一'},{text:'菜单项二'}]})}
]
})
});

});



<%@ page language="java"  pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
%>

<html>
	<head>
		<title>ext-02</title>
		<link rel="stylesheet" type="text/css" href="css/css/ext-all.css"/>
		<!-- <link rel="stylesheet" type="text/css" href="css/css/xtheme-access.css"/>
		 -->
		<link rel="stylesheet" type="text/css" href="css/lala.css"/>
		<script type="text/javascript" src="js/ext-base.js"></script>
		<script type="text/javascript" src="js/ext-all.js"></script>
		<script type="text/javascript" src="js/ext-lang-zh_CN.js"></script>
		<script type="text/javascript" src="js/grid.js"></script>
	</head>
	
	<body>
	
		<div id="mydiv"></div>
		
	</body>
</html>

分享到:
评论

相关推荐

    Ext中对于多种store数据分页实现示例

    本文将深入探讨EXT中对多种store数据分页的实现方式。 首先,EXT提供了两种主要的分页模式:客户端分页(Client Paging)和服务器端分页(Server Paging)。客户端分页适用于数据量不大,且可以一次性加载到内存中...

    简单的小例子Ext+servlet 分页

    - Ext JS Grid的`store`可以通过Ajax请求与Servlet交互,一般使用`proxy`配置项设置为`Ext.data.proxy.Ajax`,并配置URL指向Servlet处理分页请求的端点。 - 当用户改变页码或每页条数时,Grid会自动发送带有相关...

    ExtJS笔记---Grid实现后台分页

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据...在阅读这篇博客时,可以参照给出的"extgrid"文件,查看具体的代码实现,以便更好地理解和学习。

    smiley-http-proxy-servlet-1.7.jar

    java运行依赖jar包

    ext grid带分页(服务器端)

    - `store`:EXT Grid需要一个数据存储对象,配置`paging`为`true`以启用分页。 - `proxy`:设置数据存储的代理,通常使用`Ext.data.HttpProxy`,配置`url`指向服务器端处理分页请求的接口。 - `reader`:设置数据...

    Ext.data.Store的基本用法

    proxy: new Ext.data.HttpProxy({ url: 'data.php', method: 'GET' }), reader: new Ext.data.JsonReader({}, PersonRecord), remoteSort: true }); ``` 在这个例子中,当`store`加载数据时,会自动将`sort`...

    ext grid数据绑定

    EXT Grid还支持分页、排序、分组等多种高级功能,这使得它成为处理大量数据的理想选择。在实际开发中,结合EXT提供的事件监听和自定义插件,你可以实现更加复杂和个性化的数据操作逻辑。 综上所述,EXT Grid数据...

    ext grid网格控件实例

    通过`Ext.grid.Panel`的`plugins`属性启用分页插件`Ext.grid.plugin.PagingToolbar`,并与`store`的`proxy`配置相结合,可以实现按需从服务器请求数据。`proxy`中的`type`设置为`ajax`或`rest`,并配置`api`属性来...

    JSP中使用EXT实现grid table

    1. 数据绑定:EXT Grid可以与服务器端的数据源进行双向绑定,这得益于EXT JS的数据模型和Store机制。通过配置Store,我们可以指定数据的URL、请求方式以及加载和更新数据的参数。 2. 分页:EXT Grid可以通过配置...

    smiley-http-proxy-servlet-1.7-sources.jar

    java运行依赖jar包

    ext 基本知识-store-proxy-reader-ext-connection-实例

    总结起来,本篇内容涵盖了ExtJS中的核心数据组件,包括Ext.data.Connection的使用、Ext.data.Record的创建与操作、Ext.data.Store的配置以及数据交互的Proxy和Reader机制。这些知识是构建基于ExtJS的异步数据驱动...

    EXT2.0 GRID 示例

    7. **Ajax交互**:GRID通常与服务器进行异步数据交换,EXT的AJAX组件(如AjaxProxy)用于发送HTTP请求,获取或提交数据。 8. **扩展性**:EXT GRID支持自定义插件和扩展,可以增加额外的功能,如拖放排序、树形GRID...

    Extjs4 Grid分页与自动刷新

    在创建Store时,需要设置分页参数`pageSize`以控制每页显示的数据数量,并定义模型(Model)以及数据代理(Proxy)等配置。 ```javascript var store = Ext.create('Ext.data.Store', { pageSize: 10, // 设置每页...

    HTTP-Proxy-Servlet:Smiley的HTTP代理实现为Java Servlet

    Smiley的HTTP代理Servlet 这是Java Servlet形式的HTTP代理(也称为网关)。 HTTP代理对于AJAX应用程序与托管Web应用程序以外的主机上的Web可访问服务进行通信很有用。 它是反向代理,实际上不是转发代理,尽管...

    EXT JSON Sqlserver 分页 全部正常运行

    分页配置包括页面大小(pageSize)、总计记录数(totalProperty)以及数据源(proxy),通常使用HTTP代理(Ext.data.HttpProxy)配合服务器进行数据交互。 2. JSON与数据传输:在本例子中,服务器端(可能是用Java...

    Ext前台分页

    在Ext JS中,实现前台分页主要依靠`Store`对象和`Grid`组件。`Store`是用来存储数据的容器,它可以与`Grid`、`Chart`等组件配合使用,负责数据的加载、更新和管理。`Grid`则是用来展示数据的组件,通常用于表格形式...

    smileys-proxy-servlet:使用Smiley的库(https

    【标题】"smileys-proxy-servlet"是一个基于Java的HTTP代理Servlet,它利用了Smiley库提供的功能。这个库的主要目的是在服务器端为应用程序提供一个代理服务,允许通过Servlet容器来转发HTTP请求。Smiley库是专门为...

    Ext 分页核心代码

    在Grid Panel中,我们通常会使用`Ext.data.Store`来存储和管理数据,并通过配置`pagingToolbar`来实现分页界面。 2. **Ext.data.Store与分页配置** `Ext.data.Store`是数据模型的容器,负责加载、存储和管理数据。...

    HTTP-Proxy-Servlet-master.zip

    HTTP-Proxy-Servlet-master.zip

Global site tag (gtag.js) - Google Analytics