<script type="text/javascript">
Ext.onReady(function(){
var testData=[
["lug","男",26,[["数学",100],["语文",150]]]
,["lisi","男",25,[["数学",100],["语文",150]]]
,["zhang","男",27,[["数学",120],["语文",158]]]
];
//
storeTest= new Ext.data.SimpleStore({
fields: ["name","sex","age","grade"]
,data: testData
});
var expander = new Ext.grid.RowExpander({
tpl : new Ext.XTemplate(
'<div class="detailData">',
'',
'</div>'
)
});
expander.on("expand",function(expander,r,body,rowIndex){
//查找 grid
window.testEle=body;
//alert(body.id);
if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){
//alert("a");
var data=r.json[3];
var store=new Ext.data.SimpleStore({
fields: ["class","degrade"]
,data:data
});
var cm = new Ext.grid.ColumnModel([
{header: "科目",dataIndex: 'class',width: 130,hideable:false,sortable:false,resizable:true}
,{header: "成绩",dataIndex: 'degrade',width: 130,hideable:false,sortable:false,resizable:true}
]);
Ext.DomQuery.select("div.detailData")[0];
var grid = new Ext.grid.GridPanel(
{
store:store,
cm:cm,
renderTo:Ext.DomQuery.select("div.detailData",body)[0],
autoWidth:true,
autoHeight:true
}
);
}
});
//var sm=new Ext.grid.CheckboxSelectionModel({singleSelect:true});
var cm = new Ext.grid.ColumnModel([
expander
,{header: "姓名",dataIndex: 'name',width: 50,hideable:false,sortable:false}
,{header: "性别",dataIndex: 'sex',width: 130,hideable:false,sortable:false,resizable:true}
,{header: "年龄",dataIndex: 'age',width: 130,hideable:false,sortable:false,resizable:true}
]);
var grid = new Ext.grid.GridPanel(
{
id:'testgrid',
store:storeTest,
cm:cm,
renderTo:"grid1",
width:780,
autoHeight:false,
height:300,
listeners:{},
plugins:[expander]
}
);
});
</script>
分享到:
相关推荐
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
### ExtJs表格点击超链接获取行的值:深入解析与应用 #### 一、ExtJs表格超链接渲染 在ExtJs框架中,我们经常需要在表格(`Ext.grid.Panel`)中显示超链接,并且当用户点击这些超链接时,能够获取到当前行的数据。...
ExtJS 是一个强大的JavaScript应用程序框架,专用于构建富客户端Web应用。它提供了丰富的组件库,包括弹窗(Window)组件,使得开发者可以方便地创建具有交互性和动态效果的用户界面。在“extjs 弹窗的简单实例”中...
只要将解压的文件直接放置到myeclipse的webroot下面,启动tomcat访问。简单的EXTJS mvc框架,设计 store,model,controller,view,window等等,同时展示了一些基本的点击显示、修改等等操作,需要的同学自行下载
ExtJS入门实例、包含各种详细代码,非常适合初学者学习
ExtJS是一款强大的JavaScript库,用于构建富客户端应用程序,其表格组件是功能丰富的数据展示工具。在开发过程中,我们可能会遇到需要合并表格单元格的情况,例如为了创建复杂的报表或呈现层次结构的数据。 表格...
动态生成表格是ExtJS中的一个重要功能,它允许开发者根据需求灵活地构造表格结构和数据。 首先,我们需要了解ExtJS中的核心组件之一——GridPanel。GridPanel是一个显示二维数据的组件,通常用于展示大量结构化的...
资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...
6. **嵌套表格的创建**:当用户点击行展开图标时,可以通过定义的函数(如displayInnerGrid)创建一个嵌套的表格。在这个函数中,可以定义子表格的数据模型TestModel和数据dummyDataForInsideGrid。 7. **事件处理*...
ExtJs的页面布局、界面设计的源码 直接运行index.html可看效果,源码在里面
ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件库,包括用于创建类似Excel的表格的功能。在本文中,我们将深入探讨如何使用ExtJS来模拟Excel表格,以及实现Excel的各种功能...
下面我们将深入探讨EXTJS构建矩阵表格的步骤和涉及的技术点。 1. **创建数据存储(Store)**: - `TMstore` 是一个包含整个矩阵数据的主Store,通过HttpProxy连接到服务器端的'json/getMatrixInfo.do'获取数据,...
利用ext的grid、form等组件实现了对学生信息的增删改查。并用饼状图对学生的男女比例进行了统计。
在这个"extjs动态表格实例"中,我们将探讨如何使用ExtJS封装Grid并从Struts2框架的后台获取数据。 首先,让我们了解ExtJS中的Grid组件。Grid是ExtJS的一个关键组件,它用于展示结构化数据,并支持多种操作,如排序...
ExtJs学习实例ExtJs学习实例ExtJs学习实例
ExtJs 是一个强大的JavaScript框架,主要用于构建富互联网应用程序(Rich Internet Applications, RIA)。它提供了丰富的组件库,包括网格、表单、面板、菜单、工具栏等,支持创建复杂的、桌面应用级别的用户界面。...
ExtJS与.NET结合开发实例ExtJS与.NET结合开发实例
使用extjs实现的超炫后台模版下载实例 整理测试了很久特来贡献
ExtJs是一种基于JavaScript的富客户端应用开发框架,用于构建交互式和复杂的Web应用程序。它提供了大量的组件和功能,包括布局管理、数据绑定、表格、菜单、工具提示等,使得开发者可以构建具有桌面应用般用户体验的...