分機js 4：在中心區域添加新選項卡

在我的代碼中，我在中心區域的一個選項卡中給出了網格。這裏是我的完整代碼分機js 4：在中心區域添加新選項卡

<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>

如何在中心區域添加新標籤頁？請幫助

來源

2013-11-02 insanity

我打開了一個小提示，告訴你我是如何做到的，你只需要添加一個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' 
      }]   
     }] 
    }); 
});

來源

2013-11-05 15:06:18 bldoron

謝謝你的工作。 :) – insanity

分機js 4：在中心區域添加新選項卡

回答

相關問題