What's New?

[CLOSED] Attached default grid view load mask to different el

  1. #1
    Mar 28, 2014, 10:15 AM

    [CLOSED] Attached default grid view load mask to different el

    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
    Last edited by Daniil; Mar 28, 2014 at 3:40 PM. Reason: [CLOSED]
  2. #2
    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:
    http://docs.sencha.com/extjs/4.2.1/s...ethod-onRender

    I think you could configure your own mask in the same way in a GridView's Render listener.
  3. #3
    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();" />
  4. #4
    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.

    Ta,
    D
  5. #5
    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>
<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; }
    }
}
    Last edited by RaphaelSaldanha; May 04, 2016 at 5:50 PM.

Similar Threads

  1. [CLOSED] Load Mask Not displaying on Grid Panel data load
    By WHISHWORKS in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 17, 2013, 3:44 PM
  2. [CLOSED] grid.view.refreshRow calls grid.view.refresh(false) - HUGE PERF ISSUE
    By jchau in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 27, 2013, 6:07 AM
  3. Delete from Grid with Object Data Source attached
    By ambruslaco in forum 1.x Help
    Replies: 3
    Last Post: Dec 13, 2012, 7:17 AM
  4. [CLOSED] Grid Panel Masking Position is incorrect, Attached sample
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 10, 2011, 9:46 AM
  5. Tree grid view following javascript come during page load
    By rajputamit in forum 1.x Help
    Replies: 2
    Last Post: Oct 29, 2010, 10:04 AM

Posting Permissions