问题描述
如何在EXTJS现代工具包中获取选定网格行的记录,但是当侦听器使用委托事件时? 我在网格组件中添加了适当的侦听器,它提供了有关所选 div 的信息,但这完全没用,除非知道单击记录的信息。 在经典的 tolkit 中,有类似“record,data”和“recordindex”之类的东西,但我在现代工具包中没有看到类似的东西。
var store = Ext.create('Ext.data.Store',{
fields: [{
name: 'name1',type: 'string'
},{
name: 'name2',type: 'string'
}],data: [{
name1: 'John',name2: 'Smith',}],});
Ext.create('Ext.Container',{
renderTo: Ext.getBody(),height: 700,items: [{
xtype: 'grid',cls: 'grid',//rowLines: false,store: store,columns: [{
text: '',xtype: 'templatecolumn',cell: {
encodeHtml: false
},tpl: new Ext.XTemplate(
'<div class="grid-Box">','<div class="name">{name1}</div>','<div class="name">{name2}</div>','</div>',),flex: 1
}],listeners: {
click: {
element: 'element',delegate: 'div.grid-Box',fn: function (a,b,c) {
debugger;
console.log(a,c);
}
}
}
}]
});
CSS
.grid .x-show-selection > .x-listitem.x-selected {
background-color: pink;
}
.grid .x-show-selection > .x-listitem.x-selected {
background-color: pink;
}
.grid .x-listitem {
background-color: #a9f1ad;
}
.grid-Box {
background: #fff;
border: 1px solid #cbd2d6;
padding: 15px;
height: 100%;
}
.grid .x-gridcell-body-el {
padding: 5px 0px 5px 10px;
}
.name {
font-size:22px;
line-height:22px;
}
解决方法
在包装器 div 属性中存储 recordId 并在点击处理程序中读取它:
var store = Ext.create('Ext.data.Store',{
fields: [{
name: 'name1',type: 'string'
},{
name: 'name2',type: 'string'
}],data: [{
name1: 'John',name2: 'Smith',},{
name1: 'Muster',name2: 'Mustermann',}],});
Ext.create('Ext.Container',{
renderTo: Ext.getBody(),height: 700,items: [{
xtype: 'grid',cls: 'grid',//rowLines: false,store: store,columns: [{
text: '',xtype: 'templatecolumn',cell: {
encodeHtml: false
},tpl: new Ext.XTemplate(
'<div class="grid-box" recordId={id}>',// Store recordId in div attribute
'<div class="name">{name1}</div>','<div class="name">{name2}</div>','</div>',),flex: 1
}],listeners: {
click: {
element: 'element',delegate: 'div.grid-box',fn: function (a,b,c) {
var grid = Ext.getCmp(this.id),store = grid.getStore(),record = store.getById(b.getAttribute('recordId'))
console.log(record.getData());
}
}
}
}]
});