Use CardLayout instead FitLayout to switch items in the container
Also, set HideMode="Offsets" to pnlAddNewCommittee
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<script runat="server">
#region Enumerations
//Enum :: Page Mode
// Distinguish page mode
public enum PageMode
{
// represents edit page mode
Edit = 0,
// represents add page mode
Add = 1
}
#endregion
#region Page Properties
//Page Mode
// Sets Or Gets the page mode: Edit Mode (or) Add Mode.
public PageMode enumPageMode
{
set
{
ViewState["enumPageMode"] = value;
}
get
{
if (ViewState["enumPageMode"] != null) return (PageMode)(Convert.ToInt32(ViewState["enumPageMode"]));
return PageMode.Add;
}
}
//This data table will contain all the committee users.
public DataTable dtSelectedAssignedUsers
{
set
{
ViewState["SelectedAssignedUsers"] = value;
}
get
{
DataTable dtSelectedAssignedUsers = new DataTable();
if (ViewState["CommitteeId"] != null) return (DataTable)ViewState["SelectedAssignedUsers"];
else
{
return dtSelectedAssignedUsers;
}
}
}
//End
#endregion
#region Page Handlers (page load event, button click event ?.)
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
vFillgvOriginalAssignedUsers(null, null);
}
}
#region Handler :: Refresh Original Assigned Users
protected void vFillgvOriginalAssignedUsers(object sender, StoreRefreshDataEventArgs e)
{
//Do something
}
#endregion
protected void btnAddCommittee_Click(object sender, DirectEventArgs e)
{
//Do something
}
protected void btnEditCommittee_Click(object sender, DirectEventArgs e)
{
//Do something
}
protected void btnDeleteCommittee_Click(object sender, DirectEventArgs e)
{
//Do something
}
protected void btnCreateCommittee_Click(object sender, DirectEventArgs e)
{
//Do something
}
protected void btnSaveAndAddCommittee_Click(object sender, DirectEventArgs e)
{
//Do something
}
protected void btnClear_Click(object sender, DirectEventArgs e)
{
//Do something
}
#endregion
#region Page methods
public void vGetSingleCommittee()
{
//Do something
}
public void vClearForm()
{
//this.nCommitteeId = -99;
tfCommitteeName.Reset();
taDescription.Reset();
chkStatus.Reset();
vFillgvOriginalAssignedUsers(null, null);
vGetAssignedUsers();
}
#endregion
#region Grid view Events
protected void Store1_RefreshData(object sender, StoreRefreshDataEventArgs e)
{
//Do something
}
//This method will remove the selected Committee based on its related "Committee id".
public void vDeleteCommittee()
{
//Do something
}
#endregion
#region Method :: Set Column Header
private void vSetColumnsHeader()
{
//Do something
}
public void vGetAssignedUsers()
{
//Do something
}
private void vSetUsersGridsColumnHeader()
{
//Do something
}
#endregion
</script>
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var SelectRecord = function(command, record) {
//debugger;
gpCommittees.getSelectionModel().selectRow(-31 - record.id);
};
function ShowCreateCommitteePnl() {
//pnlCommitteeList.hide();
//pnlAddNewCommittee.show();
pnlMainPanel.getLayout().setActiveItem(1);
btnSaveAndAddCommittee.show();
}
function ShowCreateCommitteePnl_ToEdit() {
//pnlCommitteeList.hide();
//pnlAddNewCommittee.show();
pnlMainPanel.getLayout().setActiveItem(1);
btnSaveAndAddCommittee.hide();
}
function ShowCommitteePnl() {
//pnlCommitteeList.show();
//pnlAddNewCommittee.hide();
pnlMainPanel.getLayout().setActiveItem(0);
}
var BeforeEdit = function(e) {
if (gpCommittees.getRowsValues({ selectedOnly: true }).length == 0) {
Ext.Msg.alert(MsgAlert, MsgSelectComitteeForEdit);
return false;
}
else {
ShowCreateCommitteePnl_ToEdit();
}
};
// method check if there is a selected user before fire the delete click
var BeforeDelete = function(e) {
if (gpCommittees.getRowsValues({ selectedOnly: true }).length == 0) {
Ext.Msg.alert(MsgAlert, MsgSelectComitteeForDelete);
return false;
}
else {
var bResult = confirm(MsgUserDeleteConfirm);
return bResult;
}
};
var addRow2 = function(store, record, ddSource) {
// Search for duplicates
var foundItem = store.findExact('UserName', record.data.Name);
// if not found
if (foundItem == -1) {
//Remove Record from the source
ddSource.grid.store.remove(record);
store.add(record);
// Call a sort dynamically
store.sort('UserName', 'ASC');
}
};
var notifyDrop4 = function(ddSource, e, data) {
// Loop through the selections
Ext.each(ddSource.dragData.selections, function(record) {
addRow2(Store5, record, ddSource);
});
return true;
};
var notifyDrop5 = function(ddSource, e, data) {
// Loop through the selections
Ext.each(ddSource.dragData.selections, function(record) {
addRow2(Store6, record, ddSource);
});
return true;
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" LicenseKey="" Locale="en-US"
StopIDModeInheritance="False" />
<ext:Store ID="Store5" runat="server" OnRefreshData="vFillgvOriginalAssignedUsers">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="UserName" Type="String" />
<ext:RecordField Name="UserId" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store ID="Store6" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="UserName" Type="String" />
<ext:RecordField Name="UserId" Type="Int" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Viewport ID="vpRolesContainer" 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="CardLayout" ActiveIndex="0">
<Items>
<ext:Panel ID="pnlCommitteeList" runat="server" meta:resourcekey="pnlCommitteesListResource1"
StopIDModeInheritance="False" AutoScroll="True" Layout="FitLayout" Border="false"
ActiveTabIndex="0">
<Items>
<ext:GridPanel ID="gpCommittees" runat="server" AutoHeight="true" SelectionSavingBuffer="10"
StopIDModeInheritance="False" meta:resourcekey="gpCommitteesResource1" StripeRows="true">
<SelectionModel>
<ext:RowSelectionModel ID="gvRowSelection" Enabled="true" SingleSelect="true">
</ext:RowSelectionModel>
</SelectionModel>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server" meta:resourcekey="Toolbar1Resource2">
<Items>
<ext:ToolbarFill ID="ToolbarFill1" runat="server" meta:resourcekey="ToolbarFill1Resource1">
</ext:ToolbarFill>
<ext:Button ID="btnAddCommittee" runat="server" Text="Create New" Icon="GroupAdd"
meta:resourcekey="btnAddCommitteeResource1" Cls="DirectionCorrection">
<DirectEvents>
<Click OnEvent="btnAddCommittee_Click" ViewStateMode="Enabled">
</Click>
</DirectEvents>
<Listeners>
<Click Fn="ShowCreateCommitteePnl" />
</Listeners>
</ext:Button>
<ext:Button ID="btnEditCommittee" runat="server" Text="Edit" Icon="GroupEdit" meta:resourcekey="btnEditCommitteeResource1"
Cls="DirectionCorrection">
<DirectEvents>
<Click OnEvent="btnEditCommittee_Click" ViewStateMode="Enabled" Before="BeforeEdit">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.encode(#{gpCommittees}.getRowsValues({selectedOnly:true}))"
Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
<ext:Button ID="btnDeleteCommittee" runat="server" Text="Delete" Icon="GroupDelete"
meta:resourcekey="btnDeleteCommitteeResource1" Cls="DirectionCorrection">
<DirectEvents>
<Click OnEvent="btnDeleteCommittee_Click" ViewStateMode="Enabled" Before="BeforeDelete">
<ExtraParams>
<ext:Parameter Name="Values" Value="Ext.encode(#{gpCommittees}.getRowsValues({selectedOnly:true}))"
Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="Store1" runat="server" RemoteSort="true" OnRefreshData="Store1_RefreshData"
meta:resourcekey="Store1Resource1">
<Proxy>
<ext:PageProxy />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="Id">
<Fields>
<ext:RecordField Name="CommitteeId" Type="Int" />
<ext:RecordField Name="CommitteeName" Type="String" />
<ext:RecordField Name="Description" Type="String" />
<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="CommitteeId" Direction="ASC" />
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server" DefaultWidth="165">
<Columns>
<ext:Column Header="" DataIndex="" Width="30">
<Commands>
<ext:ImageCommand Icon="Group" CommandName="Select">
</ext:ImageCommand>
</Commands>
</ext:Column>
<ext:Column Header="Committee Id" DataIndex="CommitteeId" Width="165" Hidden="true" />
<ext:Column Header="Committee Name" DataIndex="CommitteeName" />
<ext:Column Header="Description" DataIndex="Description" />
<ext:Column Header="Active" DataIndex="Active" />
</Columns>
</ColumnModel>
<LoadMask ShowMask="true" />
<Plugins>
<ext:GridFilters runat="server" ID="GridFilters1">
<Filters>
<ext:StringFilter DataIndex="CommitteeName" />
<ext:StringFilter DataIndex="Description" />
<ext:BooleanFilter DataIndex="Active" YesText="true" NoText="false" 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="pnlAddNewCommittee" runat="server" ActiveTabIndex="0" HideMode="Offsets"
Hidden="True" Title="Add a New Committee" StopIDModeInheritance="False" Layout="FitLayout">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" MonitorValid="true" Padding="5" LabelAlign="Top"
meta:resourcekey="FormPanel1Resource1">
<Defaults>
<ext:Parameter Name="MsgTarget" Value="under" />
</Defaults>
<Items>
<ext:TextField ID="tfCommitteeName" runat="server" FieldLabel="Committee Name" Width="520"
meta:resourcekey="tfCommitteeNameResource1" AllowBlank="false" MaxLength="20" />
<ext:TextArea ID="taDescription" runat="server" FieldLabel="Description" Width="520"
meta:resourcekey="taDescriptionResource1" AllowBlank="false" MaxLength="100" />
<ext:Checkbox ID="chkStatus" runat="server" FieldLabel="Active" meta:resourcekey="chkStatusResource1" />
<ext:Panel ID="pnlAssignedRoles" runat="server" Width="650" Height="300" meta:resourcekey="pnlAssignedRolesResource1"
Layout="BorderLayout">
<Items>
<ext:GridPanel ID="gvOriginalAssignedUsers" runat="server" DDGroup="secondGroup"
Region="West" StoreID="Store5" EnableDragDrop="true" StripeRows="true" AutoExpandColumn="UserName"
Width="325" Title="Original Users">
<ColumnModel>
<Columns>
<ext:Column ColumnID="UserId" Header="UserId" DataIndex="UserId" Hidden="true" />
<ext:Column ColumnID="UserName" Header="Users" DataIndex="UserName" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel4" runat="server" />
</SelectionModel>
</ext:GridPanel>
<ext:GridPanel ID="gvSelectedAssignedUsers" runat="server" DDGroup="firstGroup" StoreID="Store6"
EnableDragDrop="true" StripeRows="true" AutoExpandColumn="UserName" Region="Center"
Title="Selected Roles">
<ColumnModel>
<Columns>
<ext:Column ColumnID="UserId" Header="UserId" DataIndex="UserId" Hidden="true" />
<ext:Column ColumnID="UserName" Header="Assigned Users" DataIndex="UserName" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel5" runat="server" />
</SelectionModel>
</ext:GridPanel>
</Items>
<BottomBar>
<ext:Toolbar ID="Toolbar3" runat="server" meta:resourcekey="Toolbar3Resource1">
<Items>
<ext:ToolbarFill ID="ToolbarFill3" runat="server" meta:resourcekey="ToolbarFill3Resource1" />
<ext:Button ID="Button5" runat="server" Text="Reset" meta:resourcekey="Button5Resource1">
<Listeners>
<Click Handler="Store5.loadData(Store5.proxy.data); Store6.removeAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</BottomBar>
</ext:Panel>
</Items>
<Buttons>
<ext:Button ID="btnCreateCommittee" runat="server" Text="Save" CausesValidation="true"
meta:resourcekey="btnSaveResource1">
<DirectEvents>
<Click OnEvent="btnCreateCommittee_Click" ViewStateMode="Enabled">
<ExtraParams>
<ext:Parameter Name="ParamGVSelectedAssignedUsers" Value="Ext.encode(#{gvSelectedAssignedUsers}.getRowsValues(false))"
Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
<Listeners>
<Click Handler="if (#{FormPanel1}.getForm().isValid()) {ShowCommitteePnl();return true;}else{Ext.Msg.show({icon: Ext.MessageBox.ERROR, msg: MsgFormError, buttons:Ext.Msg.OK});return false;}" />
</Listeners>
</ext:Button>
<ext:Button ID="btnSaveAndAddCommittee" runat="server" Text="Save And Add New" CausesValidation="true"
meta:resourcekey="btnSaveAndAddCommitteeResource1">
<DirectEvents>
<Click OnEvent="btnSaveAndAddCommittee_Click" ViewStateMode="Enabled">
<ExtraParams>
<ext:Parameter Name="ParamGVSelectedAssignedUsers" Value="Ext.encode(#{gvSelectedAssignedUsers}.getRowsValues(false))"
Mode="Raw" />
</ExtraParams>
</Click>
</DirectEvents>
<Listeners>
<Click Handler="if (#{FormPanel1}.getForm().isValid()) {ShowCreateCommitteePnl();}else{Ext.Msg.show({icon: Ext.MessageBox.ERROR, msg: 'MsgFormError', buttons:Ext.Msg.OK});return false;}" />
</Listeners>
</ext:Button>
<ext:Button ID="btnBack" runat="server" Text="Back" meta:resourcekey="btnBackResource1">
<DirectEvents>
<Click OnEvent="btnClear_Click" ViewStateMode="Enabled">
</Click>
</DirectEvents>
<Listeners>
<Click Fn="ShowCommitteePnl" />
</Listeners>
</ext:Button>
<ext:Button ID="btnClear" runat="server" Text="Clear" CausesValidation="false" meta:resourcekey="btnClearResource1">
<DirectEvents>
<Click OnEvent="btnClear_Click" ViewStateMode="Enabled">
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
<BottomBar>
<ext:StatusBar ID="StatusBar1" runat="server" Height="25" meta:resourcekey="StatusBar1Resource1" />
</BottomBar>
<Listeners>
<ClientValidation Handler="this.getBottomToolbar().setStatus({text : '', iconCls: valid ? 'icon-accept' : 'icon-exclamation'});" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</ext:LayoutColumn>
</Columns>
</ext:ColumnLayout>
</Items>
</ext:Viewport>
<ext:DropTarget ID="DropTarget4" runat="server" Target="={gvOriginalAssignedUsers.view.scroller.dom}"
Group="firstGroup" StopIDModeInheritance="False">
<NotifyDrop Fn="notifyDrop4" />
</ext:DropTarget>
<ext:DropTarget ID="DropTarget5" runat="server" Target="={gvSelectedAssignedUsers.view.scroller.dom}"
Group="secondGroup" StopIDModeInheritance="False">
<NotifyDrop Fn="notifyDrop5" />
</ext:DropTarget>
</form>
</body>
</html>