PDA

View Full Version : [CLOSED] Buttons and Window Render



alessandra.monica
Dec 16, 2013, 9:59 AM
Hi!!

We have created our button class that inherits from Ext.Net.Button standard
class and we use these buttons everywhere in every page.
This button class implements the oninit methods that assigns dynamically to the buttons
the label and the icon.
In order to avoid that this assignement is done on every page request and that, for every button,
the setlabel and seticon are sent back to the browser every time, we have put this assignement
under the condition If Not Page.IsPostBack, so that only the first time labels and icons are assigned
to the buttons, but for every next request, since label and icons don't change, nothing
is sent back.

This work fine almost everywhere.
The only problem is when one of this button is contained in a Window and when on this window, just before
the show method, is called the render method. We need render method because there are dynamic controls
that must be rendered inside the window, but in this case, label and icon of the button disappear, since they are not
reassigned anymore. In this case so, but only in this case, it would be necessary to reassign label
and icon to the button.
So my question now is: is there a way to overcome this problem? Or the only way is to reassign everytime
and for each requests labels and icons for every button (so remove If Not Page.IsPostBack )?

In the code you find an example of this behaviour; 2 buttons, in 2 windows, one where render() is called and the other
where only show() is called. We haven't here a separate class for the button,
they are standard buttons, but nothing changes, you see that if you comment render of the window (like in the example of the second window),
the button shows label and icon, otherwise it is empty.

Hope it's clear.

Thank you!!!!!!!

TestRender.aspx



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestRender.aspx.vb" Inherits="SISA.ReportIT.View.TestRender" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ReportResourceManager" runat="server">
</ext:ResourceManager>

<ext:FormPanel ID="ReportDetail2" Flex="2" runat="server" Frame="true" Border="false" MonitorValid="true" AnchorHorizontal="100%" Width="500" BodyPaddingSummary="0 0 0 5" AutoScroll="true">
<Items>
<ext:Button ID="AddParamBtn" runat="server" ToolTip='Add' IconOnly="true" Text="Openwindow1">
<DirectEvents>
<Click>
<EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>

<ext:Button ID="Button2" runat="server" ToolTip='Add' IconOnly="true" Text="Openwindow2">
<DirectEvents>
<Click>
<EventMask ShowMask="true" />
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:FormPanel>

<ext:Window ID="EditParameter" runat="server" Title='Edit'
Width="460" BodyStyle="background-color: #fff;" Modal="true" Hidden="true" Frame="true"
AutoHeight="true">

<Items>
<ext:FormPanel ID="ParameterDetail" AutoHeight="true" AutoWidth="true" runat="server"
MonitorValid="true" Frame="true" DefaultAnchor="95%">
<Items>
<ext:ComboBox runat="server" ID="ParamComboBox" TypeAhead="true" SelectOnFocus="true"
FieldLabel='Parameter' EmptyText='Select Parameter'
Editable="false" ForceSelection="true" AllowBlank="false">
<DirectEvents>
<%-- <Select OnEvent="ParamComboBox_OnSelect" />--%>
</DirectEvents>
</ext:ComboBox>
<ext:Hidden ID="ParameterScopeId" runat="server" DataIndex="ScopeId" />
<ext:TextField ID="ParameterScopeTxt" runat="server" FieldLabel='Scope'
ReadOnly="true" Name="ScopeName" />
<ext:TextArea ID="ParameterDescription" runat="server" FieldLabel='Description'
MsgTarget="side" />
<ext:ComboBox runat="server" ID="ChangeOnExecutionComboBox" SelectOnFocus="true"
FieldLabel='ChangeOnExecution' Editable="false"
ForceSelection="true" AllowBlank="false">
<DirectEvents>
<%--<Select OnEvent="ChangeOnExecutionComboBox_OnSelect" />--%>
</DirectEvents>
</ext:ComboBox>
<ext:Container ID="ParamStringValues" runat="server" Layout="form" DefaultAnchor="100%"
Hidden="true">
<Items>
<ext:TextField ID="ParamStringValue" runat="server" FieldLabel='Value' />
</Items>
</ext:Container>
<ext:Container ID="ParamDateValues" runat="server" Layout="form" DefaultAnchor="100%"
Hidden="true">
<Items>
<ext:DateField ID="ParamDateValue" runat="server" FieldLabel='Value'
Format="dd-MM-yyyy" />
<ext:Checkbox ID="ParamDateIsAlwaysNow" runat="server" FieldLabel="IsAlwaysNow">
<Listeners>
<Change Handler="if(#{ParamDateIsAlwaysNow}.getValue( )) {#{ParamDateValue}.disable(); #{ParamDateValue}.setValue('')} else {#{ParamDateValue}.enable()}" />
</Listeners>
</ext:Checkbox>
</Items>
</ext:Container>
<ext:Container ID="ParamDecimalValues" runat="server" Layout="form" DefaultAnchor="100%"
Hidden="true">
<Items>
<ext:NumberField ID="ParamDecimalValue" runat="server" FieldLabel='Value'
BaseChars="0123456789" DecimalPrecision="2" DecimalSeparator="." AllowDecimals="true" />

