---
title: "Design of Card view with tab in Sencha ExtJs"
description: "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"
author: "Hemant Patel"
published: 2017-01-24
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/12242/design-of-card-view-with-tab-in-sencha-extjs
category: "sencha extjs"
tags: ["sencha"]
reading_time: 8 minutes
---
# Design of Card view with tab in Sencha ExtJs
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:
```
```
---
Original Source: https://www.mindstick.com/articles/12242/design-of-card-view-with-tab-in-sencha-extjs
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.