Can't have 2 grids on Form With Tab panel

[m0f]

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:
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!

[fabricio.murta]

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!