Integrating an Editor Grid inside a Tab [Archive]

robholmes

13 Jul 2007, 7:33 AM

Hi everyone,

Please forgive me if this topic has been covered already. I've had a good look around the forum but couldn't find anything which is helping me.

I need to put some Editor Grids inside some tabs in a TabPanel. So far I've got them working separately on the same page but I cannot integrate the Editor Grid inside the Tab. I am using the examples from the documentation centre.

The tabs appear correctly, and the divs for the grid are in the source, but there is nothing showing in the browser.

Can someone please offer me some help / pointers in the right direction? I'm losing hair rapidly ;)

Here's the code I am using:

robhTabs.html -

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="/js/jquery/jquery.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-plugins.js"></script>
<script type="text/javascript" src="/js/ext/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="/js/ext/ext-all.js"></script>
<script type="text/javascript" src="/js/js-tabs.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="/css/ext-all.css" />
</head>
<body>


<div id="jtabs" class="tabs"></div>

</body>
</html>

js-tabs.js -

var TabsExample = {
init : function(){

// tabs built from JS
var jtabs = new Ext.TabPanel('jtabs');

// create tabs
var tab1 = jtabs.addTab('jtabs-1', "Actual");
tab1.setUrl('robhTabsTest2.html', null, false);

var tab2 = jtabs.addTab('jtabs-2', "Plan");
tab2.setUrl('plants.html', null, false);

// set initial active tab
jtabs.activate('jtabs-1');
}
}
Ext.EventManager.onDocumentReady(TabsExample.init, TabsExample, true);

robhTabsTest2.html -

<select name="light" id="light" style="display: none;">
<option value="Shade">Shade</option>
<option value="Mostly Shady">Mostly Shady</option>
<option value="Sun or Shade">Sun or Shade</option>
<option value="Mostly Sunny">Mostly Sunny</option>
<option value="Sunny">Sunny</option>
</select>

<div id="grid-panel" style="height:300px;">
<div id="editor-grid"></div>
</div>

<script type="text/javascript" src="/js/edit-grid.js"></script>

edit-grid.js -

/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/

Ext.onReady(function(){

function formatBoolean(value){
return value ? 'Yes' : 'No';
};

function formatDate(value){
return value ? value.dateFormat('M d, Y') : '';
};
// shorthand alias
var fm = Ext.form, Ed = Ext.grid.GridEditor;

// the column model has information about grid columns
// dataIndex maps the column to the specific data field in
// the data store (created below)
var cm = new Ext.grid.ColumnModel([{
header: "Common Name",
dataIndex: 'common',
width: 300,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "Botanical Name",
dataIndex: 'botanical',
width: 320,
editor: new Ed(new fm.TextField({
allowBlank: false
}))
},{
header: "Light",
dataIndex: 'light',
width: 130,
editor: new Ed(new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'light',
lazyRender:true
}))
},{
header: "Price",
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: new Ed(new fm.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 10
}))
},{
header: "Available",
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: new Ed(new fm.DateField({
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}))
},{
header: "Indoor?",
dataIndex: 'indoor',
width: 55,
renderer: formatBoolean,
editor: new Ed(new fm.Checkbox())
}]);

// by default columns are sortable
cm.defaultSortable = true;

// this could be inline, but we want to define the Plant record
// type so we can add records dynamically
var Plant = Ext.data.Record.create([
// the "name" below matches the tag name to read, except "availDate"
// which is mapped to the tag "availability"
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'}, // automatic date conversions
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]);

// create the Data Store
var ds = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({url: 'plants.xml'}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "plant" tag
record: 'plant'
}, Plant)
});

// create the editor grid
var grid = new Ext.grid.EditorGrid('editor-grid', {
ds: ds,
cm: cm,
//selModel: new Ext.grid.RowSelectionModel(),
enableColLock:false
});

var layout = Ext.BorderLayout.create({
center: {
margins:{left:3,top:3,right:3,bottom:3},
panels: [new Ext.GridPanel(grid)]
}
}, 'grid-panel');

// render it
grid.render();

var gridHead = grid.getView().getHeaderPanel(true);
var tb = new Ext.Toolbar(gridHead, [{
text: 'Add Plant',
handler : function(){
var p = new Plant({
common: 'New Plant 1',
light: 'Mostly Shade',
price: 0,
availDate: new Date(),
indoor: false
});
grid.stopEditing();
ds.insert(0, p);
grid.startEditing(0, 0);
}
}]);

// trigger the data store load
ds.load();
});

Please if anyone can help, it would be greatly appreciated. Please? Please?

Thank you,

Rob