0

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

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

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

我试图在它的事件中播放 dataview 组件，afterrender但我无法将活动类添加到第一项。

更新

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

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

PS 使用 Chrome 进行调试。

如何做到这一点？

4

2 回答 2

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

我使用了第二个选项，它工作得很好，但是，欢迎任何更好的建议。

于 2013-08-14T12:49:24.793 回答
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));
    }
}
于 2013-08-14T11:20:14.233 回答