View Full Version : [CLOSED] Attached default grid view load mask to different el

Mar 28, 2014, 10:15 AM

Is there a simple way to attached the default grid view load mask to a different el?

<ext:GridView ID="gvContacts" runat="server" LoadMask="true" LoadingText="Loading Contacts....." >

I tried setting load mask to false and using various listening to show the mask manually but failed.

So something like

<ext:GridView ID="gvContacts" runat="server" LoadMask="true" LoadingText="Loading Contacts....." MaskEL="My panel">


Mar 28, 2014, 2:47 PM
Hi @CanopiusApplications,

I don't see a way in API to change a mask element.

Please look at how it is implemented:

I think you could configure your own mask in the same way in a GridView's Render listener.

Mar 28, 2014, 3:04 PM
Hi CanopiusApplications,

you could define something like this in your grid-store listeners:

<BeforeLoad Handler="var myPanel = Ext.getCmp('Panel1');myPanel.getEl().mask('Loading Contacts.....');" />

<Load Handler="var myPanel = Ext.getCmp('Panel1');myPanel.getEl().unmask();" />

Mar 28, 2014, 3:34 PM
Thanks lads.

Blueworld that is good thinking -- did not think about using the store listeners, initial tests look as though the store listeners will do the trick.


May 04, 2016, 5:39 PM
I am a bit late ...

At line 21, i added a maskTarget config, that is used in LoadMask's Constructor, lines 6 to 11.

Hope it helps :)

<!DOCTYPE html>
<head id="Head1" runat="server">
<script type="text/javascript">
constructor: function (config) {
if (config.target.maskTarget) {
config.target = Ext.ComponentManager.get(config.target.maskTarget) ;
<ext:ResourceManager ScriptMode="Debug" Theme="Gray" runat="server" />
<ext:GridPanel ID="_grd" Title="Ext.Net" Width="500" Height="500" runat="server">
<ext:GridView runat="server">
<ext:ConfigItem Name="maskTarget" Value="_grd" Mode="Value" />
<ext:Store AutoLoad="true" runat="server">
<ext:AjaxProxy Url="~/Example/LoadFakeRecords/" StartParam="start" LimitParam="limit" PageParam="page">
<ActionMethods Read="POST" />
<ext:JsonReader RootProperty="data" />
<ext:Model IDProperty="ID" runat="server">
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
<ColumnModel runat="server">
<ext:Column Text="ID" DataIndex="ID" runat="server" />
<ext:Column Text="Name" DataIndex="Name" runat="server" />
<ext:PagingToolbar DisplayInfo="true" runat="server" />

namespace SandBox.Controllers
public class ExampleController : System.Web.Mvc.Controller
public ActionResult Index() => View();

public StoreResult LoadFakeRecords(int start, int limit, int page)

List<Person> lst = new List<Person>();

for (int index = start; index < (page * limit); index++)
lst.Add(new Person
ID = index,
Name = $"Name - {index}"
return new StoreResult(lst, (page * limit) + limit);

public class Person
public int ID { get; set; }

public string Name { get; set; }