Can't have 2 grids on Form With Tab panel

  1. #1

    Can't have 2 grids on Form With Tab panel

    Hello guys again,

    I think that i'm stuck once again. I'm trying to remake the Form With Tab Panel (https://examples.ext.net/#/layout/formlayout/overview - Form 5 example), and i want to put some grids in all the tabs.
    The thing is that the first grid is working in the "Personal Details" tab, but when i put again another grid table in the next tab "Phone Numbers" is not working. And i have no errors or something.

    Here is the index.cshtml:
    <ext-panel id="Panel5"
               title="Inner Tabs"
               width="960"
               bodyPadding="18"
               buttonAlign="Center">
        <items>
            <ext-tabPanel marginAsString="5px 0px 0px 0px"
                          activeTab="0"
                          plain="true"
                          height="235">
                <items>
                    <ext-panel title="Personal Details" bodyPadding="18" layout="Form">
                        <defaults>
                            <ext-add key="labelWidth" value="75" mode="Raw" />
                            <ext-add key="labelAlign" value="top" />
                        </defaults>
                        <items>
                            <!-- Configure a GridPanel and reference the Store above -->
                            <ext-gridPanel title="Grouped Header"
                                           id="gridPanel"
                                           width="1200"
                                           height="300"
                                           frame="true"
                                           StripeRows=true
                                           TrackOver=true>
                                <plugins>
                                    <ext-cellEditingPlugin>
                                        <directEvents>
    
                                        </directEvents>
                                    </ext-cellEditingPlugin>
                                </plugins>
                                <!-- Configure a Store -->
                                <store>
                                    <ext-store id="Store1" data="Model.GRIDDATA" autoLoad="true">
                                        <fields>
                                            <ext-integerDataField name="ID" />
                                            <ext-integerDataField name="True" />
                                        </fields>
                                    </ext-store>
                                </store>
                                <columns>
                                    <ext-column text="#" dataIndex="ID" />
                                    <ext-column text="True" dataIndex="True" />
                                </columns>
                                <viewConfig>
                                    <ext-tableView StripeRows="true"
                                                   TrackOver="true">
    
                                    </ext-tableView>
                                </viewConfig>
                                <bbar>
                                    <ext-toolbar>
                                        <items>
                                            <ext-button text="Print" iconCls="x-md md-icon-print" handler="this.up('grid').print();" />
                                        </items>
                                    </ext-toolbar>
                                </bbar>
                            </ext-gridPanel>
                        </items>
                    </ext-panel>
                    <ext-panel title="Phone Numbers" bodyPadding="18" layout="Form">
                        <defaults>
                            <ext-add key="labelWidth" value="75" mode="Raw" />
                            <ext-add key="labelAlign" value="top" />
                        </defaults>
                        <items>
                            <!-- Configure a GridPanel and reference the Store above -->
                            <ext-gridPanel title="Grouped Header"
                                           id="gridPanelTwo"
                                           width="1200"
                                           height="300"
                                           frame="true"
                                           StripeRows=true
                                           TrackOver=true>
                                <plugins>
                                    <ext-cellEditingPlugin>
                                        <directEvents>
    
                                        </directEvents>
                                    </ext-cellEditingPlugin>
                                </plugins>
                                <!-- Configure a Store -->
                                <store>
                                    <ext-store id="Store2" data="Model.GRIDDATATWO" autoLoad="true">
                                        <fields>
                                            <ext-integerDataField name="ID" />
                                            <ext-integerDataField name="False" />
                                        </fields>
                                    </ext-store>
                                </store>
                                <columns>
                                    <ext-column text="#" dataIndex="ID" />
                                    <ext-column text="False" dataIndex="False" />
                                </columns>
                                <viewConfig>
                                    <ext-tableView StripeRows="true"
                                                   TrackOver="true">
    
                                    </ext-tableView>
                                </viewConfig>
                                <bbar>
                                    <ext-toolbar>
                                        <items>
                                            <ext-button text="Print" iconCls="x-md md-icon-print" handler="this.up('grid').print();" />
                                        </items>
                                    </ext-toolbar>
                                </bbar>
                            </ext-gridPanel>
                        </items>
                        </items>
                    </ext-panel>
                    <ext-panel title="Biography" bodyPadding="18" layout="Fit">
                        <items>
                            <ext-htmlEditor />
                        </items>
                    </ext-panel>
                    <ext-panel id="Tab4"
                               title="Tab 4"
                               layout="Form"
                               bodyPadding="18">
                        <defaults>
                            <ext-add key="labelWidth" value="75" mode="Raw" />
                            <ext-add key="labelAlign" value="top" />
                        </defaults>
                        <items>
                            <ext-textField fieldLabel="Name" width="230" />
                            <ext-textField fieldLabel="Age" width="230" />
                        </items>
                    </ext-panel>
                </items>
            </ext-tabPanel>
        </items>
        <buttons>
            <ext-button text="Save" />
            <ext-button text="Cancel" />
        </buttons>
    </ext-panel>
    And here is the screenshot with how is looking on "Phone Numbers" Tab:
    Click image for larger version. 

Name:	grid.png 
Views:	17 
Size:	8.4 KB 
ID:	25504

    And how can i make the entire row editable? Because if i try to put Editable="True" is not working.

    Thank you in advance!
  2. #2
    Hello @m0f!

    Your code looks right and this should work. For the screenshot it looks like you got client-side javascript errors. Check your console output and mitigate the cause of the javascript error, then you may be able to see the grid.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 4
    Last Post: Jul 17, 2013, 12:25 AM
  2. Replies: 0
    Last Post: Jul 15, 2013, 6:39 PM
  3. Replies: 4
    Last Post: Apr 01, 2013, 5:12 AM
  4. Replies: 7
    Last Post: Mar 09, 2011, 8:15 PM
  5. Replies: 0
    Last Post: Apr 06, 2010, 10:01 AM

Posting Permissions