3

Sencha でを使用するExt.dataview.Listと、データのロード中にナイス ロード スピナーが自動的に挿入されます。それはそれでいいのですが、カスタム ローダーの使い方を知りたい.gifです。

私は周りを見回して、ロードマスクを変更する必要があると思いますが、これに慣れていない積極的な原因ではありません。このリンクを参照してください。

以下は、私のリストの 1 つのコードです。すべてのリストが影響を受け、新しいスピナーを持つように、提案されたコードを 1 か所に追加できることを望んでいます。

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

1 に答える 1

3

これは、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リストに定義する必要があります。xtypemyloadmaskloadmask

于 2012-12-19T14:00:37.593 に答える