[CLOSED] How to place ext elements in center of screen.

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] How to place ext elements in center of screen.

    I would like place following controls in center of screen. These are inside a ASP.NET form i,e, within <form> and </form>

    1) <ext:GridPanel>

    2) <ext:Panel> with Table layout.

    I could do it with Viewport but it does not support scrolling.
    How I can place these in center of screen?
    Last edited by Daniil; Mar 11, 2014 at 6:42 AM. Reason: [CLOSED]
  2. #2
    You could investigate using a Viewport with HBoxLayout, adding Pack="Center" to the layout configuration.

    Hope this helps.
    Last edited by geoffrey.mcgill; Mar 04, 2014 at 12:51 AM.
    Geoffrey McGill
    Founder
  3. #3

    Viewport deos not support scrolling.

    Quote Originally Posted by geoffrey.mcgill View Post
    You could investigate using a Viewport with HBoxLayout, adding Pack="Center" to the layout configuration.

    Hope this helps.
    I already tried with Viewport and achieved it but as I said earlier, Viewport does not support scrolling. Hence I can not use Viewport. Please suggest some other way.
  4. #4
    Maybe, something like this.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:Container runat="server" AutoScroll="true">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Pack="Center" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel 
                                runat="server" 
                                Title="Panel" 
                                Width="200" 
                                Height="3000" />
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  5. #5
    Quote Originally Posted by Daniil View Post
    Maybe, something like this.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:Container runat="server" AutoScroll="true">
                        <LayoutConfig>
                            <ext:HBoxLayoutConfig Pack="Center" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel 
                                runat="server" 
                                Title="Panel" 
                                Width="200" 
                                Height="3000" />
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    I tried with the code you suggested, put two Panels and one grid panel inside container in <Items> tag with Layout of VBoxLayout. But they displayed in one line. I would like to display these one after another. How can I achieve this?

    Alternatively I tried 3 containers inside the viewport and each container containing a panel each. This time I can see them displayed vertically. But not displayed in center of screen.
  6. #6
    Please provide a test case to reproduce.
  7. #7
    Hello Aditya,

    The following forum threads provide lots of helpful tips for posting in the forums:

    http://forums.ext.net/showthread.php...ing-New-Topics

    http://forums.ext.net/showthread.php...ation-Required

    Please ensure you post a simplified code sample demonstrating as much of your scenario as possible.
    Geoffrey McGill
    Founder
  8. #8
    Quote Originally Posted by Daniil View Post
    Please provide a test case to reproduce.
    I am providing complete form in CODE tag. The form contains two panels(ext:Panel) and one grid panel (ext:GridPanel). I would like to place these panels in center of screen.

        <form id="formCandidate" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" />
            <div>
                <asp:Label ID="Label1" runat="server" Text="&lt;h1&gt;Candidate's Profile&lt;/h1&gt;"></asp:Label>    
            </div>
             <ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig>
                    </ext:VBoxLayoutConfig>
                </LayoutConfig>
                <Items>
                    <ext:Container ID="Container1" runat="server" AutoScroll="true">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Pack="Center" />
                        </LayoutConfig>
                        <Items>
                            <ext:Panel runat="server" Layout="TableLayout" Width="1000" Flex="1">
                                <LayoutConfig>
                                    <ext:TableLayoutConfig Columns="2">
                                    </ext:TableLayoutConfig>
                                </LayoutConfig>
                                <Items>
                                    <ext:FormPanel ID="FormPanelPersonalDetails"
                                            runat="server"
                                            Title="Personal details"
                                            Height="350"
                                            Width="500"
                                            BodyPadding="5"
                                            >
                                            <FieldDefaults LabelAlign="Right"/>
                                            <Items>
                                                <ext:FieldContainer ID="FieldContainerName" 
                                                    runat="server"
                                                    FieldLabel="Name" 
                                                    AnchorHorizontal="100%"
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0"
                                                    IsRemoteValidation="true">
                                                        <Items>
                                                            <ext:TextField ID="TextFieldName" runat="server" Width="250" AllowBlank="false" IndicatorIcon="Star">
                                                            </ext:TextField>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerDOB" 
                                                    runat="server" 
                                                    FieldLabel="Date of birth" 
                                                    AnchorHorizontal="100%" 
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:TextField ID="TextFieldDOB" runat="server" Width="200" note="dd/mm/yyyy" AllowBlank="false" IndicatorIcon="Star"/>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerMob" 
                                                    runat="server" 
                                                    FieldLabel="Mobile" 
                                                    AnchorHorizontal="100%"
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:TextField ID="TextFieldMobile" runat="server" Width="200" AllowBlank="false" IndicatorIcon="Star"/>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerEmail" 
                                                    runat="server" 
                                                    FieldLabel="Email"
                                                    AnchorHorizontal="100%" 
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:TextField ID="TextFieldEmail" runat="server" Width="200" Vtype="email" AllowBlank="false" IndicatorIcon="Star"/>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerAltEmail" 
                                                    runat="server" 
                                                    FieldLabel="Alternate Email"
                                                    AnchorHorizontal="100%"
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                  
                                                        <Items>
                                                            <ext:TextField ID="TextFieldAltEmail" runat="server" Vtype="email" Width="200"/>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerGender" 
                                                    runat="server" 
                                                    FieldLabel="Gender" 
                                                    AnchorHorizontal="100%" 
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:ComboBox ID="ddlGender" Editable="false" runat="server" Width="100">
                                                                <Items>
                                                                    <ext:ListItem Text="Male" Value="M"/>
                                                                    <ext:ListItem Text="Female" Value="F" />
                                                                </Items>
                                                                <SelectedItems >
                                                                    <ext:ListItem Index="0"></ext:ListItem>
                                                                </SelectedItems>
                                                            </ext:ComboBox>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerMaritalStatus" 
                                                    runat="server" 
                                                    FieldLabel="Marital status" 
                                                    AnchorHorizontal="100%" 
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:ComboBox ID="ComboBoxMaritalStatus" Editable="false" runat="server" Width="100">
                                                                <Items>
                                                                    <ext:ListItem Text="Married" Value="Married" />
                                                                    <ext:ListItem Text="Unmarried" Value="Unmarried" />
                                                                </Items>
                                                                <SelectedItems >
                                                                    <ext:ListItem Index="0"></ext:ListItem>
                                                                </SelectedItems>
                                                            </ext:ComboBox>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerPassportNumber"
                                                    runat="server" 
                                                    FieldLabel="Passport Number"
                                                    AnchorHorizontal="100%"
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">
                                                        <Items>
                                                            <ext:TextField ID="TextFieldPassportNumber" runat="server" Width="200"/>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerCurrentAddress" 
                                                    runat="server" 
                                                    FieldLabel="Current Address" 
                                                    AnchorHorizontal="100%" 
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:TextField ID="TextFieldCurrentAddress" runat="server" Width="350" AllowBlank="false" IndicatorIcon="Star"/>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerPermanentAddress" 
                                                    runat="server" 
                                                    FieldLabel="Permanent Address" 
                                                    AnchorHorizontal="100%" 
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                  
                                                        <Items>
                                                            <ext:TextField ID="TextFieldPermanentAddress" runat="server" Width="350" AllowBlank="false" IndicatorIcon="Star"/>
                                                        </Items>
                                                </ext:FieldContainer>
                                            </Items>
                                        </ext:FormPanel>
                                    <ext:FormPanel ID="FormPanelProfesionalDetails" 
                                            runat="server"
                                            Title="Professional details"
                                            Height="350"
                                            Width="500"
                                            BodyPadding="5"
                                            >
                                            <FieldDefaults LabelAlign="Right"/>
                                            <Items>
                                                <ext:FieldContainer ID="FieldContainerWorkLocation" 
                                                    runat="server" 
                                                    FieldLabel="Work Location" 
                                                    AnchorHorizontal="100%"
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">
                                                        <Items>
                                                            <ext:TextField ID="TextFieldWorkLocation" runat="server" Width="250"/>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerDesignation" 
                                                    runat="server" 
                                                    FieldLabel="Designation" 
                                                    AnchorHorizontal="100%"
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                              
                                                        <Items>
                                                            <ext:TextField ID="TextFieldDesignation" runat="server" Width="250" />
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerTotalExp" 
                                                    runat="server" 
                                                    FieldLabel="Total Experience" 
                                                    AnchorHorizontal="100%" 
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:TextField ID="TextFieldTotalExpYears" runat="server" Width="50" Note="Years"/>
                                                            <ext:TextField ID="TextFieldTotalExpMonths" runat="server" Width="50" Note="Months"  PaddingSpec="0 5"/>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                                <ext:FieldContainer ID="FieldContainerCurrentCTC" 
                                                    runat="server" 
                                                    FieldLabel="Current CTC" 
                                                    AnchorHorizontal="100%" 
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:TextField ID="TextFieldCurrentCTC" runat="server" Width="50" Note="Lacs"/>
                                                        </Items>
                                                </ext:FieldContainer>
    
                                               <ext:FieldContainer ID="FieldContainerExpectedCTC"
                                                    runat="server" 
                                                    FieldLabel="Expected CTC" 
                                                    AnchorHorizontal="100%" 
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:TextField ID="TextFieldExpectedCTC" runat="server" Width="50" Note="Lacs"/>
                                                        </Items>
                                               </ext:FieldContainer>
                               
                                                <ext:FieldContainer ID="FieldContainerNoticePeriod"
                                                    runat="server" 
                                                    FieldLabel="Notice Period" 
                                                    AnchorHorizontal="100%" 
                                                    Layout="HBoxLayout"
                                                    MarginSpec="0 0 5 0">                                       
                                                        <Items>
                                                            <ext:TextField ID="TextFieldNoticePeriod" runat="server" Width="50" Note="Days"/>
                                                        </Items>
                                               </ext:FieldContainer>
                                            </Items>      
                                        </ext:FormPanel>
                                </Items>
                                <Buttons>
                                    <ext:Button ID="ButtonFillDummyData" runat="server" visible="false" Text="Fill dummy data">
                                        <DirectEvents>
                                            <Click OnEvent="OnFillDummyData_Click">
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>  
                                    <ext:Button ID="ButtonSaveCandidate" runat="server" Text="Save" Icon="Disk">
                                        <DirectEvents>
                                            <Click OnEvent="OnSaveCandidate_Click">
                                                <EventMask ShowMask="true" Msg="Saving..." MinDelay="500"/>
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
    
                                    <ext:Button ID="ButtonSaveMailCandidate" runat="server" Text="Save & Send Mail" Icon="Mail">
                                        <DirectEvents>
                                            <Click OnEvent="OnSaveAndMail_Click">
                                                <EventMask ShowMask="true" Msg="Saving and sending mail..." MinDelay="500"/>
                                            </Click>
                                        </DirectEvents>
                                    </ext:Button>
                                </Buttons>
                            </ext:Panel>
                            <ext:GridPanel 
                                    ID="EducationGridPanel" 
                                    runat="server" 
                                    Title="Education"
                                    Width="900"
                                    Height="300"
                                    OnReadData ="Refresh_EducationList">
                                    <Store>
                                       <ext:Store
                                            ID="StoreEducation"
                                            runat="server"
                                            RemoteSort="false"
                                            PageSize="10">
                                            <Model>
                                                <ext:Model ID="Model1" runat="server" IDProperty="Id">
                                                    <Fields>
                                                        <ext:ModelField Name="ClassDegree" />
                                                        <ext:ModelField Name="Type" />
                                                        <ext:ModelField Name="SchoolInstitute" />
                                                        <ext:ModelField Name="BoardUniversity" />
                                                        <ext:ModelField Name="PassingYear" Type="Int" UseNull="true"/>
                                                        <ext:ModelField Name="Grade" />
                                                        <ext:ModelField Name="Percentage" Type="Float" UseNull="true"/>
                                                        <ext:ModelField Name="CandidateId"/>
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                       </ext:Store>
                                    </Store>
                                    <ColumnModel ID="ColumnModel1" runat="server">
                                        <Columns>
                                            <ext:Column ID="Column1" runat="server" Text="Class/Degree" DataIndex="ClassDegree">
                                                <Editor>
                                                    <ext:Combobox ID="ComboBoxClass" runat="server" Editable="false" Width="150"  AllowBlank="false" EmptyText="Select Class...">
                                                        <Items>
                                                            <ext:ListItem Text="10th Class" Value="10th Class" />
                                                            <ext:ListItem Text="12th Class" Value="12th Class" />
                                                            <ext:ListItem Text="Graduate" Value="Graduate" />
                                                            <ext:ListItem Text="Post Graduate" Value="Post Graduate" />
                                                            <ext:ListItem Text="Diploma" Value="Diploma" />
                                                            <ext:ListItem Text="PG Diploma" Value="PG Diploma" />
                                                        </Items>
                                                    </ext:Combobox>
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column ID="Column2" runat="server" Text="Type" Width="100" DataIndex="Type">
                                                <Editor>
                                                    <ext:Combobox ID="ComboBoxEducationType" runat="server" Width="100" Editable="false" AllowBlank="false" EmptyText="Select Type...">
                                                        <Items>
                                                            <ext:ListItem Text="Full Time" Value="Full Time" />
                                                            <ext:ListItem Text="Part Time" Value="Part Time" />
                                                            <ext:ListItem Text="Correspondence" Value="Correspondence" />
                                                        </Items>
                                                    </ext:Combobox>
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column ID="Column3" runat="server" Text="School/Institute" AllowBlank="false" Width="200" DataIndex="SchoolInstitute" >
                                                <Editor>
                                                    <ext:TextField ID="TextField2" runat="server" />
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column ID="Column4" runat="server" Text="Board/University" Width="200" AllowBlank="false" DataIndex="BoardUniversity">
                                                <Editor>
                                                    <ext:TextField ID="TextField3" runat="server" />
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column ID="Column5" runat="server" Text="Passing Year" Width="100" AllowBlank="false" DataIndex="PassingYear">
                                                <Editor>
                                                    <ext:TextField ID="TextField4" runat="server" />
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column ID="Column6" runat="server" Text="Grade" Width="75" AllowBlank="false" DataIndex="Grade">
                                                <Editor>
                                                    <ext:TextField ID="TextFieldGrade" runat="server" />
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column ID="Column7" runat="server" Text="Percentage" Width="75" AllowBlank="false" DataIndex="Percentage">
                                                <Editor>
                                                    <ext:TextField ID="TextFieldPercentage" runat="server" />
                                                </Editor>
                                            </ext:Column>
                                        </Columns>
                                    </ColumnModel>
                                    <Plugins>
                                        <ext:CellEditing ID="CellEditing7" runat="server" ClicksToEdit="1"></ext:CellEditing>
                                    </Plugins>
                                    <SelectionModel>
                    
                                    </SelectionModel>
                                    <TopBar>
                                        <ext:Toolbar ID="Toolbar1" runat="server">
                                            <Items>                     
                                                <ext:Button ID="IDAddEducation" runat="server" Icon="Add">
                                                    <Listeners>
                                                        <Click Handler="var grid = #{EducationGridPanel},
                                                                        store = grid.store;
                                                                        store.insert(0, {'CandidateId':'00000000-0000-0000-0000-000000000000'});
                                                                        grid.editingPlugin.startEdit(store.getAt(0), grid.columns[0]);" />
                                                    </Listeners>
                                                </ext:Button>
                                                <ext:Button ID="IDDeleteEducation" runat="server" Icon="Delete">
                                                    <Listeners>
                                                        <Click Handler="#{EducationGridPanel}.deleteSelected()"></Click>
                                                    </Listeners>
                                                </ext:Button>
                                                <ext:Button ID="IDSave" runat="server" Icon="Disk">
                                                    <DirectEvents>
                                                        <Click OnEvent="OnClickSaveEducation">
                                                            <ExtraParams>
                                                                <ext:Parameter Name="data" Value="#{StoreEducation}.getChangedData()" Encode="true" Mode="Raw"></ext:Parameter>
                                                            </ExtraParams>
                                                            <EventMask ShowMask="true" Msg="Saving..." MinDelay="500"/>
                                                        </Click>
                                                    </DirectEvents>
                                                </ext:Button>
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                </ext:GridPanel> 
                            <ext:Panel ID="Panel1" runat="server" Layout="TableLayout" Width="1000" Flex="3">
                                <LayoutConfig>
                                    <ext:TableLayoutConfig Columns="2">
                                    </ext:TableLayoutConfig>
                                </LayoutConfig>
                                <Items>
                                <ext:GridPanel 
                                ID="GridPanelExperience"
                                runat="server" 
                                Title="Experience"
                                OnReadData ="Refresh_ExperienceList"
                                Width="500" 
                                Height="200">
                                <Store>
                                    <ext:Store 
                                        ID="StoreExperience"
                                        runat="server"             
                                        PageSize="10">
                                        <Model>
                                            <ext:Model ID="ModelExperience" runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField Name="CompanyName" />
                                                    <ext:ModelField Name="LastDesignation" />
                                                    <ext:ModelField Name="StartDate" />
                                                    <ext:ModelField Name="EndDate" />
                                                    <ext:ModelField Name="CandidateId" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModelExperience" runat="server">
                                    <Columns>
                                        <ext:Column ID="ColumnCompany" runat="server" Text="Company" Width="75" AllowBlank="false" DataIndex="CompanyName">
                                            <Editor>
                                                <ext:TextField ID="TextFieldCompany" runat="server" />
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column ID="ColumnLastDesignation" runat="server" Text="Last Designation" AllowBlank="false" Width="150" DataIndex="LastDesignation">
                                            <Editor>
                                                <ext:TextField ID="TextFieldLastDesignation" runat="server" />
                                            </Editor>
                                        </ext:Column>
                                        <ext:DateColumn ID="ColumnStartDate" 
                                            runat="server"
                                            Text="Start Date"
                                            Width="100"
                                            DataIndex="StartDate"
                                            AllowBlank="false"
                                            Format="dd-MM-yyyy">
                                            <Editor>
                                                <ext:DateField ID="DateFieldStartExpDate" runat="server" />
                                            </Editor>
                                        </ext:DateColumn>
                                        <ext:DateColumn ID="ColumnEndDate"
                                            runat="server" 
                                            Text="End Date"
                                            Width="100" 
                                            DataIndex="EndDate"
                                            AllowBlank="false"
                                            Format="dd-MM-yyyy">
                                            <Editor>
                                                <ext:DateField ID="DateFieldEndExpDate" runat="server" />
                                            </Editor>
                                        </ext:DateColumn>
                                    </Columns>
                                </ColumnModel>
                                <Plugins>
                                    <ext:CellEditing ID="CellEditing2" runat="server" ClicksToEdit="1"></ext:CellEditing>
                                </Plugins>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
                                </SelectionModel>
                                <Plugins>
                                    <ext:CellEditing ID="CellEditing1" runat="server" />
                                </Plugins>
                                <TopBar>
                                    <ext:Toolbar ID="Toolbar2" runat="server">
                                        <Items>                        
                                            <ext:Button ID="ButtonAdd" runat="server" Icon="Add">
                                                <Listeners>
                                                    <Click Handler="var grid = #{GridPanelExperience},
                                                                    store = grid.store;
                                                                    store.insert(0, { 'CandidateId':'00000000-0000-0000-0000-000000000000'});
                                                                    grid.editingPlugin.startEdit(store.getAt(0), grid.columns[0]);" />
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="ButtonDelete" runat="server" Icon="Delete">
                                                <Listeners>
                                                    <Click Handler="#{GridPanelExperience}.deleteSelected()"></Click>
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="ButtonSave" runat="server" Icon="Disk">
                                                <DirectEvents>
                                                    <Click OnEvent="OnClickSaveExperience">
                                                        <ExtraParams>
                                                            <ext:Parameter Name="data" Value="#{StoreExperience}.getChangedData()" Encode="true" Mode="Raw"></ext:Parameter>
                                                        </ExtraParams>
                                                        <EventMask ShowMask="true" Msg="Saving..." MinDelay="500"/>
                                                    </Click>
                                                </DirectEvents>
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:GridPanel>
    
                           <ext:GridPanel 
                                ID="GridPanelSkill" 
                                runat="server"
                                Title="Skill"
                                OnReadData ="Refresh_SkillList"
                                Width="500" 
                                Height="200">
                                <Store>
                                    <ext:Store 
                                        ID="StoreSkill"
                                        runat="server"             
                                        PageSize="10">
                                        <Model>
                                            <ext:Model ID="ModelSkill" runat="server" IDProperty="Id">
                                                <Fields>
                                                    <ext:ModelField  Name="Name"/>
                                                    <ext:ModelField Name="Version" />
                                                    <ext:ModelField Name="LastUsed"/>
                                                    <ext:ModelField Name="Experience" Type="Float" UseNull="true"/>
                                                    <ext:ModelField Name="SelfRating" Type="Int" UseNull="true"/>
                                                    <ext:ModelField Name="CandidateId" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ColumnModel ID="ColumnModelSkill" runat="server">
                                    <Columns>
                                        <ext:Column ID="ColumnSkillName" runat="server" Text="Name" Width="75" AllowBlank="false" DataIndex="Name" Flex="1">
                                            <Editor>
                                                <ext:TextField ID="TextFieldSkillName" runat="server" />
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column ID="ColumnVersion" runat="server" Text="Version" Width="100" AllowBlank="false" DataIndex="Version">
                                            <Editor>
                                                <ext:TextField ID="TextFieldVersion" runat="server" />
                                            </Editor>
                                        </ext:Column>
                                        <ext:DateColumn ID="DateColumnLastUsed"
                                            runat="server" 
                                            Text="Last Used" 
                                            DataIndex="LastUsed"
                                            AllowBlank="false"
                                            Format="dd-MM-yyyy">
                                            <Editor>
                                                <ext:DateField ID="ColumnLastUsed" runat="server" />
                                            </Editor>
                                        </ext:DateColumn>
                                        <ext:Column ID="ColumnExperience" runat="server" Text="Experience (in years)" AllowBlank="false" Width="110" DataIndex="Experience">
                                            <Editor>
                                                <ext:TextField ID="TextFieldExperience" runat="server" />
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column ID="ColumnSelfRating" runat="server" Text="Self Rating" AllowBlank="false" Width="70" DataIndex="SelfRating">
                                            <Editor>
                                                <ext:TextField ID="TextFieldSelfRating" runat="server" />
                                            </Editor>
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <Plugins>
                                    <ext:CellEditing ID="CellEditing5" runat="server" ClicksToEdit="1"></ext:CellEditing>
                                </Plugins>
                                <SelectionModel>
                                    <ext:RowSelectionModel ID="RowSelectionModel3" runat="server" Mode="Multi" />
                                </SelectionModel>
                                <Plugins>
                                    <ext:CellEditing ID="CellEditing6" runat="server" />
                                </Plugins>            
                                <TopBar>
                                    <ext:Toolbar ID="Toolbar4" runat="server">
                                        <Items>                        
                                            <ext:Button ID="Button4" runat="server" Icon="Add">
                                                <Listeners>
                                                    <Click Handler="var grid = #{GridPanelSkill},
                                                                    store = grid.store;
                                                                    store.insert(0, { 'CandidateId':'00000000-0000-0000-0000-000000000000'});
                                                                    grid.editingPlugin.startEdit(store.getAt(0), grid.columns[0]);" />
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="Button5" runat="server" Icon="Delete">
                                                <Listeners>
                                                    <Click Handler="#{GridPanelSkill}.deleteSelected()"></Click>
                                                </Listeners>
                                            </ext:Button>
                                            <ext:Button ID="Button6" runat="server" Icon="Disk">
                                                <DirectEvents>
                                                    <Click OnEvent="OnClickSaveSkill">
                                                        <ExtraParams>
                                                            <ext:Parameter Name="data" Value="#{StoreSkill}.getChangedData()" Encode="true" Mode="Raw"></ext:Parameter>
                                                        </ExtraParams>
                                                        <EventMask ShowMask="true" Msg="Saving..." MinDelay="500"/>
                                                    </Click>
                                                </DirectEvents>
                                            </ext:Button>
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                            </ext:GridPanel>
                           </Items>
                            </ext:Panel>
                        </Items>
                    </ext:Container>
                </Items>
            </ext:Viewport>
            <ext:GridPanel 
                ID="GridPanelProject" 
                runat="server" 
                Title="Project"
                Hidden="true"
                OnReadData ="Refresh_ProjectList"
                Width="1000" 
                Height="200">
                <Store>
                    <ext:Store 
                        ID="StoreProject"
                        runat="server"             
                        PageSize="10">
                        <Model>
                            <ext:Model ID="ModelProject" runat="server" IDProperty="Id">
                                <Fields>
                                    <ext:ModelField Name="Title" />
                                    <ext:ModelField Name="Client" />
                                    <ext:ModelField Name="Role" />
                                    <ext:ModelField Name="StartDate"/>
                                    <ext:ModelField Name="EndDate" />
                                    <ext:ModelField Name="TeamSize" Type="Int"/>
                                    <ext:ModelField Name="SkillsUsed"/>
                                    <ext:ModelField Name="Details"/>
                                    <ext:ModelField Name="CandidateId" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModelProject" runat="server">
                    <Columns>
                        <ext:Column ID="ColumnTitle" runat="server" Text="Title" Width="100" AllowBlank="false" DataIndex="Title" Flex="1">
                            <Editor>
                                <ext:TextField ID="TextFieldTite" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="ColumnClient" runat="server" Text="Client" Width="150" AllowBlank="false" DataIndex="Client">
                            <Editor>
                                <ext:TextField ID="TextFieldClient" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="ColumnDetails" runat="server" Text="Details" Width="200" AllowBlank="false" DataIndex="Details">
                            <Editor>
                                <ext:TextArea ID="TextFieldDetails" row="25" column="30" Grow="true" maxrow="50" AllowBlank="false" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="ColumnRole" runat="server" Text="Role" AllowBlank="false" Width="125" DataIndex="Role">
                            <Editor>
                                <ext:TextField ID="TextField1" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:DateColumn ID="DateColumnStartDate" 
                            runat="server" 
                            Text="Start Date"
                            Width="100"
                            AllowBlank="false"
                            DataIndex="StartDate" 
                            Format="dd-MM-yyyy">
                            <Editor>
                                <ext:DateField ID="DateFieldStartDate" runat="server" />
                            </Editor>
                        </ext:DateColumn>
                        <ext:DateColumn ID="DateColumnEndDate" 
                            runat="server"
                            Text="End Date"
                            Width="100"
                            AllowBlank="false"
                            DataIndex="EndDate"
                            Format="dd-MM-yyyy">
                            <Editor>
                                <ext:DateField ID="DateFieldEndDate" runat="server" />
                            </Editor>
                        </ext:DateColumn>
                        <ext:Column ID="ColumnTeamSize" runat="server" Text="Team Size" Width="75" AllowBlank="false" DataIndex="TeamSize">
                            <Editor>
                                <ext:TextField ID="TextFieldTeamSize" runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column ID="ColumnSkillsUsed" runat="server" Text="Skills Used" AllowBlank="false" Width="120" DataIndex="SkillsUsed">
                            <Editor>
                                <ext:TextField ID="TextFieldSkillsUsed" runat="server" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <Plugins>
                    <ext:CellEditing ID="CellEditing3" runat="server" ClicksToEdit="1"></ext:CellEditing>
                </Plugins>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" Mode="Multi" />
                </SelectionModel>           
                <Plugins>
                    <ext:CellEditing ID="CellEditing4" runat="server" />
                </Plugins>
                <TopBar>
                    <ext:Toolbar ID="Toolbar3" runat="server">
                        <Items>                        
                            <ext:Button ID="Button1" runat="server" Icon="Add">
                                <Listeners>
                                    <Click Handler="var grid = #{GridPanelProject},
                                                    store = grid.store;
                                                    store.insert(0, { 'CandidateId':'00000000-0000-0000-0000-000000000000'});
                                                    grid.editingPlugin.startEdit(store.getAt(0), grid.columns[0]);" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button2" runat="server" Icon="Delete">
                                <Listeners>
                                    <Click Handler="#{GridPanelProject}.deleteSelected()"></Click>
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button3" runat="server" Icon="Disk">
                                <DirectEvents>
                                    <Click OnEvent="OnClickSaveProject">
                                        <ExtraParams>
                                            <ext:Parameter Name="data" Value="#{StoreProject}.getChangedData()" Encode="true" Mode="Raw"></ext:Parameter>
                                        </ExtraParams>
                                        <EventMask ShowMask="true" Msg="Saving..." MinDelay="500"/>
                                    </Click>
                                </DirectEvents>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:GridPanel> 
        </form>
  9. #9
    A Viewport must be a top level container inside the <form>. All the rest things should be inside the Viewport (expect a ResourceManager).

    After fixing that, please provide a runnable test case. We should be able to copy, paste and run without any changes.

    Also please simplify the example as much as you can.

    The form contains two panels(ext:Panel) and one grid panel (ext:GridPanel).
    I don't think all the rest things are required. For example, all those FieldContainers.

    Also you can replace the GridPanel with a Panel. It doesn't matter in this case if we are talking about layouting.

    Also please provide a mockup of required layout.
  10. #10
    I am providing complete form in CODE tag.
    Please ensure you simplify your code sample down to only the minimum amount of code required to demonstrate the problem. Generally <100 should ever be required. 80% of issues can be demonstrated in <50 lines of code.

    The sample you posted throws an Exception and is unrunable.
    Geoffrey McGill
    Founder
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Align notification box center of the screen
    By Maitreya in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 25, 2013, 3:50 PM
  2. put ext:Window in center of the screen
    By Holly in forum 2.x Help
    Replies: 2
    Last Post: Nov 07, 2013, 12:33 PM
  3. [CLOSED] how to set tabpanel align center in the screen
    By hdsoso in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 06, 2013, 11:22 AM
  4. Replies: 2
    Last Post: Jun 23, 2012, 2:17 PM
  5. Windows always on the center of screen
    By reiben in forum 1.x Help
    Replies: 1
    Last Post: Dec 09, 2010, 11:56 AM

Tags for this Thread

Posting Permissions