将 selectedItemCls 添加到 DataView ExtJS 的第一项答案

【问题标题】：Add selectedItemCls to First Item of DataView ExtJS将 selectedItemCls 添加到 DataView ExtJS 的第一项
【发布时间】：2013-08-14 07:44:11
【问题描述】：

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

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

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

我尝试在其 afterrender 事件中使用 dataview 组件，但我无法将活动类添加到第一项。

更新

请注意，我想保持类的切换行为，因此当呈现数据视图并且用户单击其他项目时，第一个项目（tab-selected 以编程方式添加）不再突出显示并且单击的项目获得tab-selected类。

到目前为止，我尝试在afterrender 事件中调用dataview.selModel.select(dataview.Store.getAt(0))，令人惊讶的是，它在调试时工作（在afterrender 事件中中断执行并逐步进行）但如果我尝试它会抛出Uncaught TypeError: Cannot call method 'addCls' of null它没有打开 DevTools。我相信这是由于事件冒泡，因为select() 也会在内部触发itemclick 和selectionchange 事件（不过我可能错了）。

附：使用 Chrome 进行调试。

如何做到这一点？

【问题讨论】：

标签： css extjs extjs4 dataview

【解决方案1】：

试试这个：

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));
    }
}

【讨论】：

但这会保持类的切换行为吗？即当我从同一个列表中选择其他项目时，它应该从第一个项目中删除 tab-selected 类。
您没有在问题中提到这一点，但我在答案中添加了另一种可能性。 HTH。
试过你的第二个建议，也不管用，我已经更新了我的问题。

【解决方案2】：

折腾了一个多小时后，我找到了解决办法！

当使用afterrender 事件时，DataView 在技术上并未完全呈现在 UI 上，调用 select() 将触发 itemclick 事件但 UI 上没有任何内容，因此它会导致我得到的 TypeError（我'我仍然不能 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));
    }
}

我使用了第二个选项，效果很好，但是，欢迎任何更好的建议。

【讨论】：