Geek Answers Handbook

Ext js 4: add a new tab to the center of the area

In my code, I gave the grid in one tab in the central area. Here is my full code

<html>
<head>
<title>Ext Js 4.0</title>
<link rel="stylesheet" type="text/css"
href="E:/Sikandar/extjs/ext-4.2.1.883/resources/css/ext-all.css" />
<script src="E:/Sikandar/extjs/ext-4.2.1.883/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
data: [
        [
            1,
            "Office Space",
            "Mike Judge",
            "1999-02-19",
            1,
            "Work Sucks",
            "19.95",
            1
        ],
        [
            3,
            "Super Troopers",
            "Jay Chandrasekhar",
            "2002-02-15",
            1,
            "Altered State Police",
            "14.95",
            1
        ]
    ]
});
var grid = Ext.create('Ext.grid.Panel',{
renderTo: document.body,
title: 'Movie Database',
layout:'fit',
store: store,
columns: [
    {header: "Id", dataIndex: 'id', hidden:true},
    {header: "Title", dataIndex: 'title'},
    {header: "Director", dataIndex: 'director'},
    {header: "Released", dataIndex: 'released',renderer: Ext.util.Format.dateRenderer('m/d/Y')},
    {header: "Genre", dataIndex: 'genre'},
    {header: "Tagline", dataIndex: 'tagline'}
]
});
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Implementing Ext Js</h1>',
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 150
            // could use a TreePanel or AccordionLayout for navigational items
        },  
            {
     region: 'center',
     layout:'fit',
     title: 'Practice_Till_Date',
     id:'center',
     border: true,
     items:[
     grid]
   }]
    });
});
</script>

</head>
<body>
<!-- Nothing in the body -->

</body>
</html>

How to add a new tab to the center? please, help

+4
source share
1 answer

I opened the violin to show you how I did it, you just need to add a tabpanel to your center area.

Hope this is what you were looking for .

    Ext.onReady(function() {
var store = Ext.create('Ext.data.ArrayStore', {
fields:['id','title', 'director', 'released', 'genre','tagline', 'price', 'available'],
data: [
        [
            1,
            "Office Space",
            "Mike Judge",
            "1999-02-19",
            1,
            "Work Sucks",
            "19.95",
            1
        ],
        [
            3,
            "Super Troopers",
            "Jay Chandrasekhar",
            "2002-02-15",
            1,
            "Altered State Police",
            "14.95",
            1
        ]
    ]
});
var grid = Ext.create('Ext.grid.Panel',{
renderTo: document.body,
title: 'Movie Database',
layout:'fit',
store: store,
columns: [
    {header: "Id", dataIndex: 'id', hidden:true},
    {header: "Title", dataIndex: 'title'},
    {header: "Director", dataIndex: 'director'},
    {header: "Released", dataIndex: 'released',renderer: Ext.util.Format.dateRenderer('m/d/Y')},
    {header: "Genre", dataIndex: 'genre'},
    {header: "Tagline", dataIndex: 'tagline'}
]
});
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            html: '<h1 class="x-panel-header">Implementing Ext Js</h1>',
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
            width: 150
            // could use a TreePanel or AccordionLayout for navigational items
        }, {
             region: 'center',
            xtype: 'tabpanel',
             title: null,
             id:'center',
             border: true,            
             items:[{
                xtype: 'panel',
                id: 'panel1',
                title: 'Practice_Till_Date',
                items:[grid]
             }, {
//                xtype: 'panel',
//                id: 'panel2',
                title: 'Another tab',
                 html: 'bla bla bla'
             }]        
        }]
    });
});
+2
source

More articles:


All Articles