ext.js 中表格,一列中数据跟展示按钮怎么共存?并且点击按钮,出现其他数据
时间: 2024-03-16 15:45:14 浏览: 66
js实现Ext方式的将左表格中的数据移动至右表格
在 Ext.js 中,可以通过使用 Grid 中的列渲染器(renderer)来实现在表格中展示按钮和数据。具体步骤如下:
1. 定义表格的列(column),其中包括需要展示的数据列和按钮列。
```javascript
columns: [
{
text: '数据列',
dataIndex: 'data',
flex: 1
},
{
text: '展示按钮',
xtype: 'actioncolumn',
items: [{
iconCls: 'x-fa fa-eye',
tooltip: '展示其他数据',
handler: function(grid, rowIndex, colIndex) {
// 处理点击事件
}
}]
}
]
```
2. 在按钮列中使用 `xtype: 'actioncolumn'` 来指定使用 ActionColumn 组件来展示按钮。然后在 `items` 中定义展示的按钮,其中包括按钮的图标和点击事件处理函数。
3. 在点击按钮时,可以通过 `handler` 函数来处理点击事件,例如弹出一个窗口来展示其他数据。
```javascript
handler: function(grid, rowIndex, colIndex) {
var record = grid.getStore().getAt(rowIndex);
var data = record.get('otherData');
// 弹出窗口展示数据
Ext.Msg.alert('其他数据', data);
}
```
通过以上步骤,即可实现在 Ext.js 中展示数据和按钮,并且点击按钮展示其他数据的功能。
阅读全文