2

我有一个列表组件，我想显示一个按钮，以便在没有结果的情况下发送关于要包含的数据的建议。

List 组件本身是这样实现的：

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

4

2 回答 2

1

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

于 2013-01-15T08:01:06.867 回答
1

我知道这已经晚了大约 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'。 如果是 me，我会给你的 html 一个额外的类，用作委托，这有助于更好地识别它，而不是仅仅使用默认的 Sencha 类作为你的委托。这是意见，不是要求。

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

于 2015-04-08T16:12:17.640 回答