本文介绍了一个使用ExtJS框架实现的网格面板(GridPanel)示例，包括如何定义列模型、加载数据、实现单元格点击事件及右键菜单等功能，并对一些核心代码进行了详细解释。
发现自己自己学习的尽头一直不是很足够，最近又在用ext。在网上找了下ext的应用，这个东西越来越流行了。在网上找了些例子。自己跟着学习。非常感谢那些网上发布自己的学习ext资料的高手们，向你们致敬。
这些例子全是在前台定死的，没有经过后台取数据。我也是初学者。努力吧
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'first.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css">
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();//选择行号
//定义的是头部显示
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自动行号
sm,
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:renderDescn},//renderer:renderDescn 加载的时候会调用renderDescn方法
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable=true;//自动排序功能
//在页面上展现的结果 就是return的值
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
"这个单元格的值是：" + value + "\\n" +
"这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
"这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" +
"这是第" + rowIndex + "行\\n" +
"这是第" + columnIndex + "列\\n" +
"这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
"\")'>";
return str;
}
/*
function changeSex(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>红男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>绿女</span>";
}
}
*/
var data = [
['1','male','name1','descn1'],
['2','male2','name1','descn2'],
['3','male3','name3','descn3'],
['4','male4','name4','descn4'],
['5','male5','name5','descn5']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
/*第一种用法
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
*/
/*第二种用法
{name: 'id',mapping: 0},
{name: 'sex',mapping: 1},
{name: 'name',mapping: 2},
{name: 'descn',mapping: 3}
*/
//第三种用法
'id','sex','name','descn'
])
});
ds.load();//加载数据
var grid = new Ext.grid.GridPanel({
width:600,
height:200,
el: 'grid',
ds: ds,
cm: cm,
sm: sm,
title:'测试',
tbar : [//添加一个工具条
{ // 建立一个类似下拉列表的按钮
xtype: 'tbsplit',
text: 'Options',
handler: optionsHandler, // handle a click on the button itself
menu: new Ext.menu.Menu({
items: [
// These items will display in a dropdown menu when the split arrow is clicked
{text: 'Item 1',handler:item1Handler},
{text: 'Item 2'},
]
})
},
//一个按钮
{text: 'OK', handler:okHandler},// tbbutton is the default xtype if not specified
{xtype: 'tbtext', text: 'Item 1'}
]
});
function item1Handler(){
Ext.Msg.alert("ok",'选择了我');
}
function optionsHandler(){
Ext.Msg.alert("选择了","1111");
}
function okHandler(){
Ext.Msg.alert("选择了","OK");
}
grid.render();
//添加单击单元格事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var data = record.get(fieldName);
Ext.MessageBox.alert('show','当前选中的数据是'+data);//某一单元格的值
}
//添加右击单元格事件
grid.addListener('rowcontextmenu', rightClickFn);//右键菜单代码关键部分
var rightClick = new Ext.menu.Menu({
id:'rightClickCont', //在HTML文件中必须有个rightClickCont的DIV元素
items: [
{
id: 'rMenu1',
handler: rMenu1Fn,//点击后触发的事件
text: '右键菜单1'
},
{
text: '右键菜单2'
}
]
});
//右键单击
function rightClickFn(grid,rowindex,e){
e.preventDefault();
rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
Ext.MessageBox.alert('center','右键选择了');
}
//GridPanel 添加到Panel中去
var panel = new Ext.Panel({
renderTo: 'panel',
title:'panel',
collapsible:true,
width:450,
height:400,
items:[grid] //管理grid
});
}
)
</script>
<body>
<div id='grid'></div>
<div id="panel"></div>
</body>
</html>
扫一扫
2861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
