Panel.Loader on Mobile

[unicorn64]

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

[fabricio.murta]

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 (http://docs.sencha.com/extjs/6.2.1/modern/Ext.html) -- no Ext.ComponentLoader on the list of classes.
- ExtJS 6.2.1 classic toolkit documentation on the Ext.ComponentLoader class (http://docs.sencha.com/extjs/6.2.1/classic/Ext.ComponentLoader.html). 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!

[unicorn64]

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?

[unicorn64]

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?

[fabricio.murta]

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.

[unicorn64]

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