Printable View
Hi All,
We are using Ext.Net library to build our system.
we used a lot of the library controls, including panels, text fields, etc
the result is very good on Chrome, Firefox, IE 9.0 (The attached image is for the GUI on Chrome browser Attachment 3192)
the problem appear on both IE 7.0 and IE 8.0 (as this snapshot Attachment 3193)
Thank you for your help
Regards
Hi,
Can you post a simplified .aspx code sample demonstrating how we can reproduce what you are rendering in your screen captures?
Thank you for your replay,
here is the code
Code:<%@ Page Language="C#" %>
<%@ 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">
<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();
btnSaveAndAddCommittee.show();
}
function ShowCreateCommitteePnl_ToEdit() {
pnlCommitteeList.hide();
pnlAddNewCommittee.show();
btnSaveAndAddCommittee.hide();
}
function ShowCommitteePnl() {
pnlCommitteeList.show();
pnlAddNewCommittee.hide();
}
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 dir="<%=GetLocalResourceObject("dir").ToString()%>">
<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="FitLayout" AutoScroll="true">
<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" AutoScroll="True"
Hidden="True" Title="Add a New Committee" StopIDModeInheritance="False">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server" MonitorValid="true" Padding="5" Layout="Column"
meta:resourcekey="FormPanel1Resource1">
<Items>
<ext:Panel ID="pnlCreateCommittee" runat="server" Border="false" Header="false" ColumnWidth="1"
AutoScroll="true" LabelAlign="Top" meta:resourcekey="pnlCreateRoleResource1">
<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" AutoScroll="true" runat="server" Width="650" Height="300"
meta:resourcekey="pnlAssignedRolesResource1">
<Items>
<ext:BorderLayout ID="BorderLayout2" runat="server" meta:resourcekey="BorderLayout2Resource1">
<West MarginsSummary="5 5 5 5">
<ext:GridPanel ID="gvOriginalAssignedUsers" runat="server" DDGroup="secondGroup"
StoreID="Store5" EnableDragDrop="true" Height="100" StripeRows="true" AutoExpandColumn="UserName"
Width="325" Title="Original Users" meta:resourcekey="gvOriginalAssignedUsersResource1">
<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>
</West>
<Center MarginsSummary="5 5 5 0">
<ext:GridPanel ID="gvSelectedAssignedUsers" runat="server" DDGroup="firstGroup" StoreID="Store6"
EnableDragDrop="true" StripeRows="true" AutoExpandColumn="UserName" Width="325"
Title="Selected Roles" meta:resourcekey="gvSelectedAssignedUsersResource1">
<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>
</Center>
</ext:BorderLayout>
</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>
</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 : valid ? MsgValidForm : MsgInvalidForm, 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>
Use CardLayout instead FitLayout to switch items in the container
Also, set HideMode="Offsets" to pnlAddNewCommittee
Code:<%@ 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>
Thank you for your replay, but it does not work !!
I solved it by running the following script after the controls are rendered:
Code:var arr = document.getElementsByTagName("div");
for (i = 0; i < arr.length; i++) {
if (arr[i].style.position == "absolute" && arr[i].className == "x-form-element") {
arr[i].style.position = "relative";
}
}
This shouldn't be required.Quote:
Originally Posted by ITECH-Developer