发现自己自己学习的尽头一直不是很足够，最近又在用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>
分享到：
相关推荐
然而，在实际应用中，可能会遇到一个常见的问题：当GridPanel需要进行第二次加载时，数据或者功能可能会丢失。这个问题主要源于GridPanel的生命周期管理和内存管理机制。为了解决这个问题，我们需要深入理解Ext JS的...
在本文中，我们将深入探讨如何使用ExtJS库中的RowExpander插件来实现在GridPanel中内嵌行内的表格。ExtJS是一个强大的JavaScript框架，它提供了丰富的组件和功能，用于构建复杂的Web应用程序。RowExpander插件是...
在前端开发领域中，Ext JS 是一款非常流行的 JavaScript 框架，用于构建企业级的 Web 应用程序。Ext GridPanel 是该框架中的一个重要组件，常用于展示表格数据。本文将详细介绍如何在 Ext GridPanel 中实现加链接...
在Tapestry 4.02中封装Ext的GridPanel组件，意味着开发者将ExtJS的GridPanel功能集成到Tapestry应用中，使Tapestry应用能够利用GridPanel的强大功能。这个过程通常涉及到以下几个关键步骤： 1. **引入ExtJS库**：...
在实际应用中，Ext Form GridPanel允许用户在表格的每一行中直接编辑数据，提高数据操作的效率。它支持多种编辑模式，如单击编辑、双击编辑或通过工具栏按钮触发编辑。同时，GridPanel提供了丰富的事件监听机制，...
GridPanel 是 ExtJS（Ext.NET 的基础）中的一个重要组件，用于展示数据表格。在这个场景中，我们将深入探讨如何使用Ext.NET代码动态创建GridPanel，并在各种窗口中灵活展示。 1. **动态创建GridPanel**： 在Ext...
EXT GridPanel是EXT JS库中的一个核心组件，用于创建数据密集型的表格视图。它在Web应用程序中常用于展示大量结构化数据，并提供多种交互功能，如排序、分页、筛选和编辑等。在EXT GridPanel中，获取某一单元格的值...
在实际应用中，可能会遇到一些挑战，例如性能问题。因为跨行需要计算每个单元格的rowspan，这可能对渲染速度产生影响。因此，优化渲染逻辑和合理使用缓存策略是必要的。 此外，Ext JS官方文档和其他社区资源（如...
EXTJS是一个基于JavaScript的用户界面库，用于构建富客户端应用。EXTJS的核心是其组件模型，GridPanel就是其中一种非常重要的组件，常用于...配合EXT提供的图片资源，可以帮助理解GridPanel在实际应用中的视觉效果。
本篇文章将深入探讨如何在Ext中修改GridPanel的数据、字体颜色以及应用CSS属性。 首先，修改GridPanel中的数据是通过数据存储（Store）来实现的。Store是GridPanel的数据源，它与服务器端进行交互，加载或更新数据...
JavaScript的Ext JS框架中的GridPanel组件是一个强大的表格展示和管理工具，它允许开发者高效地处理大量数据，并提供了诸如数据排序、分组、编辑等多种功能。GridPanel与TreePanel虽然都有表格展示的功能，但...
在实际应用中，为了提升用户体验和信息传达的准确性，显示toolTip（工具提示）成为了一个不可忽视的功能点。本文将详细解析在EXT中实现DataGrid上显示toolTip的三种方法，并通过一个具体的代码示例来加深理解。 ###...
EXT GridPanel是EXT库中的一个核心组件，它用于显示二维的数据表格。这个组件具有高度可定制性，支持排序、分页、过滤、行编辑等多种功能。EXT2.0版本虽然相对较旧，但对于理解EXT的基础架构和工作原理仍然是有价值...
本话题将深入探讨如何在Ext2.2中使用GridPanel进行分页处理，并结合DWR（Direct Web Remoting）代理来实现数据的异步加载。我们将关注两个数据格式：JavaScript对象（JS对象）和JSON。 首先，Ext2.2的GridPanel是...
ExtJS表格面板（GridPanel）是Sencha Ext JS框架中的一个核心组件，它用于展示大量结构化数据。在本文中，我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例，以及与其相关的源码和工具。 首先，让我们...
在实际应用中，我们经常需要监听用户的交互行为，比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件，并获取双击的行以及选中的复选框状态。 首先，我们要了解GridPanel的基本...
4、在工程中找到“main.js”文档，该文档中是控制应用显示GridPanel和TreePanel示例的开关 5、在IE的地址栏输入“http://localhost:8080/GridPanel”之后回车 6、如果一切正常，你会看到可以分页的表格；调整main.js...
例如，EXT的GridPanel允许开发者创建数据驱动的表格，支持排序、分页和行编辑等功能。TreePanel则用于展示层次结构的数据，支持动态加载和拖放操作。 EXT 3.0的布局管理器也是一个关键特性，它能自动管理组件的尺寸...