最近在使用ExtJS5,在使用grid选中数据操作时,发现记录一直是NULL,查阅了各种资料和现有工程,无果。请教大牛,最后解决问题,为了防止在之后出现这种情况,同时给有相同困惑的童鞋一些启示,就再次记录一下。
首先,要选中一条记录,需要在grid插件上绑定selection:{‘selItem’}这个属性。配置该选项之后,在点击数据时,会把该条记录赋值给selItem这个变量(姑且理解为变量),在之后的使用中,使用this.getViewModel.get(“selItem”)就可以获得该记录了。
理论如此,但是在实际操作中,却出现了NULL值的问题。
先附上我的代码
xtype: 'grid',
columnLines: true,
bind: {
store: '{store1}',
selection: '{selItem}'
},
columns: [],
reference: 'grid',
pageSize:5,
dockedItems:[{
xtype:'pagingtoolbar',
bind: {store: '{store1}'},
dock:'bottom',
displayInfo:true,
}]
这是一个简单的grid插件的例子,其中通过bind绑定了store和selection。
var me = this;
console.log('me:',me);
console.log('vm:',me.getViewModel());
var selItem = me.getViewModel().get("selItem");
alert(selItem);
这是测试能否获得记录数据的代码,在运行之后,发现数据为null,同时在console出的viewModel中没有发现selItem这个对象,但存在store1这个对象,这说明bind时起作用了,但是selection没有起效。
怀疑可能是未寻找到该组件,于是往此方向探究。
发现了关键字reference。在Ext JS 5可以使用新的reference配置项来实现,只需要添加reference到网格。
于是在原代码中添加reference: ‘grid’,就解决了该问题。
大概是因为系统在运行中找不到该组件,需哦一需要通过reference关键字添加引用,也就是一个内部的ID,这样就能找到了。