Here's a code example. The two labels are called 'lblClassUserCreated' and 'lblClassUserModified'.
<ext:window runat="server" id="wndClass" title="Edit Class"
minheight="200" minwidth="600" width="610" height="240"
Hidden="true" initcenter="true" modal="true" autoscroll="false" bodyborder="false">
<content>
<ext:fitlayout id="ClassFitLayout" runat="server">
<items>
<ext:formpanel hideborders="true" labelwidth="160" padding="5" id="frmClass" frame="true" runat="server">
<topbar>
<ext:Toolbar id="toolbar1" runat="server">
<items>
<ext:button id="btnSaveClass" runat="server" Icon="Disk" text="Save" tooltip="Save the Class">
<DirectEvents>
<Click Before="return globalValidateForm(frmClass)" OnEvent="btnSaveClass_Click" success="defaultSaveClassComplete(result)">
<eventmask ShowMask="true" msg="Saving..." />
<ExtraParams>
<ext:Parameter name="ClassID" Value="defaultGetSelectedClassID()" Mode="Raw"></ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:button>
<ext:button id="btnDeleteClass" runat="server" Icon="delete" text="Delete" tooltip="Delete the Class">
<DirectEvents>
<Click OnEvent="mniDeleteClass_Click" Success="">
<eventmask ShowMask="true" msg="Deleting..." />
<confirmation ConfirmRequest="true" Message="Are you sure you wish to delete this Class?" title="Confirm Deletion" />
<ExtraParams>
<ext:Parameter name="ClassID" Value="defaultGetSelectedClassID()" Mode="Raw"></ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:button>
</items>
</ext:Toolbar>
</topbar>
<defaults>
<ext:Parameter name="Anchor" value="100%"></ext:Parameter>
</defaults>
<items>
<ext:TextField DataIndex="ClassName" allowblank="false" BlankText="'Class Name is required'" MaxLengthText="100" runat="server" id="txtClassName" fieldlabel="Class Name"></ext:TextField>
<ext:textarea DataIndex="Description" allowblank="true" blanktext="'Optional Class Description'" rowheight="1" maxlengthText="2000" runat="server" id="txtClassDescription" FieldLabel="Description"></ext:textarea>
<ext:label id="lblClassUserCreated" FieldLabel="User Created" hidden="false" runat="server"></ext:label>
<ext:label id="lblClassUserModified" FieldLabel="User Updated" hidden="false" runat="server"></ext:label>
</items>
<bottombar>
<ext:StatusBar id="ClassFormStatusBar" runat="server" defaulttext="Ready">
<plugins>
<ext:ValidationStatus id="ValidationStatus1" runat="server" formpanelid="frmClass" validicon="Accept" erroricon="exclamation"></ext:ValidationStatus>
</plugins>
</ext:StatusBar>
</bottombar>
</ext:formpanel>
</items>
</ext:fitlayout>
</content>
<tools>
<ext:Tool type="Close" handler="globalCheckFormModified(wndClass, frmClass)"></ext:Tool>
</tools>
</ext:window>
they are displayed or hidden based on the value of the recordID. -1 is a new record so they are not displayed. Thus in js we have:
function defaultShowClass(lClassID,bEditable)
{
if (lClassID == -1)
{
//show popup modal window that will contain the
globalResetFormValues(frmClass);
hidSelectedClassID.setValue(-1);
lblClassUserModified.hide();
lblClassUserCreated.hide();
btnDeleteClass.hide();
wndClass.setTitle("New Class");
}
else
{
if (bEditable == true)
{
btnDeleteClass.show();
btnSaveClass.show();
}
else
{
btnDeleteClass.hide();
btnSaveClass.hide();
}
txtClassName.setReadOnly(!bEditable);
txtClassDescription.setReadOnly(!bEditable);
hidSelectedClassID.setValue(lClassID);
lblClassUserModified.show();
lblClassUserCreated.show();
wndClass.setTitle("Edit Class");
Ext.net.DirectMethods.LoadClass(lClassID, { success: defaultShowClassCallback });
}
wndClass.show();
}
Also I have another window that contains tabs and a similar layout to the above example:
<ext:window runat="server" id="wndUser" title="Edit User"
minheight="200" minwidth="600" width="610" height="440"
Hidden="true" initcenter="true" modal="true" autoscroll="false" bodyborder="false">
<content>
<ext:fitlayout id="Fitlayout2" runat="server">
<items>
<ext:tabpanel id="tabUser" runat="server">
<topbar>
<ext:Toolbar id="toolbar5" runat="server">
<items>
<ext:button id="btnSaveUser" runat="server" Icon="Disk" text="Save" tooltip="Save the User">
<DirectEvents>
<Click Before="return globalValidateForm(frmUser)" OnEvent="btnSaveUser_Click" success="defaultSaveUserComplete(result)">
<eventmask ShowMask="true" msg="Saving..." />
<ExtraParams>
<ext:Parameter name="UserID" Value="defaultGetSelectedUserID()" Mode="Raw"></ext:Parameter>
<ext:parameter name="SelectedPlatformIDs" Value="defaultGetSelectedPlatformIDs()" mode="raw"></ext:parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:button>
<ext:button id="btnDeleteUser" runat="server" Icon="delete" text="Delete" tooltip="Delete the User">
<DirectEvents>
<Click OnEvent="mniDeleteUser_Click" Success="">
<eventmask ShowMask="true" msg="Deleting..." />
<confirmation ConfirmRequest="true" Message="Are you sure you wish to delete this User?" title="Confirm Deletion" />
<ExtraParams>
<ext:Parameter name="UserID" Value="defaultGetSelectedUserID()" Mode="Raw"></ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:button>
</items>
</ext:Toolbar>
</topbar>
<items>
<ext:formpanel title="User Details" hideborders="true" padding="5" labelwidth="160" id="frmUser" frame="true" runat="server">
<defaults>
<ext:Parameter name="Anchor" value="100%"></ext:Parameter>
</defaults>
<items>
<ext:textfield id="txtFirstName" maxlengthtext="20" AllowBlank="false" fieldlabel="First Name" blanktext="First Name is a Required field" runat="server"></ext:textfield>
<ext:textfield id="txtLastName" MaxLengthText="20" AllowBlank="false" fieldlabel="Last Name" blanktext="Last Name is a required field" runat="server"></ext:textfield>
<ext:combobox storeid="storeUserTypes" displayfield="DataName" valuefield="SecurityLevelID" mode="Local" triggeraction="All" validateonblur="false" id="cboSecurityLevel" AllowBlank="false" fieldlabel="Security Level" blanktext="Security Level is a required field" runat="server"></ext:combobox>
<ext:textfield id="txtEmail" maxlengthtext="255" AllowBlank="true" fieldlabel="Email" runat="server"></ext:textfield>
<ext:textfield id="txtTelephone" maxlengthtext="50" allowblank="true" fieldlabel="Telephone" runat="server"></ext:textfield>
<ext:textfield id="txtLogon" maxlengthtext="50" AllowBlank="false" fieldlabel="Logon" blanktext="Logon is a required field" runat="server"></ext:textfield>
<ext:textfield validator="defaultPasswordValidation" inputtype="Password" validationevent="false" validateonblur="false" causesvalidation="false" id="txtPassword" maxlengthtext="50" allowblank="true" fieldlabel="Password" runat="server"></ext:textfield>
<ext:textField id="txtPasswordConfirm" inputtype="Password" maxlengthtext="50" allowblank="true" fieldlabel="Password Confirmation" runat="server"></ext:textField>
<ext:checkbox id="chkRealTimeAnalysis" FieldLabel="Real Time Analysis" runat="server"></ext:checkbox>
<ext:checkbox id="chkShowSchematicTooltips" fieldlabel="Schematic Tooltips" runat="server"></ext:checkbox>
<ext:label id="lblUserUserCreated" FieldLabel="User Created" runat="server"></ext:label>
<ext:label id="lblUserUserUpdated" FieldLabel="User Updated" runat="server"></ext:label>
</items>
</ext:formpanel>
<!-- second Tab panel defined here -->
</items>
<bottombar>
<ext:StatusBar id="StatusBar2" runat="server" defaulttext="Ready">
<plugins>
<ext:ValidationStatus id="ValidationStatus5" runat="server" formpanelid="frmUser" validicon="Accept" erroricon="exclamation"></ext:ValidationStatus>
</plugins>
</ext:StatusBar>
</bottombar>
</ext:tabpanel>
</items>
</ext:fitlayout>
</content>
<tools>
<ext:Tool type="Close" handler="globalCheckFormModified(wndUser, frmUser)"></ext:Tool>
</tools>
</ext:window>
The display code in javascript is similar to the previous example however in this example the actual label contents are never rendered. e.g
function defaultShowUser(lUserID,bEditable)
{
if (lUserID == -1)
{
globalResetFormValues(frmUser);
hidSelectedUserID.setValue(-1);
lblUserUserUpdated.hide();
lblUserUserCreated.hide();
cboSecurityLevel.setReadOnly(false);
btnDeleteUser.hide(); //enable disable tab navigation
tabUser.closeTab(frmUserPermissions);
//frmUserPermissions.setVisible(false);//sets the currently viewed tab
wndUser.setTitle("New User");
}
else
{
hidSelectedUserID.setValue(lUserID);
if (hidUserID.getValue() != lUserID)
{
btnDeleteUser.show();
cboSecurityLevel.setReadOnly(false);
cboSecurityLevel.setHideTrigger(false);
}
else
{
cboSecurityLevel.setReadOnly(true);
cboSecurityLevel.setHideTrigger(true);
btnDeleteUser.hide();
}
lblUserUserUpdated.show();
lblUserUserCreated.show();
tabUser.addTab(frmUserPermissions);
frmUser.show();
wndUser.setTitle("Edit User");
Ext.net.DirectMethods.LoadUser(lUserID, { success: defaultShowUserCallback });
}
wndUser.show();
}
For both examples the control content is populated via the DirectMethod.
Finally is there a way to create a blank filler in a FormPanel items collection to push the remaining controls to the bottom of the panel? I was thinking of something like the ext:toolbarfill as used on toolbars (but vertically) ;-)
Posting Permissions
| Frameworks and Tools for .NET Developers