This article helps that how we create a card view with tab and access multiple forms,grids or tabular data form(as our requirement),with single click on the tab of the card view.

Ext.onReady(function () {     //call onReady function
    Ext.create('Ext.tab.Panel', {   //create object of tab panel class
        requires: ['Ext.layout.container.Card'],  //Define requirement
        xtype: 'layout-cardtabs',        //layout type
        style: 'background-color:#dfe8f6;',
        width: 500,
        height: 400,
        renderTo: document.body,  //render to body of html page
        bodyPadding: 15,
        items: [         //Items of card tab
        {
            title: 'Testing Tab 1',
            width: 400,
            height: 300,
            margin: '5 5 5 5',
            items: [{     //Items of first tab
                xtype: 'form',
                border: true,
                layout: 'form',
                padding: 10,
                margin: '5 5 5 5',
                id: 'userForm',
                title: 'User Form',
                items: [{
                    xtype: 'textfield',
                    fieldLabel: 'Name',
                    name: 'txtName',
                    id: 'txtName'
                }, {
                    xtype: 'textfield',
                    fieldLabel: 'Father name',
                    name: 'txtfatherName',
                    id: 'txtfatherName'
                }, {
                    xtype: 'datefield',
                    fieldLabel: 'D.O.B',
                    name: 'dtfield',
                    id: 'dtfield'
                }, {
                    xtype: 'textarea',
                    fieldLabel: 'Address',
                    name: 'txtAreaAddress',
                    id: 'txtAreaAddress'
                }, {
                    xtype: 'numberfield',
                    fieldLabel: 'Contact Number',
                    maxValue: 999999999,
                    minValue: 99,
                    name: 'nmbrFldContactNo',
                    id: 'nmbrFldContactNo'
                }, {
                    xtype: 'button',
                    text: 'Submit',
                    width: '100%',
                    layout: '',
                    id: 'btnId',
                    listeners: {
                        click: function () {
                            var form = Ext.getCmp('userForm');
                            console.log(form);
                            var values = form.getValues();
                            console.log(values);
                            Ext.Ajax.request({
                                url: '.\User\Save',
                                method: 'POST',
                                jsonData: {
                                    name: values.txtName,
                                    fName: values.txtfatherName,
                                    address: values.txtAreaAddress,
                                    dob: values.dtfield,
                                    contact: values.nmbrFldContactNo
                                },
                                success: function () {
                                    alert('Record inserted successfUlly');
                                },
                                failure: function () {
                                    alert('Record insertion failed');
                                }
                            });
                        }
                    }
                }]
            }]
        },
        {
            title: 'Testing Tab 2',
            items: [{   //Items of second tab 
                xtype: 'grid',
                width: '100%',
                hieght: '400',
                title: 'User details',
                columns: [   //define fields of the grid(Columns name)
                    {
                        text: 'Name',
                        dataIndex: 'name'
                    },
                    {
                        text: 'Father Name',
                        dataIndex: 'fatherName'
                    },
                    {
                        text: 'DOB',
                        dataIndex: 'dob'
                    },
                    {
                        text: 'Address',
                        dataIndex: 'address'
                    },
                    {
                        text: 'Contact',
                        dataIndex: 'contact'
                    }],
            }]
        },
        {
            title: 'Testing Tab 3',    //Third tab display details
            html:'Its a example of card view with tabs,thats provide multiple task at one place using multiple page accessed by tabs'
        }
        ]
    });
});

After the above tabCardView we can create html page for render view of card view.

Code of html page as follows:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
    <script src="app/view/tabView.js"></script>
</head>
<body>
</body>
</html>