Css 将selectedItemCls添加到DataView ExtJS的第一项

我有一个ExtJSDataView，它的项目有以下模板

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

{title}

现在，我已经设置了

selectedItemCls

config，并选择了值

item

，在我的样式表中相应地设置了样式。当我单击dataview中的项目时，它工作正常，选中的项目高亮显示。但我希望在默认情况下选择dataview的第一个项（这样就选择了

项

类）

我试图在dataview组件的

afterrender

事件中处理该组件，但无法将活动类添加到第一项中

更新

请注意，我希望保持类的切换行为，因此当呈现dataview并且用户单击其他项时，第一个项（以编程方式添加的

tab selected

）不再突出显示，并且单击的项将获得

tab selected

class

到目前为止，我尝试在

afterrender

事件中调用

dataview.selModel.select（dataview.Store.getAt（0））

，令人惊讶的是，它在调试时工作（在

afterrender

事件中中断执行并逐步进行）但是它抛出了未捕获的TypeError：如果我在没有打开DevTools的情况下尝试，则无法调用null的方法addCls。我认为这是由于事件冒泡，因为

select（）

也会在内部触发

itemclick

和

selectionchange

事件（不过我可能是错的）

另外，使用Chrome进行调试

如何做到这一点？

试试这个：

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>,
)

试试这个：

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>,
)

---

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

当使用

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

---

我使用了第二个选项，效果非常好，不过，欢迎您提出更好的建议。

经过一个多小时的努力，我找到了解决方案

当使用

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

---

我使用了第二个选项，效果很好，不过，欢迎您提出更好的建议。

但这会保持类的切换行为吗？i、 e.当我从同一列表中选择其他项目时，它应该从第一个项目中删除

tabselected

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

tabselected

class。你在问题中没有提到这一点，但我在答案中添加了另一种可能性。尝试了你的第二个建议，也不起作用，我已经更新了我的问题。