extjs6 表格里面的点击事件怎么写
时间: 2024-05-05 10:15:07 浏览: 244
在ExtJS6中,可以通过给表格添加监听器来处理点击事件。以下是一个示例代码:
```
Ext.create('Ext.grid.Panel', {
title: 'My Grid Panel',
store: myStore,
columns: [
{text: 'Name', dataIndex: 'name'},
{text: 'Email', dataIndex: 'email'},
{text: 'Phone', dataIndex: 'phone'}
],
listeners: {
itemclick: function(grid, record, item, index, e, eOpts) {
// 处理点击事件逻辑
}
},
renderTo: Ext.getBody()
});
```
在上面的代码中,我们给表格添加了一个`itemclick`监听器。当用户点击表格中的任何一行时,该监听器将被触发,并将以下参数传递给处理函数:
- `grid`:表格本身的引用
- `record`:被点击行所对应的数据记录
- `item`:被点击的表格行的DOM元素
- `index`:被点击的行的行号
- `e`:浏览器事件对象
- `eOpts`:配置项对象
您可以在监听器函数中编写您的逻辑代码,以响应点击事件。
相关问题
extjs6写一个表格内点击事件的案例
当然,我很乐意帮您回答关于编程方面的问题。以下是一个extjs6写一个表格内点击事件的案例的示例代码:
```javascript
Ext.create('Ext.grid.Panel', {
title: 'Example Grid',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224'},
{name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234'},
{name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244'},
{name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254'}
]
}),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
listeners: {
itemclick: function(dv, record, item, index, e) {
Ext.Msg.alert('You clicked', record.get('name'));
}
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
```
在这个例子里,我们创建了一个包含了一个简单的表格的ExtJS面板。在表格的定义上,我们指定了一个名为“itemclick”的事件监听器。这个事件会在用户点击表格的行时触发,同时会通过Ext.Msg.alert方法展示出对应行的姓名。
阅读全文