3

When you use the Ext.dataview.List in Sencha, it automatically inserts a nice loading spinner while the data is loading. That's all fine and dandy, but I'd like to know how to use a custom loader .gif.

I've looked around and think I need to change the loadmask but not positive cause I'm new to this. See this link.

Below is the code for one of my Lists. I'm hoping to be able to add the code suggested to one place so that all lists are affected and have the new spinner.

    {
        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
      }
Alex
  • 113
  • 3
  • 10
  • 1
    You could override `Ext.LoadMask` with a custom `html` config that has the `` that points to your gif, but then it would apply to all the load masks in your app. – Attila O. Dec 19 '12 at 13:36

1 Answers1

3

Here's a fiddle that shows you an example list with a loading mask that uses a gif.

Basically you should define your own Ext.LoadMask subclass and use it on the list:

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'
                    }
                ]
            }
        ];
    }
});

Then you should define an applyMasked on your lists that modifies the xtype and sets it to myloadmask instead of loadmask.

Attila O.
  • 15,659
  • 11
  • 54
  • 84
  • I think I understand the second part in the fiddle example. But the code above is where I'm lost. Where would I put that? Make a new container and Create Override in Architect to allow me to insert that code? – Alex Dec 19 '12 at 19:14
  • @AlexMcNeal sorry I haven't used Architect so I don't know how to do it there. The above is just a custom component, which I assume there is a way to create somehow in the Sencha Touch Architect. – Attila O. Dec 26 '12 at 16:20