The official release of Ext.NET Mobile is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read More

Panel.Loader on Mobile

  1. #1

    Panel.Loader on Mobile

    Hi all,
    Thanks for impressive mobile framework,

    We started to develop our Asp.Net MVC Ext.Net project's mobile interface,
    We try to use Ext.Net and Ext.Net.Mobile together on same project, i will share my experiences in the future,

    We have used Panel's Loader (and ComponentLoader) for dynamic render on WebUI but we couldn't find Loader on Mobile Panel,

    How can we achieve the same approach on mobile?
    Can you inform and show an example for this issue?

    Thanks all
  2. #2
    Hello @unicorn64!

    I did a check up on the Sencha docs on ExtJS's (underlying Ext.NET framework) modern toolkit new release for the corresponding setting on the panel in hopes they would be introducing this on the current version but turned out that's not the case yet.

    So, the panel currently supports no component loader. In fact, if you check the Sencha documentation, there's no Ext.ComponentLoader on the modern framework at all. Notice Ext.NET Mobile is currently on version 4.1.0 (ExtJS 6.0.2 -- we're working on 6.2.0), while Ext.NET is already updated to 4.2.0 (ExtJS 6.2.1).

    Although Ext.NET Mobile 4.2.0 (ExtJS 6.2.1) would introduce several new components, it was not this time they added the ComponentLoader. But that's a possibility that they'd going to introduce this soon, as there's a tendency of Sencha to be merging classic ("desktop") features into modern (mobile) toolkit.

    - ExtJS 6.2.1 modern toolkit documentation -- no Ext.ComponentLoader on the list of classes.
    - ExtJS 6.2.1 classic toolkit documentation on the Ext.ComponentLoader class. Having something in the classic toolkit does not imply it is supported but it suggests a desire of having that functionality supported on modern as soon as possible.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    thanks for reply @fabricio.murta

    When I saw ComponentLoader class on Ext.Net.Mobile, and couldn't find Panel's Loader, I thought maybe it could be done with a different approach.

    So how can i have same functionality which ComponentLoader does, can you give me a suggestion?
  4. #4
    I think I found a way, but i'm not sure,
    I tried to find a way using views that uses Ext.Net controls, i hope it works on Et.Net.Mobile controls too,
    I make my action as DirectMethod and return Ext.Net.MVC.PartialViewResult with WrapByScriptTag = true
    on my panels show listener i call direct method, and it seemed to work

    my previous view was like
    @(
      Html.X().TabPanel()
              .ID("pnlTab")
              .Items( 
                     Html.X().Panel().ID("pnlTab1")              
                         .Items( 
                              // Tab1 Items
                         ),
                     Html.X().Panel().ID("pnlTab2").AutoScroll(true)                         
                         .Loader(
                              Html.X().ComponentLoader()
                                  .Mode(LoadMode.Script)
                                  .Url(Url.Action("_PnlTab2"))
                                  .Params(new { containerId = "pnlTab2" })
                                  .LoadMask(lm => lm.ShowMask = true)
                         )
                )                         
    )
    and action was like,
    public ActionResult _PnlTab2(string containerId)
    {
        var pvr = new Ext.Net.MVC.PartialViewResult(containerId)
        {
            WrapByScriptTag = false,
            ClearContainer = true,
            RenderMode = RenderMode.AddTo,
    
        };
        return pvr;
    }
    i marked action as DirectMethod, and set WrapByScriptTag = true

    [DirectMethod]
    public ActionResult _PnlTab2(string containerId)
    {
        var pvr = new Ext.Net.MVC.PartialViewResult(containerId)
        {
            WrapByScriptTag = true,
            ClearContainer = true,
            RenderMode = RenderMode.AddTo,
    
        };
        return pvr;
    }
    and modified view as
    @(
      Html.X().TabPanel()
              .ID("pnlTab")
              .Items( 
                     Html.X().Panel().ID("pnlTab1")              
                         .Items( 
                              // Tab1 Items
                         ),
                     Html.X().Panel().ID("pnlTab2").AutoScroll(true)                         
                         .Listeners(ls => {
                                 ls.Show.Handler = "App.direct._PnlTab2('pnlTab2')";
                                 ls.Show.Single = true;
                         })
                )                         
    )
    when i clicked Tab2 panel, it rendered correctly,
    is this approach correct?
  5. #5
    Hello @unicorn64!

    Yes, using dynamic partial rendering (you depicted above) would be one of the ways to go to dynamically load something on the panel.

    Other ways will involve on returning script commands to replace the panel's body -- in essence, the same the partial rendering does for you.
    Fabrício Murta
    Developer & Support Expert
  6. #6
    thanks again @fabricio.murta,
    I didnt try with mobile components, but i hope it will work too,
    Until ExtJs add ComponentLoader functionality, i can use this way.

    You can close thread

Similar Threads

  1. Bug in Panel Loader
    By oespiao in forum 4.x Help
    Replies: 4
    Last Post: Feb 17, 2017, 4:23 PM
  2. Replies: 9
    Last Post: Jan 14, 2017, 8:35 PM
  3. [CLOSED] Panel Loader 404 when IIS is down
    By Geovision in forum 3.x Premium Help
    Replies: 1
    Last Post: Mar 10, 2016, 2:06 PM
  4. Resize grid panel with gestures in mobile devices
    By gerardAlis in forum 2.x Help
    Replies: 1
    Last Post: Aug 20, 2015, 6:27 PM
  5. Replies: 1
    Last Post: Aug 12, 2015, 11:43 AM

Tags for this Thread

Posting Permissions