/*
* Ext JS Library 2.0 Beta 1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
});
// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
url: 'sheldon.xml',
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup', 'DetailPageURL'
])
});
var cm = new Ext.grid.ColumnModel([
{header: "Author", width: 120, dataIndex: 'Author'},
{header: "Title", width: 180, dataIndex: 'Title'},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer'},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup'},
{header: "URL", width: 350, dataIndex: 'DetailPageURL'}
]);
cm.defaultSortable = true;
// create the grid
var grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
renderTo:'example-grid',
width:890,
height:200
});
// tab generation code
var index = 0;
while(index < 3){
addTab();
}
/* ds.load(); */
function addTab()
{
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '
'
+ Ext.example.bogusMarkup,
closable:true
}).show();
}
new Ext.Button({
text: 'Add Tab',
handler: addTab,
iconCls:'new-tab'
}).render(document.body, 'tabs');
});