Ok, I've created a stripped down version of the test: http://mikev.ath.cx/mike/site/test.html
test.html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>UI Test</title>
<script type="text/javascript" src="templates/include/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="templates/include/ext/ext-all.js"></script>
<script type="text/javascript" src="templates/include/test.js"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="templates/include/ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="templates/include/ext/resources/css/xtheme-aero.css">
</head>
<body>
<!-- The tabs -->
<div id="tabs">
<div id="tabfiles" class="tab-content">
<div id="file-ct" style="width:auto;height:800px;"></div>
</div>
<div id="tabmixes" class="tab-content">
<div id="mix-ct" style="width:auto;height:800px;"></div>
</div>
</body>
</html>
test.js is:
var ManageMixes = {
init : function(){
// File view
var cview = Ext.DomHelper.append('mix-ct',
{cn:[{id:'main-tb2'},{id:'cbody2'}]}
);
// Category view
var cnav = Ext.DomHelper.append('mix-ct',
{cn:[{id:'nav-tb2'},{id:'cnavtree2'}]}
);
// create our layout
var layout = new Ext.BorderLayout('mix-ct', {
west: {
split:true,
initialSize: 230,
minSize: 175,
maxSize: 400,
titlebar: true,
margins:{left:5,right:0,bottom:5,top:5}
},
center: {
title: 'Files',
margins:{left:0,right:5,bottom:5,top:5}
}
}, 'mix-ct');
var cm = new Ext.grid.ColumnModel([{
header: "test",
width: 100
},{
header: "test",
width: 100
}
]);
var ds = new Ext.data.Store({});
// create the editor grid
var grid = new Ext.grid.EditorGrid('cbody2', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock:false
});
// render it
grid.render();
layout.beginUpdate();
layout.add("west", new Ext.ContentPanel(cnav, {
autoCreate:true,
title:'Categories',
autoScroll:true,
fitToFrame:true
}));
layout.add("center", new Ext.GridPanel(grid, {
autoScroll:true,
initialSize: 100,
minSize: 100,
fitToFrame:true,
resizeEl:'cbody2'
}));
layout.endUpdate();
}
};
/******************************************************************************************************************************************************/
var ManageFiles = {
init : function(){
// File view
var cview = Ext.DomHelper.append('file-ct',
{cn:[{id:'main-tb'},{id:'cbody'}]}
);
// Category view
var cnav = Ext.DomHelper.append('file-ct',
{cn:[{id:'nav-tb'},{id:'cnavtree'}]}
);
// create our layout
var layout = new Ext.BorderLayout('file-ct', {
west: {
split:true,
initialSize: 230,
minSize: 175,
maxSize: 400,
titlebar: true,
margins:{left:5,right:0,bottom:5,top:5}
},
center: {
title: 'Files',
margins:{left:0,right:5,bottom:5,top:5}
}
}, 'file-ct');
var cm = new Ext.grid.ColumnModel([{
header: "test",
width: 100
},{
header: "test",
width: 100
}
]);
var ds = new Ext.data.Store({});
// create the editor grid
var grid = new Ext.grid.EditorGrid('cbody', {
ds: ds,
cm: cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock:false
});
// render it
grid.render();
layout.beginUpdate();
layout.add("west", new Ext.ContentPanel(cnav, {
autoCreate:true,
title:'Categories',
autoScroll:true,
fitToFrame:true
}));
layout.add("center", new Ext.GridPanel(grid, {
autoScroll:true,
initialSize: 100,
minSize: 100,
fitToFrame:true,
resizeEl:'cbody'
}));
layout.endUpdate();
}
}
var TabBar = {
init : function(){
var tabs = new Ext.TabPanel('tabs');
tabs.addTab('tabfiles', "Manage Files");
tabs.addTab('tabmixes', "Manage Mixes");
tabs.activate('tabfiles');
}
}
Ext.onReady(function(){
TabBar.init();
ManageFiles.init();
ManageMixes.init();
});