-
1 Attachment(s)
Bug in Panel Loader
Hello.
I have this in aspx:
Code:
<ext:Panel ID="pnAddMercadoria" runat="server" Title="Adicionar Mercadorias" TitleAlign="Right" Height="250" Collapsible="true"
Collapsed="true" IconAlign="Right" Frame="true" Icon="Add">
<Loader
runat="server"
Url="addMercadoria.aspx"
Mode="Frame"
DisableCaching="true">
<LoadMask ShowMask="true" />
</Loader>
<Listeners>
<Expand Handler="this.reload();" />
<Collapse Handler="this.clearContent();" />
</Listeners>
</ext:Panel>
in .apsx.cs:
Code:
protected void cbOperacao_DirectChange(object sender, DirectEventArgs e)
{
LoadContents("fatAddMercadoria.aspx"); //for example.
}
protected void LoadContents(string vUrl)
{
this.pnAddMercadoria.LoadContent(new ComponentLoader()
{
Url = vUrl,
Mode = LoadMode.Frame,
DisableCaching = true
});
}
It turns out that this is giving problem, when calling the procedure the panel is only with the mask of "loading" and can not expand it, the attached image helps to understand.
Attachment 24866
To resolve this, either I leave the panel> Collapsed="false" <, or I add these lines:
Code:
protected void LoadContents(string vUrl)
{
this.pnAddMercadoria.LoadContent(new ComponentLoader()
{
Url = vUrl,
Mode = LoadMode.Frame,
DisableCaching = true
});
this.pnAddMercadoria.Collapsed = false; //<<<<<
this.pnAddMercadoria.Collapsed = true; //<<<<<
}
But this is bad, because it is loading every time the event fires, and I would like it to be loaded only when the user has expanded the panel.
tks for help;
-
Hello @oespiao,
Please provide a runnable and simplified code sample demonstrating how to reproduce the issue.
The code sample you provide should include only the minimum amount of code required to reproduce the issue. Code unrelated to the issue is to be removed. Anyone should be able to copy + paste your sample into a local Visual Studio test project and run without having to make modifications.
Tips for creating simplified code samples
If Exceptions or syntax errors are thrown when testing your code sample, we'll let you know so you can revise your original sample. Then we'll review again with the updated sample.
When posting your code samples in the forums, please paste that sample within [CODE] tags. The [CODE] tags will add formatting and syntax highlighting to your sample.
The following two forum posts provide many excellent tips for posting in the forums:
1. More Information Required
2. Forum Guidelines
-
Code:
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
List<object> list = new List<object>
{
new {Text = "teste1.aspx", Value = 1}, //any page
new {Text = "teste2.aspx", Value = 2}, //any page
};
this.Store1.DataSource = list;
this.Store1.DataBind();
}
}
protected void cbTipo_DirectChange(object sender, DirectEventArgs e)
{
LoadContents(cbTipo.RawValue.ToString());
}
protected void LoadContents(string vUrl)
{
this.pnPanel.LoadContent(new ComponentLoader()
{
Url = vUrl,
Mode = LoadMode.Frame,
DisableCaching = true
});
// this.pnAddMercadoria.Collapsed = false;
// this.pnAddMercadoria.Collapsed = true;
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<ext:ResourceManager runat="server" />
<title></title>
</head>
<body>
<form id="Main" runat="server">
<div>
<table>
<tr>
<td>
<ext:ComboBox
ID="cbTipo"
runat="server"
DisplayField="Text"
ValueField="Value"
QueryMode="Local"
OnDirectChange="cbTipo_DirectChange">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server" IDProperty="Value">
<Fields>
<ext:ModelField Name="Text" />
<ext:ModelField Name="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</td>
</tr>
</table>
</div>
<table>
<tr>
<ext:Panel ID="pnPanel" runat="server" Title="Teste" TitleAlign="Right" Height="250" Collapsible="true"
Collapsed="true" IconAlign="Right" Frame="true" Icon="Add">
<Loader
runat="server"
Url="x.aspx"
Mode="Frame"
DisableCaching="true">
<LoadMask ShowMask="true" />
</Loader>
<Listeners>
<Expand Handler="this.reload();" />
<Collapse Handler="this.clearContent();" />
</Listeners>
</ext:Panel>
</tr>
</table>
</form>
</body>
</html>
-
Hello @oespiao!
Thanks for the sample code, fair enough!
I think you just didn't choose a good event to bind the loading to. You can use the change event on the dropbox to bind the panel loader's URL only, and not reload it.
If you want the panel to be reloaded if already expanded, then you can add a callback to the direct event from the combo box.
Here's a reviewed version of the page you provided. A use case scenario will follow:
Code:
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
List<object> list = new List<object>
{
new {Text = "61771-page1.aspx", Value = 1}, //any page
new {Text = "61771-page2.aspx", Value = 2}, //any page
};
this.Store1.DataSource = list;
this.Store1.DataBind();
}
}
protected void cbTipo_DirectChange(object sender, DirectEventArgs e)
{
pnPanel.Loader.Url = cbTipo.SelectedItem.Text;
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<ext:ResourceManager runat="server" />
<title></title>
<script type="text/javascript">
var handleExpand = function (item) {
// Expand only if an url has been chosen in the combo box
if (item.getLoader().url) {
this.load();
} else {
Ext.Msg.alert('No selection', 'Please select a page to load before trying to expand.');
return false;
}
}
var handleRefreshPanel = function () {
var panel = App.pnPanel;
// We will load the panel again only and only if it is already expanded.
if (!panel.collapsed) {
panel.load();
}
}
</script>
</head>
<body>
<form id="Main" runat="server">
<ext:ComboBox
ID="cbTipo"
runat="server"
DisplayField="Text"
ValueField="Value"
QueryMode="Local">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server" IDProperty="Value">
<Fields>
<ext:ModelField Name="Text" />
<ext:ModelField Name="Value" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<DirectEvents>
<Change OnEvent="cbTipo_DirectChange" Success="handleRefreshPanel();" />
</DirectEvents>
</ext:ComboBox>
<ext:Panel
ID="pnPanel"
runat="server"
Title="Teste"
TitleAlign="Right"
Height="250"
Collapsible="true"
Collapsed="true"
IconAlign="Right"
Frame="true"
Icon="Add"
WidthSpec="100%"
>
<Loader
runat="server"
Mode="Frame"
DisableCaching="true"
AutoLoad="false">
<LoadMask ShowMask="true" />
</Loader>
<Listeners>
<BeforeExpand Fn="handleExpand" />
<Collapse Handler="this.clearContent();" />
</Listeners>
</ext:Panel>
</form>
</body>
</html>
Use case:
1. click the panel's expander button.
A message will be shown, requiring the user to select something in the combo box.
2. select one of the option in the combo box
3. click the panel's expander button again
The page pointed by the selected option will be loaded.
4. select another entry in the combo box (with the panel still expanded)
The loading mask will be displayed, and the contents updated.
In order to ensure the load mask is properly being displayed, you may want to use a System.Threading.Thread.Sleep(1000); on the child pages' Page_Load() event.
Hope this helps!
-
Worked perfectly...
Thank you so much.
