articles

Home / DeveloperSection / Articles / Design of Card view with tab in Sencha ExtJs

Design of Card view with tab in Sencha ExtJs

Hemant Patel 3770 24-Jan-2017

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>

 


Updated 07-Sep-2019
Exploring the online world is my passion. have experience of #content writing #SEO #Digital Marketing #On-Page #Lead Generation #Content Analyst #Marketing Analyst... I could never stop at one point, continuously wanted to acquire more and more skills. My work for any organization will be full of passion and hard work.

Leave Comment

Comments

Liked By