<ext:Checkbox ID="ParamDecimalIsInteger" runat="server" FieldLabel='IsInteger'
Disabled="true" />
</Items>
</ext:Container>
<ext:Container ID="ParamBooleanValues" runat="server" Layout="form" DefaultAnchor="100%"
Hidden="true">
<Items>
<ext:Checkbox ID="ParamBooleanValue" runat="server" FieldLabel='Value' />
</Items>
</ext:Container>
<ext:Container ID="ParamImageValues" runat="server" Layout="form" DefaultAnchor="100%"
Hidden="true">
<Items>
<ext:FileUploadField ID="ParamImageFileUpload" FieldLabel='Image'
runat="server" Icon="None">
<Listeners>
<Change Handler="#{ParamImageImageURL}.disable(); #{ParamImageImageURL}.setValue('');" />
</Listeners>
</ext:FileUploadField>
<ext:TextField ID="ParamImageImageURL" runat="server" FieldLabel='ImageUrl' EnableKeyEvents="true">
<Listeners>
<KeyUp Handler="disableImageUpload(#{ParamImageImageURL}.getValue( ), #{ParamImageFileUpload});" />
</Listeners>
</ext:TextField>
</Items>
</ext:Container>
<ext:Container ID="ParamSubreportValues" runat="server" Layout="form" DefaultAnchor="100%"
Hidden="true">
<Items>
<ext:FileUploadField ID="ParamSubreportUpload" FieldLabel='Value'
runat="server" Icon="None"/>
<ext:Hidden ID="CurrentSubreportId" runat="server" DataIndex="ValueSubreport" />
</Items>
</ext:Container>
</Items>
<Buttons>
<ext:Button ID="SaveParameterBtn" runat="server" UseDefaultShortcutKey="false">

</ext:Button>

</Buttons>
</ext:FormPanel>
</Items>
</ext:Window>

<ext:Window ID="Window1" runat="server" Title='Edit'
Width="460" BodyStyle="background-color: #fff;" Modal="true" Hidden="true" Frame="true"
AutoHeight="true">

<Items>
<ext:FormPanel ID="FormPanel1" AutoHeight="true" AutoWidth="true" runat="server"
MonitorValid="true" Frame="true" DefaultAnchor="95%">
<Items>


</Items>
<Buttons>
<ext:Button ID="Button1" runat="server" UseDefaultShortcutKey="false">

</ext:Button>

</Buttons>
</ext:FormPanel>
</Items>
</ext:Window>

</div>
</form>
</body>
</html>


TestRender.aspx.vb



Imports Ext.Net

Public Class TestRender
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
MyBase.OnInit(e)

If Not Page.IsPostBack Then
SaveParameterBtn.Text = "button1"
SaveParameterBtn.Icon = Ext.Net.Icon.BookAdd
Button1.Text = "button2"
Button1.Icon = Icon.Bug
End If

End Sub

Protected Sub NewParamBtn_DirectClick(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs) Handles AddParamBtn.DirectClick


EditParameter.Render()
EditParameter.Show()

End Sub


Protected Sub Button2_DirectClick(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs) Handles Button2.DirectClick


Window1.Show()

End Sub



End Class

Daniil
Dec 16, 2013, 5:10 PM
Hi @alessandra.monica,

The Render method uses the latest Control's state. So, I don't see a solution except reapplying:

Protected Sub NewParamBtn_DirectClick(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs) Handles AddParamBtn.DirectClick
SaveParameterBtn.Text = "button1"
SaveParameterBtn.Icon = Ext.Net.Icon.BookAdd
EditParameter.Render()
EditParameter.Show()
End Sub

alessandra.monica
Dec 17, 2013, 8:37 AM
Hi Daniil,
thank you for the response but now I ask you another thing related to the same subject
and the same example.
If instead to apply the render to the whole window EditParameter, I apply it only to the 2 controls
for which I need it, that are Paramcombobox and ChangeOnexecutionComboBox,
(ParamComboBox.Render() and ChangeOnexecutionComboBox.Render())
these controls are then always rendered at the bottom of the window, after all the other controls.

Is there are a way to have them rendered in the same position they are in the markup?

Thank you!

Daniil
Dec 17, 2013, 2:05 PM
You can wrap those controls into Containers.

<ext:Container runat="server">
<Items>
<ext:ComboBox runat="server" />
</Items>
</ext:Container>

Or, if you know the ComboBox's position index, you can use the InsertTo method instead of the Render one.

ComboBox1.InsertTo(4, ComboBoxHolder);