我直接上代码了
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提供了两种主要的分页模式:客户端分页(Client Paging)和服务器端分页(Server Paging)。客户端分页适用于数据量不大,且可以一次性加载到内存中...
- Ext JS Grid的`store`可以通过Ajax请求与Servlet交互,一般使用`proxy`配置项设置为`Ext.data.proxy.Ajax`,并配置URL指向Servlet处理分页请求的端点。 - 当用户改变页码或每页条数时,Grid会自动发送带有相关...
在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据...在阅读这篇博客时,可以参照给出的"extgrid"文件,查看具体的代码实现,以便更好地理解和学习。
java运行依赖jar包
- `store`:EXT Grid需要一个数据存储对象,配置`paging`为`true`以启用分页。 - `proxy`:设置数据存储的代理,通常使用`Ext.data.HttpProxy`,配置`url`指向服务器端处理分页请求的接口。 - `reader`:设置数据...
proxy: new Ext.data.HttpProxy({ url: 'data.php', method: 'GET' }), reader: new Ext.data.JsonReader({}, PersonRecord), remoteSort: true }); ``` 在这个例子中,当`store`加载数据时,会自动将`sort`...
EXT Grid还支持分页、排序、分组等多种高级功能,这使得它成为处理大量数据的理想选择。在实际开发中,结合EXT提供的事件监听和自定义插件,你可以实现更加复杂和个性化的数据操作逻辑。 综上所述,EXT Grid数据...
通过`Ext.grid.Panel`的`plugins`属性启用分页插件`Ext.grid.plugin.PagingToolbar`,并与`store`的`proxy`配置相结合,可以实现按需从服务器请求数据。`proxy`中的`type`设置为`ajax`或`rest`,并配置`api`属性来...
1. 数据绑定:EXT Grid可以与服务器端的数据源进行双向绑定,这得益于EXT JS的数据模型和Store机制。通过配置Store,我们可以指定数据的URL、请求方式以及加载和更新数据的参数。 2. 分页:EXT Grid可以通过配置...
java运行依赖jar包
总结起来,本篇内容涵盖了ExtJS中的核心数据组件,包括Ext.data.Connection的使用、Ext.data.Record的创建与操作、Ext.data.Store的配置以及数据交互的Proxy和Reader机制。这些知识是构建基于ExtJS的异步数据驱动...
7. **Ajax交互**:GRID通常与服务器进行异步数据交换,EXT的AJAX组件(如AjaxProxy)用于发送HTTP请求,获取或提交数据。 8. **扩展性**:EXT GRID支持自定义插件和扩展,可以增加额外的功能,如拖放排序、树形GRID...
在创建Store时,需要设置分页参数`pageSize`以控制每页显示的数据数量,并定义模型(Model)以及数据代理(Proxy)等配置。 ```javascript var store = Ext.create('Ext.data.Store', { pageSize: 10, // 设置每页...
Smiley的HTTP代理Servlet 这是Java Servlet形式的HTTP代理(也称为网关)。 HTTP代理对于AJAX应用程序与托管Web应用程序以外的主机上的Web可访问服务进行通信很有用。 它是反向代理,实际上不是转发代理,尽管...
分页配置包括页面大小(pageSize)、总计记录数(totalProperty)以及数据源(proxy),通常使用HTTP代理(Ext.data.HttpProxy)配合服务器进行数据交互。 2. JSON与数据传输:在本例子中,服务器端(可能是用Java...
在Ext JS中,实现前台分页主要依靠`Store`对象和`Grid`组件。`Store`是用来存储数据的容器,它可以与`Grid`、`Chart`等组件配合使用,负责数据的加载、更新和管理。`Grid`则是用来展示数据的组件,通常用于表格形式...
【标题】"smileys-proxy-servlet"是一个基于Java的HTTP代理Servlet,它利用了Smiley库提供的功能。这个库的主要目的是在服务器端为应用程序提供一个代理服务,允许通过Servlet容器来转发HTTP请求。Smiley库是专门为...
在Grid Panel中,我们通常会使用`Ext.data.Store`来存储和管理数据,并通过配置`pagingToolbar`来实现分页界面。 2. **Ext.data.Store与分页配置** `Ext.data.Store`是数据模型的容器,负责加载、存储和管理数据。...
HTTP-Proxy-Servlet-master.zip