GUI problems on IE 7.0 & IE 8.0

  1. #1

    GUI problems on IE 7.0 & IE 8.0

    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 Click image for larger version. 

Name:	Chrome - erro1 - page.jpg 
Views:	97 
Size:	43.1 KB 
ID:	3192)

    the problem appear on both IE 7.0 and IE 8.0 (as this snapshot Click image for larger version. 

Name:	IE7 - error1.jpg 
Views:	103 
Size:	39.6 KB 
ID:	3193)

    Thank you for your help
    Regards
  2. #2
    Hi,

    Can you post a simplified .aspx code sample demonstrating how we can reproduce what you are rendering in your screen captures?
    Geoffrey McGill
    Founder
  3. #3
    Thank you for your replay,

    here is the 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>
  4. #4
    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>
  5. #5
    Thank you for your replay, but it does not work !!

    I solved it by running the following script after the controls are rendered:

     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";
                }
            }
  6. #6
    Quote Originally Posted by ITECH-Developer View Post
    Thank you for your replay, but it does not work !!

    I solved it by running the following script after the controls are rendered:

     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.
    Geoffrey McGill
    Founder

Similar Threads

  1. About Ext.NET 2.0.0-rc1 Some of the problems
    By happy61 in forum 2.x Help
    Replies: 2
    Last Post: Jul 15, 2012, 4:06 PM
  2. There are some problems
    By jiaxiang8756 in forum 2.x Help
    Replies: 0
    Last Post: Jun 19, 2012, 10:04 AM
  3. PagingToolBar Problems
    By yyyhxm1 in forum 1.x Help
    Replies: 0
    Last Post: Aug 31, 2010, 3:00 AM
  4. two problems!
    By jarremw in forum 1.x Help
    Replies: 0
    Last Post: Jun 29, 2009, 4:37 PM
  5. Problems with HtmlEditor
    By heysol in forum 1.x Help
    Replies: 0
    Last Post: Feb 18, 2009, 7:32 PM

Tags for this Thread

Posting Permissions