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

在Sencha中使用

Ext.dataview.List

时，它会在加载数据时自动插入一个漂亮的加载微调器。这很好，但我想知道如何使用自定义加载程序

.gif

我环顾四周，认为我需要更改loadmask，但不是正面的，因为我是新手。看

下面是我的一个列表的代码。我希望能够将建议的代码添加到一个位置，这样所有列表都会受到影响，并具有新的微调器

    {
        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
      }

{
xtype:'列表'，
高度：''，
id:'类别列表'，
itemId:“”，
宽度：“100%”，
可滚动：false，
emptyText:“产品列表为空”，
第三方物流：[
“{navigationElementItemName}（{navigationElementItemRecordCounts}）”
],
store:'productListStore'，
allowDeselect:正确，
无巩膜：假
}

下面是一个示例列表，其中包含使用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'
                    }
                ]
            }
        ];
    }
});

---

然后，您应该在列表中定义一个修改

xtype

并将其设置为

myloadmask

，而不是

loadmask

，

您可以使用自定义的

html

配置覆盖

Ext.loadmask

，该配置具有指向gif的

，但它将适用于你应用程序中的所有负载掩码。我想我理解fiddle示例中的第二部分。但是上面的代码是我迷路的地方。我该把它放在哪里？创建一个新的容器并在Architect中创建覆盖以允许我插入该代码？@AlexMcNeal抱歉，我没有使用Architect，所以我不知道如何在那里执行。以上只是一个自定义组件，我假设有一种方法可以在SenchaTouchArchitect中创建。