Question

我有ExtJS Dataview，其项目有以下模板。

<div class="item-container">
    <div class="{itemCls}"></div>
    <span class="item-title">{title}</span>
</div>

现在，我已将selectedItemCls配置设置为值item-selected，在我的样式表中相应地设置了样式。当我单击dataview中的项目时，它工作正常，并突出显示所选项目。但是我想默认选择我的数据视图的第一项（因此已经添加了item-selected类）。

我尝试在其afterrender事件中玩数据视图组件，但我无法将活动类添加到第一项。

更新

请注意，我想维护类的切换行为，因此当呈现dataview并且用户点击其他项时，第一个项目（以编程方式添加tab-selected）不再突出显示，并且单击项目获取{ {1}}上课。

到目前为止，我尝试在tab-selected事件中调用dataview.selModel.select(dataview.Store.getAt(0))，令人惊讶的是，它在调试时工作（在afterrender事件中执行并逐步执行）但它会抛出afterrender如果我在没有开启DevTools的情况下尝试它。我认为这是因为事件冒泡，因为Uncaught TypeError: Cannot call method 'addCls' of null也会在内部触发select()和itemclick事件（虽然我可能错了）。

P.S。使用Chrome进行调试。

如何实现这一目标？

Answer 1

经过一个多小时的黑客攻击后，我找到了解决办法！

使用afterrender事件时，DataView在技术上尚未在UI上完全呈现，调用select()会触发itemclick事件，但UI上没有任何内容，因此会导致{TypeError 1}}我得到了（我仍然不能100％确定这是否是我得到的TypeError的确切原因。）

所以我有两个可能的修复方法，我更喜欢第二次修复。

选项 - 1

拨打select() 延迟几秒钟。

listeners: {
    afterrender: function(dv) {
        Ext.defer(function() {
            dv.selModel.select(dv.store.getAt(0));
        }, 10); // Some small number for delay will do.
    }
}

选项 - 2（推荐）

使用viewready事件代替afterrender。

listeners: {
    viewready: function(dv) {
        dv.selModel.select(dv.store.getAt(0));
    }
}

我已经使用了第二个选项并且它完美运行，但是，欢迎任何更好的建议。

Answer 2

试试这个：

new Ext.XTemplate(
    '<tpl for=".">',
        '<div class="item-container {[xindex === 1 ? "item-selected" : ""]}">',
            '<div class="{itemCls}"></div>',
            '<span class="item-title">{title}</span>',
        '</div>'
    '</tpl>,
)

你也可以试试这个：

listeners: {
    afterrender: function(dv) {
        dv.selModel.select(dv.store.getAt(0));
    }
}

将selectedItemCls添加到DataView ExtJS的First Item

2 个答案: