解决ExtJS5中selection无法选中记录的经验

最近在使用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绑定了storeselection

    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,这样就能找到了。

猜你喜欢

转载自blog.csdn.net/weixin_39389850/article/details/79424097