Sep 26, 2011, 1:07 PM
Multiple Scroll Problem
Hi All,
When i open the create form for the first time the page will have one scroll :
but when validation messages of the controls appears another scroll appear like in the following screenshot :
When i open the create form for the first time the page will have one scroll :
but when validation messages of the controls appears another scroll appear like in the following screenshot :
<%@ Page Language="C#" AutoEventWireup="true"
Culture="auto" UICulture="auto" EnableViewState="true" meta:resourcekey="PageResource1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label
{
font-weight: bold;
}
</style>
<script type="text/javascript">
var SelectRecord = function (command, record) {
gpUsers.getSelectionModel().selectRow(-1 - record.id);
};
// method use to show create new user panel and hide users list panel
function ShowCreateUserPnl() {
pnlUsersList.hide();
pnlCreateUser.show();
}
// method use to show users list panel and hide create new user panel
function ShowUsersPnl() {
pnlUsersList.show();
pnlCreateUser.hide();
}
// method check if there is a selected user before fire the edit click
var BeforeEdit = function (e) {
if (gpUsers.getRowsValues({ selectedOnly: true }).length == 0) {
Ext.Msg.alert(MsgAlert, MsgSelectUserForEdit);
MsgLeftFixForIE();
return false;
}
else {
ShowCreateUserPnl();
}
};
// method check if there is a selected user before fire the delete click
var BeforeDelete = function (e) {
if (gpUsers.getRowsValues({ selectedOnly: true }).length == 0) {
Ext.Msg.alert(MsgAlert, MsgSelectUserForDelete);
MsgLeftFixForIE();
return false;
}
else {
var bResult = confirm(MsgUserDeleteConfirm);
return bResult;
}
};
// method check if there is a selected user before fire the reset password click
var BeforeResetPassword = function (e) {
if (gpUsers.getRowsValues({ selectedOnly: true }).length == 0) {
Ext.Msg.alert(MsgAlert, MsgSelectUserForResetPassword);
MsgLeftFixForIE();
return false;
}
else {
var bResult = confirm(MsgUserResetPasswordConfirm);
return bResult;
}
};
function CheckSelectedRowCount() {
if (Ext.encode(gpUsers.getRowsValues({ selectedOnly: true })[0]) != 'null') {
return Ext.encode(gpUsers.getRowsValues({ selectedOnly: true })[0].UserId);
}
else {
return '-99';
}
}
function CheckSelectedRow() {
if (Ext.encode(gpUsers.getRowsValues({ selectedOnly: true })[0]) != 'null') {
return Ext.encode(gpUsers.getRowsValues({ selectedOnly: true })[0].Active);
}
else {
return 'false';
}
}
</script>
<script runat = "server">
#region Handlers >>
#region Handler :: Page Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
}
}
#endregion
#region Handler :: Refresh Data
protected void strUsers_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
}
#endregion
#region Handler :: btnDeleteUser_Click
protected void btnDeleteUser_Click(object sender, DirectEventArgs e)
{
}
#endregion
#region Handler :: btnSave_Click
protected void btnSave_Click(object sender, DirectEventArgs e)
{
}
#endregion
#region Handler :: btnEditUser_Click
protected void btnEditUser_Click(object sender, DirectEventArgs e)
{
}
#endregion
#region Handler :: btnUserAdd_Click
protected void btnUserAdd_Click(object sender, EventArgs e)
{
}
#endregion
#region Handler :: btnCancel_Click
protected void btnCancel_Click(object sender, DirectEventArgs e)
{
}
#endregion
#region Handler :: btnResetPassword_Click
protected void btnResetPassword_Click(object sender, DirectEventArgs e)
{
}
#endregion
#region Handler :: btnActivate_Click
protected void btnActivate_Click(object sender, DirectEventArgs e)
{
}
#endregion
#region Handler :: btnDeActivate_Click
protected void btnDeActivate_Click(object sender, DirectEventArgs e)
{
}
#endregion
#region Handler :: gvRowSelection_Selected
protected void gvRowSelection_Selected(object sender, DirectEventArgs e)
{
}
#endregion
#endregion
#region Methods >>
#region Method :: Delete User
/// <summary>
/// method that delete user
/// </summary>
public void vDeleteUser()
{
}
#endregion
#region Method :: Get Single User
/// <summary>
/// method that get a single user for edit
/// </summary>
public void vGetSingleUser()
{
}
#endregion
#region Method :: Clear Form
/// <summary>
/// method that clear the form
/// </summary>
public void vClearForm()
{
}
#endregion
#region Method :: Set Column Header
/// <summary>
/// Method that set the columns header
/// </summary>
private void vSetColumnsHeader()
{
}
#endregion
#region Method :: Set Buttons Status
/// <summary>
/// method that set the buttons visiability status
/// </summary>
private void vSetButtonsStatus()
{
}
#endregion
#endregion
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" LicenseKey="" StopIDModeInheritance="False"
Locale="en-US" />
<ext:Viewport ID="vpUsersContainer" runat="server" AutoScroll="true" StopIDModeInheritance="False">
<Items>
<ext:ColumnLayout ID="ColumnLayout1" runat="server" FitHeight="true" meta:resourcekey="ColumnLayout1Resource1">
<Columns>
<ext:LayoutColumn ColumnWidth="1">
<ext:Panel ID="pnlMainPanel" runat="server" Layout="FitLayout" AutoScroll="true"
Border="false">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:Label ID="lblTitle" runat="server" StyleSpec="color:#15428B;" Cls="Label">
</ext:Label>
<ext:ToolbarFill ID="ToolbarFill21" runat="server" meta:resourcekey="ToolbarFill1Resource1">
</ext:ToolbarFill>
<ext:Button ID="btnUserAdd" runat="server" Text="Create New" Icon="UserAdd" meta:resourcekey="btnUserAddResource1">
<DirectEvents>
<Click OnEvent="btnUserAdd_Click" ViewStateMode="Enabled">
</Click>
</DirectEvents>
<Listeners>
<Click Fn="ShowCreateUserPnl" />
</Listeners>
</ext:Button>
<ext:Button ID="btnEditUser" runat="server" Text="Edit" Icon="UserEdit" meta:resourcekey="btnEditUserResource1">
<DirectEvents>
<Click OnEvent="btnEditUser_Click" ViewStateMode="Enabled" Before="BeforeEdit" Complete="MsgLeftFixForIE">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="UserId" Value="CheckSelectedRowCount()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnDeleteUser" runat="server" Text="Delete" Icon="UserDelete" meta:resourcekey="btnDeleteUserResource1">
<DirectEvents>
<Click OnEvent="btnDeleteUser_Click" ViewStateMode="Enabled" Before="BeforeDelete"
Complete="MsgLeftFixForIE">
<%--<Confirmation ConfirmRequest="true" Cancel = "return false;" Title="Alert" BeforeConfirm="config.confirmation.message = 'Are You Sure That You Want To Delete User?'" />--%>
<ExtraParams>
<ext:Parameter Name="UserId" Value="CheckSelectedRowCount()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnSynchronize" runat="server" Text="Synchronize" Icon="ArrowRefresh"
meta:resourcekey="Button4Resource1">
</ext:Button>
<ext:Button ID="btnResetPassword" runat="server" Text="Reset Password" Icon="ArrowUndo"
meta:resourcekey="btnResetPasswordResource1">
<DirectEvents>
<Click OnEvent="btnResetPassword_Click" ViewStateMode="Enabled" Before="BeforeResetPassword"
Complete="MsgLeftFixForIE">
<ExtraParams>
<ext:Parameter Name="UserId" Value="CheckSelectedRowCount()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnActivate" runat="server" Text="Activate" Icon="KeyStart" meta:resourcekey="btnActivateResource1">
<DirectEvents>
<Click OnEvent="btnActivate_Click" ViewStateMode="Enabled" Complete="MsgLeftFixForIE">
<ExtraParams>
<ext:Parameter Name="UserId" Value="CheckSelectedRowCount()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnDeActivate" runat="server" Text="DeActivate" Icon="KeyStop" meta:resourcekey="btnDeActivateResource1">
<DirectEvents>
<Click OnEvent="btnDeActivate_Click" ViewStateMode="Enabled" Complete="MsgLeftFixForIE">
<ExtraParams>
<ext:Parameter Name="UserId" Value="CheckSelectedRowCount()" Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button Icon="Add" ID="btnSave" runat="server" Text="Save" meta:resourcekey="btnSaveResource1">
<Listeners>
<Click Handler="if (#{FormPanel1}.getForm().isValid()) {return true;}else{Ext.Msg.show({icon: Ext.MessageBox.ERROR, msg: MsgFormError, buttons:Ext.Msg.OK});MsgLeftFixForIE();return false;}" />
</Listeners>
<DirectEvents>
<Click OnEvent="btnSave_Click" ViewStateMode="Enabled" Complete="MsgLeftFixForIE">
</Click>
</DirectEvents>
</ext:Button>
<ext:Button Icon="Cancel" ID="btnCancel" runat="server" Text="Cancel" meta:resourcekey="btnCancelResource1">
<DirectEvents>
<Click OnEvent="btnCancel_Click" ViewStateMode="Enabled">
</Click>
</DirectEvents>
<Listeners>
<Click Fn="ShowUsersPnl" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Panel ID="pnlUsersList" runat="server" ActiveTabIndex="0" StopIDModeInheritance="False"
Layout="FitLayout" AutoScroll="true">
<Items>
<ext:GridPanel ID="gpUsers" runat="server" AutoWidth="True" AutoHeight="true" SelectionSavingBuffer="10"
StopIDModeInheritance="False" meta:resourcekey="gpUsersResource1" StripeRows="true">
<SelectionModel>
<ext:RowSelectionModel ID="gvRowSelection" Enabled="true" SingleSelect="true" meta:resourcekey="gvRowSelectionResource1">
<DirectEvents>
<SelectionChange OnEvent="gvRowSelection_Selected">
<ExtraParams>
<ext:Parameter Name="Active" Value="CheckSelectedRow()" Mode="Raw" />
</ExtraParams>
</SelectionChange>
</DirectEvents>
</ext:RowSelectionModel>
</SelectionModel>
<Store>
<ext:Store ID="strUsers" runat="server" RemoteSort="true" OnRefreshData="strUsers_RefreshData"
meta:resourcekey="Store1Resource1">
<Proxy>
<ext:PageProxy />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="Id">
<Fields>
<ext:RecordField Name="UserId" Type="Int" />
<ext:RecordField Name="UserName" Type="String" />
<ext:RecordField Name="FullName" Type="String" />
<ext:RecordField Name="EmpNo" Type="Int" />
<ext:RecordField Name="Active" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="start" Value="0" Mode="Raw" />
<ext:Parameter Name="limit" Value="10" Mode="Raw" />
<ext:Parameter Name="sort" Value="" />
<ext:Parameter Name="dir" Value="" />
</BaseParams>
<SortInfo Field="UserId" Direction="ASC" />
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server" Width="100%">
<Columns>
<ext:Column Header="" DataIndex="" Width="30">
<Commands>
<ext:ImageCommand Icon="User" CommandName="Select">
</ext:ImageCommand>
</Commands>
</ext:Column>
<ext:Column Header="Username" DataIndex="UserName" Width="250">
</ext:Column>
<ext:Column Header="Full Name" DataIndex="FullName" Width="300" />
<ext:Column Header="Emp No" DataIndex="EmpNo">
</ext:Column>
<ext:Column Header="Active" DataIndex="Active" Align="Center">
<Renderer Handler="return (value) ? DrawYesImage(): DrawNoImage();" />
</ext:Column>
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<Plugins>
<ext:GridFilters runat="server" ID="GridFilters1">
<Filters>
<ext:NumericFilter DataIndex="EmpNo" meta:resourcekey="NumericFilterResource1" />
<ext:StringFilter DataIndex="UserName" />
<ext:StringFilter DataIndex="FullName" />
<ext:BooleanFilter DataIndex="Active" meta:resourcekey="BooleanFilterResource1" />
</Filters>
</ext:GridFilters>
</Plugins>
<BottomBar>
<ext:PagingToolbar ID="PagingToolbar1" runat="server" BeforePageText="Page" PageSize="10"
meta:resourcekey="PagingToolbar1Resource1" />
</BottomBar>
<Listeners>
<Command Handler="SelectRecord(command, record);" />
</Listeners>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlCreateUser" runat="server" ActiveTabIndex="0"
Layout="FitLayout" Hidden="True" StopIDModeInheritance="False" Border="false">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" MonitorValid="true" MonitorResize="true"
Padding="5" AutoWidth="true" Layout="Column" meta:resourcekey="FormPanel1Resource1">
<Items>
<ext:Panel ID="Panel1" runat="server" Border="false" Header="false" ColumnWidth=".5" MonitorResize="true" AutoScroll="true"
Layout="Form" meta:resourcekey="Panel1Resource2" LabelAlign="Top">
<Defaults>
<ext:Parameter Name="MsgTarget" Value="under" />
</Defaults>
<Items>
<ext:TextField ID="txtUsername" runat="server" FieldLabel="Username" Width="500" Height="200"
AllowBlank="false" MsgTarget="Under" meta:resourcekey="txtUsernameResource1" />
<ext:TextField ID="txtEmpNo" runat="server" FieldLabel="Emp No." Width="500" meta:resourcekey="txtEmpNoResource1"
AllowBlank="false" />
<ext:TextField ID="txtFullName" runat="server" FieldLabel="Full Name" Width="500" Height="200"
AllowBlank="false" meta:resourcekey="txtFullNameResource1" />
<ext:TextField ID="txtInternalEmail" runat="server" FieldLabel="Internal Email" Width="500" Height="200"
AllowBlank="false" Vtype="email" meta:resourcekey="txtInternalEmailResource1"
MaxLength="40" />
<ext:TextField ID="txtExternalEmail" runat="server" FieldLabel="External Email" Width="500"
AllowBlank="false" Vtype="email" meta:resourcekey="txtExternalEmailResource1"
MaxLength="40">
</ext:TextField>
<ext:TextField ID="txtPassword" InputType="Password" runat="server" FieldLabel="Password"
Width="500" meta:resourcekey="txtPasswordResource1" />
<ext:TextField ID="txtConfirmPassword" Vtype="password" InputType="Password" runat="server"
FieldLabel="Confirm Password" Width="500" meta:resourcekey="txtConfirmPasswordResource1">
<CustomConfig>
<ext:ConfigItem Name="initialPassField" Value="#{txtPassword}" Mode="Value" />
</CustomConfig>
</ext:TextField>
<ext:RadioGroup ID="rgStatus" runat="server" Width="400" CausesValidation="false"
FieldLabel="User Status" AutoRender="False" StopIDModeInheritance="False" meta:resourcekey="rgUserStatus">
<Items>
<ext:Radio ID="rActive" runat="server" BoxLabel="<%$ Resources:Resource, rActive %>"
AutoRender="False" StopIDModeInheritance="False" Checked="true">
</ext:Radio>
<ext:Radio ID="rInactive" runat="server" BoxLabel="<%$ Resources:Resource, rInActive %>"
AutoRender="False" StopIDModeInheritance="False">
</ext:Radio>
</Items>
</ext:RadioGroup>
</Items>
</ext:Panel>
</Items>
<Buttons>
</Buttons>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" Height="25" meta:resourcekey="StatusBar1Resource1">
</ext:StatusBar>
</BottomBar>
<Listeners>
<ClientValidation Handler="this.getBottomToolbar().setStatus({text : valid ? MsgValidForm : MsgFormError, iconCls: valid ? 'icon-accept' : 'icon-exclamation'});" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Viewport>
</form>
</body>
</html>
