[Ext JS]嵌套Grid的实现及注意事项| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]嵌套Grid的实现及注意事项

## [Ext JS]嵌套Grid的实现及注意事项
### 嵌套网格的效果
嵌套网格（Nest Grid） 是每个Grid的行展开后是一个子Grid， 实现的效果如下图：
![](/upload/picture/2022-10-09/upload_adfb843d4954665301958c90ca4a4a84.png)
### 嵌套网格的实现
Ext JS 直接提供了嵌套网格的实现， 即通过Grid的插件 Ext.grid.plugin.RowWidget 达成。这个插件继承自
Ext.grid.plugin.RowExpander ， 也就是展开Grid的行展开插件。
以上效果的实现代码如下：
```javascript
{   
xtype: 'grid',    
title:'嵌套网格',    
columns: [{      
text: '王国',          
dataIndex: 'country',   
flex:1   
}, {     
text: '都城',       
dataIndex: 'capital',   
flex:1    
}],      
store: [{ 
country: '魏国', 
capital: '洛阳' ,
generals: [{ 
name:'典韦', 
rank: '上将' 
}, {
name: '许楮', 
rank: '上将' 
}]}, { 
country: '蜀国', 
capital: '成都', 
generals: [{ 
name: '关羽', 
rank: '上将' 
}, { 
name: '张飞', 
rank: '上将' 
}] }, { 
country: '吴国', 
capital: '建业' 
}],        
plugins: { 
rowwidget: {    
widget:{      
xtype: 'grid',    
bind: {     
store: '{record.generals}', 
title: '武将表'     
},      
columns: [{     
text: '姓名',     
dataIndex: 'name' 
}, {             
text: '等级',     
dataIndex: 'rank'
}]              
}          
}    
}   
}
```

通过plugins 属性增加rowwidget 插件
rowwidget 中使用widget定义行的组件是 Grid。该Grid的Store 使用绑定的方式绑定上层Grid数据的generals属性，
### 默认展开所有行
以上实现的嵌套Grid 的下一级Grid默认是收合的，Ext JS的 API 文档没有找到某人展开行的配置或方法， 但是从源码中可以找到 方法toggleRow(rowIdx, record) 可以实现展开行。
该方法有两个参数， rowIdx 是该行的序号， record是该行的数据对象。
实现的代码片段如下：
```javascript
var grid = thisBtn.findParentByType('grid');
var rowwidgetPlugin = grid.getPlugin('rowwidget');
var store = grid.getStore();
for(let i=0;i
```

在线演示
https://osxm.github.io/extjs_dev_ency/#nestgriddemo

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]嵌套Grid的实现及注意事项

网站导航