Question

我有一个列表组件，我想显示一个按钮，如果没有结果，就会发送包含数据的建议。

列表组件本身的实现方式如下：

        {
            xtype: 'list',
            itemTpl: '{name}',

            // This is not ideal!
            emptyText: [
                '<div class="x-button-normal x-button">',
                    '<span class="x-button-label">',
                        'Suggest <i><span id="suggest-name"></i>',
                    '</span>',
                '</div>'
            ].join(''),

            store: 'TheStore'
        }

这是搜索字段的处理程序，只需在商店中设置子字符串过滤器：

        'keyup': function(self, e, eOpts) {
            queryString = self.getValue();
         
            var store = Ext.getStore('TheStore');
            store.clearFilter();
         
            if(queryString){
                var thisRegEx = new RegExp(queryString, "i");
                store.filterBy(function(record) {
                    if (thisRegEx.test(record.get('name'))) {
                        return true;
                    };
                    return false;
                });
                // Changes the button so it shows name
                document.getElementById('suggest-name').innerText = queryString;
            }
        },

现在，我将emptyText设置为一些模拟Sencha Touch按钮外观的简单HTML，但这意味着我没有任何按钮行为，因为它没有绑定到组件系统（例如在点击时被按下）。如何设置emptyText属性（或模拟它），因为显示正确的按钮？

Answer 1

尝试查看下面的两个截屏视频

Answer 2

我知道这已经晚了2年......但是我遇到了与@Hampus Nilsson相同的问题，当我找到解决方案时，我想如果我在2年后遇到这个问题，其他人可能会遇到这个问题。好。

据说......我正在运行 Sencha Touch 2.3.1版本。与该版本相关的解决方案非常容易实现，只是非常难以找到。问题是Sencha在emptyText组件（x-list-emptytext类）上有一个CSS属性，它忽略了所有名为pointer-events: none;的指针交互（谁知道？！）

此属性位于：

[sdk_root] /resources/themes/stylesheets/sencha-touch/base/src/dataview/_List.scss

.x-list-emptytext {
        text-align: center;
        pointer-events: none;  // THIS ONE!!
        font-color: #333333;
        @include st-box();
        @include st-box-orient(vertical);
        @include st-box-pack(center);
}

要解决此问题，只需在您自己的sass / css中覆盖该属性即可。我选择用pointer-events: inherit;覆盖它，但你的里程可能会有所不同。

那么，您需要做的就是在列表中设置一个监听器，我建议在列表类的初始化函数中，如下所示：

this.emptyTextCmp.element.on({
    delegate: '.x-button-normal',
    scope: this,
    tap: this.yourCustomFunction
});

this是您的列表组件。重要的是要注意你需要一个“。”在你的代表的类名前面。在上面的例子中，我将委托设置为：'。x-button-normal'，因为这是问题代码中列出的两个类之一。我也可以使用'.x-button'。 如果是我，我会给你的html一个额外的类，用作代表，这有助于更好地识别它，而不是仅使用默认的Sencha类作为你的委托。这是一种意见，而非要求。

就是这样，我希望这有助于其他人！

Sencha Touch 2组件列表为emptyText

2 个答案: