<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>
分享到:
相关推荐
在ExtJS4中实现表格的嵌套使用rowExpander插件是一项非常实用的技术,它允许我们为表格中的每一行添加一个可展开的详细信息区域。该功能通过一个简单的“+”号来标识,用户点击即可展示子表格,子表格数据可动态从...
这本书为读者提供了一系列的实例,通过这些实例,读者可以逐步学习EXTJS的核心概念和技术。 **EXTJS 3.0核心概念** 1. **组件(Components)**:EXTJS的基础是组件模型,包括面板(Panel)、窗口(Window)、表格...
接着,使用`for`循环将表头`heads`添加到工作表的第一行,然后用嵌套的`for`循环将`datalist`中的数据逐行写入工作表。 在设置完所有单元格后,需要设置HTTP响应的头部信息,`Content-disposition`用于指示浏览器以...
ExtJS 是一种强大的JavaScript库,专门用于构建富客户端应用程序,特别是Web应用。在ExtJS中,布局管理是至关重要的部分,因为它决定了用户界面组件如何在容器内排列和展示。布局管理器负责根据指定的布局类型调整和...
例如,第一行可能表示大类,第二行可能是子类,以此类推。 “锁定多列”则是指在表格滚动时,保持某些列(如列标题或关键列)始终可见。这在处理大量数据时非常有用,因为它允许用户在滚动查看数据时,依然能保持对...
1. **组件化开发**:ExtJS 2.0 强调组件化编程,提供了一系列可复用的UI组件,如表格、面板、表单、树形结构等,方便开发者构建复杂的用户界面。 2. **数据绑定**:2.0版本引入了强大的数据绑定机制,允许组件与...
EXTjs,全称为EXT JavaScript Library,是一个功能丰富的前端JavaScript库,尤其在构建桌面级Web应用程序时表现出色。EXT2.0作为EXTjs的一个早期版本,虽然现在已经被更现代的EXT版本取代,但其核心概念和架构对理解...
ExtJS是一款强大的JavaScript框架,专用于构建富客户端Web应用程序。其强大的组件模型和丰富的API使得开发者可以轻松创建复杂的用户界面。在本说明中,我们将深入探讨ExtJS中的模板(Template)使用,包括其概念、...
ExtJS提供了一套完整的UI组件库,包括表格、树形控件、网格等,支持响应式布局和多浏览器兼容性。 4. **数据库简单的存储过程** - **知识点解析**:存储过程是在数据库中预编译的SQL语句集合,可以在客户端调用以...