代码执行结果展示:
/********************************************
* @author henyue@gmail.com (Kong)
* @version CreatedTime:2010-4-27 下午16:11:12
* @Description ExtJs入门练习:GridPanel
********************************************/
// 勾选模型
var sm = new Ext.grid.CheckboxSelectionModel({
singleSelect: false
//singleSelect设置为true,则应用到grid之后只能单选,默认为false
});
// 列模型
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),// Ext封装的特殊类,用于显示行号
sm,
{
id : "title",
header : "标题",
width : 150,
dataIndex : "title",
tooltip : "文章标题",
renderer : function(v) {
return "<u>" + v + "</u>";// renderer方法,可组合jsonObj内多个属性一次返回
}
}, {
header : "作者",
width : 50,
dataIndex : "author"
}, {
header : "创建时间",
width : 150,
format : "Y-m-d",
dataIndex : "createdTime",
renderer : Ext.util.Format.dateRenderer("Y-m-d")
}, {
header : "操作",
width : 100,
dataIndex : "rowId",
menuDisabled : true,
renderer : function(v) {
var modify = "<a href='modify?newsId=" + v + "'>修改</a>";
var remove = "<a href='delete?newsId=" + v + "'>删除</a>";
return "<span align='center'>" + modify + " " + remove
+ "</span>";
}
}]);
// Dummy数据
var data = [{
rowId : 5,
title : "论雷峰塔的倒掉",
author : "鲁迅",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
rowId : 2,
title : "背影",
author : "朱自清",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
rowId : 3,
title : "鲁提辖拳打镇关西",
author : "施耐庵",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
rowId : 1,
title : "沁园春 雪",
author : "毛 泽 东",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}, {
rowId : 4,
title : "蜀道难",
author : "李白",
createdTime : Date.parseDate("2010-04-26", "Y-m-d")
}];
// 代理,使用Dummy数据
var proxy = new Ext.data.MemoryProxy(data);
// Record 定义记录结果
var News = Ext.data.Record.create([{
name : "title",
type : "string",
mapping : "title"
},
// 每个元素的name属性必须与data里的属性字段相同,包括大小写,否则读不出数据且不会报错
{
name : "author",
type : "string",
mapping : "author"
}, {
name : "createdTime",
type : "string",
mapping : "createdTime"
}, {
name : "rowId",
mapping : "rowId"
}]);
// Reader
var reader = new Ext.data.JsonReader({}, News);
// Store
var store = new Ext.data.Store({
proxy : proxy,
reader : reader
});
store.load();
Ext.onReady(function() {
var grid = new Ext.grid.GridPanel({
title : "新闻列表",
width : 500,
autoHeight : true,
cm : cm,
sm : sm,
//如果只在ColumnModel中加sm而不在grid构造中加,有以下后果:
//1.不能实现多选;
//2.不能实现标题行的CheckBox被选中时全选
store : store,
renderTo : "a",
autoExpandColumn : "title",
tbar : [{
text : "删除选定行",
icon : "ext/resources/images/default/dd/drop-no.gif",
cls : "x-btn-text-icon",
handler : function() {
var rsm = grid.getSelectionModel();
var view = grid.getView();
var store = grid.getStore();
for (var i = view.getRows().length - 1; i >= 0; i--) {
if (rsm.isSelected(i)) {
store.remove(store.getAt(i));
}
}
view.refresh();
}
}, {
text : "删除所有行",
icon : "ext/resources/images/default/dd/drop-no.gif",
cls : "x-btn-text-icon",
handler : function() {
Ext.Msg.confirm("警告", "确定要删除所有数据么?", function (btn) {
if (btn == "yes") {
var store = grid.getStore();
store.removeAll();
grid.getView().refresh();
}
})
}
}, '-', { //'-'为间隔标志符号|
text : "新建内容",
icon : "ext/resources/images/default/dd/drop-add.gif",
cls : "x-btn-text-icon",
handler : function() {
Ext.Msg.prompt("新建", "标题:", function (btn, txt) {
var newItem = {
title : txt,
author : "Kong",
createdTime : new Date()
}
var news = new News(newItem);
grid.getStore().insert(0, news);
grid.getView().refresh();
})
}
}, {
text : "获取指定行内容",
icon : "ext/resources/images/default/dd/drop-yes.gif",
cls : "x-btn-text-icon",
handler : function() {
var rsm = grid.getSelectionModel();
for (var i = 0; i < grid.getView().getRows().length; i++) {
if (rsm.isSelected(i)) {
var record = grid.getStore().getAt(i);
var title = record.get("title");
var author = record.get("author");
var createdTime = record.get("createdTime");
var rowId = record.get("rowId");
Ext.Msg.alert("Info", title + "<br/>" + author + "<br/>" + createdTime + "<br/>" + rowId);
}
}
}
}],
buttonAlign : "right",
buttons : [{
text : "第一行",
handler : function() {
var rowSelectModel = grid.getSelectionModel();
//得到行选择模型
rowSelectModel.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()) {
rsm.selectNext();
} else {
Ext.Msg.alert("警告", "已到达最后一行");
}
}
}, {
text : "全选",
handler : function() {
var rsm = grid.getSelectionModel();
rsm.selectAll();
}
}, {
text : "全不选",
handler : function() {
var rsm = grid.getSelectionModel();
rsm.deselectRange(0, grid.getView().getRows().length - 1);
//grid.getView().getRows().length 可以获得表格的总行数
//注意:Ext.grid.RowSelectionModel的getCount方法返回的是选择的总行数
}
}, {
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);
//selectRows方法为选取多行,第二个参数表示为保持现有的选区状态
//如果只是用rsm.selectRow(i),则每次都会选择第一行
}
}
}
}]
});
});
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0024/0882/363f2db6-cfec-32ec-a4c1-d99115c30ddb-thumb.gif)
- 大小: 20.6 KB
分享到:
相关推荐
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS...ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门
NULL 博文链接:https://huiqinbo.iteye.com/blog/2218833
ExtJS2.2学习:再论el和contentEl的区别 为了更好的区分el和contentEl的使用,下面让我们来做几个测试。 测试一 .......
ExtJs入门实例ExtJs入门实例ExtJs入门实例
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
ExtJs的入门电子资料,ExtJs2.0 学习系列
前台采用ExtJs 2.2.1编写(由于库文件比较大,考虑到大家本机都有了,所以在此没有上传,大家直接改一下路径即可),后台采用asp+access编写(看文件名就知道了). 本例子演示的4级联动菜单:州+国家+城市+地区
用的extjs是3.4版,在新的extjs4.2环境下不能运行,费了好大劲,终于搞定。期间到laz英文论坛提问,可能跟我英文差有关吧,一个回答的都没有。搞定后,版主又要我进行了“ open a new issue in the bugtracker and ...
ExtJS的GridPanel导出excel文件,方便快捷易懂!
ExtJS入门教程(超级详细).pdf
为web开发提供先进的技术,ExtJS 融合了Css和JavaScript的一些组建,极大地提高了web开发的速度与可行性需求
ExtJS入门教程(适合初学者) extjs库文件,简单示例,组件介绍和应用,extjs核心
extjs入门 extjs入门 extjs入门 extjs入门 extjs入门
一些ext练习例子,一些ext练习例子,
经典编程900例(C语言),主要是C基础知识
NULL 博文链接:https://aa00aa00.iteye.com/blog/564647
学习ExtJs的思想莫过于一是组件,另外的一个就是面板。ExtJs其实是java Swing 的思想的变迁。基于组件的这种思想能让我们自由... 正本书抓住的就是这两个思想,得其要领,再加上很好的例子说明,真的可谓是入门之利器。