Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();//显示选择框
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//显示行号
sm,//显示选择框
{
header : "姓名",// 列头文字说明
width : 80,
dataIndex : "Name",// 记录结构中的name属性值
tooltip : "这是你的姓名"// 悬停提示
}, {
header : "性别",
width : 40,
dataIndex : "Sex",
align : "center",
renderer : function(v) {
if (v == "男") {
return "<img src='imgs/boy.gif'>";
} else {
return "<img src='imgs/girl.gif'>";
}
}
}, {
header : "生日",
width : 150,
format : "Y-m-d",
dataIndex : "Birthday",
renderer : Ext.util.Format.dateRenderer("Y-m-d")
}, {
header : "学历",
width : 80,
dataIndex : "Education",
align : "center"
}, {
id : "memo",
header : "备注",
dataIndex : "Memo"
}, {
header : "操作",
width : 150,
dataIndex : "Operation",
menuDisabled : true,
renderer : function(v) {
return "<sapn style='margin-right:10px'><a href='#'>修改</a></span>"
+ "<span><a href='#'>删除</a></span>";
}
}
]);
// 给每个列添加数据
var data = [{
name : "学生A",
sex : "男",
birthday : Date.parseDate("1987-12-08", "Y-m-d"),
edu : "本科",
memo : "无备注"
}, {
name : "学生B",
sex : "女",
birthday : Date.parseDate("1974-04-23", "Y-m-d"),
edu : "大专",
memo : "漂亮MM"
}, {
name : "学生C",
sex : "女",
birthday : Date.parseDate("1978-05-17", "Y-m-d"),
edu : "硕士",
memo : "无备注"
}, {
name : "学生D",
sex : "女",
birthday : Date.parseDate("1988-07-14", "Y-m-d"),
edu : "硕士",
memo : "无备注"
}];
// proxy
var proxy = new Ext.data.MemoryProxy(data);
// 定义记录结果
var Human = Ext.data.Record.create([{
name : "Name",
type : "string",
mapping : "name"
}, {
name : "Sex",
type : "string",
mapping : "sex"
}, {
name : "Birthday",
type : "string",
mapping : "birthday"
}, {
name : "Education",
type : "string",
mapping : "edu"
}, {
name : "Memo",
type : "string",
mapping : "memo"
}, {
name : "Operation",
type : "string"
// mapping:"oper"
}]);
var reader = new Ext.data.JsonReader({}, Human);
//提供数据源
var store = new Ext.data.Store({
proxy : proxy,
reader : reader
});
store.load();
var grid = new Ext.grid.GridPanel({
title:"学生信息",
width:700,
autoHeight:true,
cm:cm,
sm:sm,
store:store,
renderTo:"a",
autoExpandColumn:"memo",//自动伸展
buttonAlign:"center",
buttons:[{
text:"第一行",
handler:function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectFirstRow();
}
},{
text:"上一行",
handler:function(){
var rsm = grid.getSelectionModel();//得到选择行的模型
if(!rsm.hasPrevious()){
Ext.Msg.alert("警告","已到达第一行");
}else{
rsm.selectPrevious();
}
}
},{
text:"下一行",
handler:function(){
var rsm = grid.getSelectionModel();//得到行选择模型
if(!rsm.hasNext()){
Ext.Msg.alert("警告","已到达最后一行");
}else{
rsm.selectNext()
}
}
},{
text:"最后一行",
handler:function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectLastRow();
}
},{
text:"全选",
handler:function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.selectAll();
}
},{
text:"全不选",
handler:function(){
var rsm = grid.getSelectionModel();//得到行选择模型
rsm.deselectRange(0,grid.getView().getRows().length - 1);
}
},{
text:"反选",
handler:function(){
var rsm = grid.getSelectionModel();//得到行选择模型
for (var i = grid.getView().getRows().length - 1; i >= 0; i--) {
if(rsm.isSelected(i)){
rsm.deselectRow(i);
}else{
rsm.selectRow(i,true);//必须保留原来的,否则效果无法是实现
}
}
}
}]
});
})
分享到:
相关推荐
NULL 博文链接:https://redboy5711.iteye.com/blog/259913
在使用表格的分页功能时,我们把该控件的start与limits参数与Hibernate的分页功能影射,从页实现了动态的分页效果;而TreePanel的更新也是一个比较常见的问题,当我们点击测试按钮时,TreePanel会请求远程服务器的...
详细介绍了EXTJS中gridpanel分页技术的解析
使用ext3.0 实现 GridPanel 分页显示,调用后台数据 ,格式为json,数据使用 xml 无数据库下载就可以运行,与dwr结合
第二十一章:GridPanel分页 148 一、跑跑题——JSON-LIB 148 二、分页工具栏 154 三、分页 154 四、小结 157 第二十二章:GridPanel扩展 158 一、学会自学吧,朋友 158 二、带摘要的GridPanel 158 三、RowExpander ...
ext 树 gridpanel 分页 ,文件上传, tabpanel ... 的一些例子 刚学的时候做的..只要加上Ext2.0的包就可以直接运行
扩展的GridPanel,让其分页后保持选择状态
ExtJS4.1+ASP.NET MVC3+Spring.NET1.3+EF5+SQLite 整合源码,本人整合多日,也算来之不易,需要的可以下载。...ExtJS部分实现单表CRUD,GridPanel分页和查询,TreePanel管理,GridPanel与TreePanel的复杂联合操作。
源代码js文件 博文链接:https://javaExtjs.iteye.com/blog/200923
实现了从后台读取数据,并进行分页显示,从后台读取treepanel数据,显示,并实现了点击节点复选框的时候,出现父节点和子节点的联动,运行环境是vs2008
非传统分页工具. 简单说明下: 显示第一页与最后一页. 显示当前页对称的前后几页(可以自定义显示多少页). 其它的页码省略. 点击省略号, 省略号隐藏, 显示一个与省略号相同宽度的页面跳转转入框. 整个设置还比较智能....
Ext.grid.GridPanel是一个功能强大的表格控件,它可以显示大量数据,并且提供了许多自定义的选项,例如分页、排序、过滤等。 在ExtJS中,表格控件对性能的要求较高,特别是在显示大量数据时。如果不使用分页机制,...
所以自己学了一段时间,在专案才发现extjs的强大,无论对于开发者还是使用者他都是一场视觉盛宴,这里有我从学习开始做的一些笔记和例子也有自己收集的学习资料,里面包括分页,grid,tree,显示树信息的TreePanel、...
treepanel和gridpanel之间转换(这里只用了一种方式,后面会还会更多的方法来实现,请关注),基本内容的CRUD,注意这里是使用的是泛型接口,只要继承这个基类,就有了分页和基本的CRUD,目前只实现用户管理(包括登录),...
1、演示常用控件使用如:TabPanl,GridPanel,TreePanel,Menu,FormPanel,Window,ux等等。 2、演示控件封装如:表格控件,文本框控件,布局控件,列表控件,图表控件,分页控件等等。 3、演示插件使用和封装插件、...
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
xtype: 'pagingtoolbar', // 分页栏 dock: 'bottom', displayInfo: true, store: this.store }]; this.callParent(arguments); } ``` Toolbar.js 在 Toolbar.js 中,我们需要定义一个 Ext.zc.grid.Toolbar ...
10.4 分页设置PageSizePlugin 282 10.5 行数据扩展RowExpander 284 10.6 本章小结 290 第五部分 调试 第11章 调试 292 11.1 测试Ext.Element的功能 292 11.1.1 获取Ext.Element实例 292 11.1.2 测试CSS样式操作 294 ...