PDA

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



CanopiusApplications
Mar 28, 2014, 11:15 AM
Guys

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



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


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

So something like



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


Ta,
D

Daniil
Mar 28, 2014, 3:47 PM
Hi @CanopiusApplications,

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

Please look at how it is implemented:
http://docs.sencha.com/extjs/4.2.1/source/AbstractView.html#Ext-view-AbstractView-method-onRender

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

blueworld
Mar 28, 2014, 4: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();" />

CanopiusApplications
Mar 28, 2014, 4: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.

Ta,
D

RaphaelSaldanha
May 04, 2016, 6: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>
<html>
<head id="Head1" runat="server">
<script type="text/javascript">
Ext.LoadMask.override({
constructor: function (config) {
if (config.target.maskTarget) {
config.target = Ext.ComponentManager.get(config.target.maskTarget) ;
}
this.callParent(arguments);
}
});
</script>
</head>
<body>
<ext:ResourceManager ScriptMode="Debug" Theme="Gray" runat="server" />
<ext:GridPanel ID="_grd" Title="Ext.Net" Width="500" Height="500" runat="server">
<View>
<ext:GridView runat="server">
<CustomConfig>
<ext:ConfigItem Name="maskTarget" Value="_grd" Mode="Value" />
</CustomConfig>
</ext:GridView>
</View>
<Store>
<ext:Store AutoLoad="true" runat="server">
<Proxy>
<ext:AjaxProxy Url="~/Example/LoadFakeRecords/" StartParam="start" LimitParam="limit" PageParam="page">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader RootProperty="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model IDProperty="ID" runat="server">
<Fields>
<ext:ModelField Name="ID" />
<ext:ModelField Name="Name" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column Text="ID" DataIndex="ID" runat="server" />
<ext:Column Text="Name" DataIndex="Name" runat="server" />
</Columns>
</ColumnModel>
<BottomBar>
<ext:PagingToolbar DisplayInfo="true" runat="server" />
</BottomBar>
</ext:GridPanel>
</body>
</html>




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

public StoreResult LoadFakeRecords(int start, int limit, int page)
{
Thread.Sleep(TimeSpan.FromSeconds(2));

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