如何在 Sencha Touch 中为列表使用自定义 gif 加载器？

Question

当您在 Sencha 中使用Ext.dataview.List 时，它会在数据加载时自动插入一个漂亮的加载微调器。这一切都很好，花花公子，但我想知道如何使用自定义加载器.gif。

我环顾四周，认为我需要更改负载掩码，但不是积极的，因为我是新手。见this link。

以下是我的列表之一的代码。我希望能够将建议的代码添加到一个地方，以便所有列表都受到影响并拥有新的微调器。

    {
        xtype: 'list',
        height: '',
        id: 'categoryList',
        itemId: '',
        width: '100%',
        scrollable: false,
        emptyText: '<div class="pdtsListHtml" style="margin-top:30%">Product List Empty</div>',
        itemTpl: [
          '<div ><div class="pdtsListHtml" style="display:inline;">{navigationElementItemName}&nbsp;({navigationElementItemRecordCounts})</div><div style="display:inline;float:right;margin-right:5px;"><img src="resources/image/arrow.png" width="11" height="11"></div></div>'
        ],
        store: 'productListStore',
        allowDeselect: true,
        onItemDisclosure: false
      }

Answer 1

这是一个fiddle，它向您展示了一个带有使用 gif 的加载掩码的示例列表。

基本上你应该定义自己的Ext.LoadMask 子类并在列表中使用它：

Ext.define("Test.MyLoadMask", {
    extend: "Ext.LoadMask",
    alias: "widget.myloadmask",
    getTemplate: function() {
        var prefix = Ext.baseCSSPrefix;

        return [
            {
                reference: 'innerElement',
                cls: prefix + 'mask-inner',
                children: [
                    {
                        reference: 'indicatorElement',
                        cls: prefix + 'loading-spinner-outer',
                        children: [
                            { tag: 'img', src: "http://example.com/my-spinner.gif" }
                        ]
                    },
                    {
                        reference: 'messageElement'
                    }
                ]
            }
        ];
    }
});

那么你应该在你的列表中定义一个applyMasked，修改xtype并将其设置为myloadmask而不是loadmask。