在我的代码中，我在中心区域的一个选项卡中给出了网格。这是我的完整代码
<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>
如何在中心区域添加新标签？请帮忙
最佳答案
我打开了一个 fiddle 来向你展示我是如何做到的，你只需要在你的中心区域添加一个 tabpanel。
我希望这就是 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'
}]
}]
});
});
关于extjs - Ext js 4 : Add new tab in center region，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19739590/