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.

Design of Card view with tab in Sencha ExtJs

Design of Card view with tab in Sencha ExtJs

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>

 

  Modified On Dec-20-2017 01:20:45 AM

Leave Comment