Editable Grid problems

[Acaeris]

I've been trying to set up an editable grid for a new project at work but I'm now stuck. I've succeeded at getting the YUI grid to work but I'd prefer using Ext as it is far more user and developer friendly than I've found YUI.

All I keep getting when I try and use the code below is the message 'this.addEvents is not a function'. Can anyone spot what I've missed?


Ext.onReady(function() {
var exampleData = [
['Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(exampleData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'make'},
{name: 'model'},
{name: 'cc'},
{name: 'gvw'},
{name: 'seats'},
{name: 'year'},
{name: 'value'},
{name: 'regno'},
{name: 'cover'}
])
});

var yg = Ext.form; var ege = Ext.grid.GridEditor;
var cols = [{
header: 'Vehicle Make',
dataIndex: 'make',
width: 120,
editor: new ege(yg.TextField())
}, {
header: 'Vehicle Model',
dataIndex: 'model',
width: 120,
editor: new ege(yg.TextField())
}, {
header: 'CC',
dataIndex: 'cc',
width: 80,
editor: new ege(yg.TextField())
}, {
header: 'GVW',
dataIndex: 'gvw',
width: 80,
editor: new ege(yg.TextField())
}, {
header: 'Seats',
dataIndex: 'seats',
width: 80,
editor: new ege(yg.TextField())
}, {
header: 'Year',
dataIndex: 'year',
width: 80,
editor: new ege(yg.TextField())
}, {
header: 'Value',
dataIndex: 'value',
width: 100,
editor: new ege(yg.TextField())
}, {
header: 'Reg No.',
dataIndex: 'regno',
width: 120,
editor: new ege(yg.TextField())
}, {
header: 'Cover',
dataIndex: 'cover',
width: 80,
editor: new ege(yg.TextField())
}];
var colModel = new Ext.grid.ColumnModel(cols);

var grid = new Ext.grid.EditorGrid('datatable', {ds: ds, cm: colModel});
grid.render();
ds.load();
Ext.get('datatable').show();
});

[fay]

You need to create your TextFields, so just add new before each one:


Ext.onReady(function() {
var exampleData = [
['Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(exampleData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'make'},
{name: 'model'},
{name: 'cc'},
{name: 'gvw'},
{name: 'seats'},
{name: 'year'},
{name: 'value'},
{name: 'regno'},
{name: 'cover'}
])
});

var yg = Ext.form; var ege = Ext.grid.GridEditor;
var cols = [{
header: 'Vehicle Make',
dataIndex: 'make',
width: 120,
editor: new ege(new yg.TextField())
}, {
header: 'Vehicle Model',
dataIndex: 'model',
width: 120,
editor: new ege(new yg.TextField())
}, {
header: 'CC',
dataIndex: 'cc',
width: 80,
editor: new ege(new yg.TextField())
}, {
header: 'GVW',
dataIndex: 'gvw',
width: 80,
editor: new ege(new yg.TextField())
}, {
header: 'Seats',
dataIndex: 'seats',
width: 80,
editor: new ege(new yg.TextField())
}, {
header: 'Year',
dataIndex: 'year',
width: 80,
editor: new ege(new yg.TextField())
}, {
header: 'Value',
dataIndex: 'value',
width: 100,
editor: new ege(new yg.TextField())
}, {
header: 'Reg No.',
dataIndex: 'regno',
width: 120,
editor: new ege(new yg.TextField())
}, {
header: 'Cover',
dataIndex: 'cover',
width: 80,
editor: new ege(new yg.TextField())
}];
var colModel = new Ext.grid.ColumnModel(cols);

var grid = new Ext.grid.EditorGrid('datatable', {ds: ds, cm: colModel});
grid.render();
ds.load();
Ext.get('datatable').show();
});

[Acaeris]

Thank you, that solved that one. Now I've got another one which has baffled me (and is likely to be a simple a problem as the first one).

Code for Column Model:

editor: new ege(new yg.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform: 'cover',
lazyrender: true
}))

Code for Combo Box:

<select name="cover" id="cover" style="display: none;">
<option value="COMP">Comprehensive</option>
<option value="TPFT">Third Party Fire &amp; Theft</option>
<option value="TPO">Third Party Only</option>
</select>

The editor use the select box but it always stays shown and appears where it is in the HTML rather than over the table cell... it also doesn't load any of the graphics for the menu whereas the rest of the table does.

[Acaeris]

I still haven't found a solution to my second problem, does anyone have any idea what I'm doing wrong?

[Animal]

Are you running in Firefox with Firebug installed?

That might show up some problems.

[Acaeris]

The only thing I can find is that the graphics are pointing to extjs.com/s.gif. Firebug isn't returning any errors and neither is developer toolbar.

[Animal]

You are only including that <select> once in your document aren't you?

[Acaeris]

Yes, it only appears once and it's right before the </body>

I've fixed the images but the drop down still doesn't appear in the over the cell. It always appears down the bottom of the page.

[Animal]

Can you wrap up the code into an HTML file that drops into /examples/grid so that we can take a look?

[Acaeris]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-aero.css">
<!-- Dependencies -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var exampleData = [
['1', 'Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['2', 'Ford', 'Fiesta', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['3', 'Subaru', 'Impreza', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['4', 'Fiat', 'Panda', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(exampleData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'id'},
{name: 'make'},
{name: 'model'},
{name: 'cc'},
{name: 'gvw'},
{name: 'seats'},
{name: 'year'},
{name: 'value'},
{name: 'regno'},
{name: 'cover'}
])
});

var yg = Ext.form; var ege = Ext.grid.GridEditor;
var cols = [{
header: '',
dataIndex: 'id',
width: 20,
editor: new ege(new yg.TextField())
}, {
header: 'Vehicle Make',
dataIndex: 'make',
width: 100,
editor: new ege(new yg.TextField())
}, {
header: 'Vehicle Model',
dataIndex: 'model',
width: 100,
editor: new ege(new yg.TextField())
}, {
header: 'CC',
dataIndex: 'cc',
width: 40,
editor: new ege(new yg.TextField())
}, {
header: 'GVW',
dataIndex: 'gvw',
width: 40,
editor: new ege(new yg.TextField())
}, {
header: 'Seats',
dataIndex: 'seats',
width: 40,
editor: new ege(new yg.TextField())
}, {
header: 'Year',
dataIndex: 'year',
width: 40,
editor: new ege(new yg.TextField())
}, {
header: 'Value',
dataIndex: 'value',
width: 50,
editor: new ege(new yg.TextField())
}, {
header: 'Reg No.',
dataIndex: 'regno',
width: 80,
editor: new ege(new yg.TextField())
}, {
header: 'Cover',
dataIndex: 'cover',
width: 50,
editor: new ege(new yg.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform: 'cover',
lazyrender: true
}))
}];
var colModel = new Ext.grid.ColumnModel(cols);

var grid = new Ext.grid.EditorGrid('datatable', {ds: ds, cm: colModel});
grid.render();
ds.load();
Ext.get('datatable').show();
});
</script>
</head>

<body>
<div id="center">
<div style="margin: 3px 0px;"> <a href="#" style="border-left: 1px solid #aec1e1;" class="bclink">About You&nbsp;</a> <img src="../includes/link-link.png" width="10" height="23" border="0" class="bcimg" /> <a href="#" class="bclink">Fleet Details&nbsp;</a> <img src="../includes/link-cur.png" width="10" height="23" border="0" class="bcimg" /> <a href="#" class="bccurrent">Vehicle List &nbsp;</a> <img src="../includes/cur-dis.png" width="10" height="23" border="0" class="bcimg" /> <a href="#" class="bcdisabled" style="border-right: 1px solid #CCC;">Confirmation&nbsp;</a>
<div style="clear: both; height: 1px"></div>
</div>
<div style="width: 100%;">
<div class="help" style="margin-bottom: 5px; width: 636px;">
<p style="font-weight: bold;"><img src="../includes/help.png" width="16" height="16" /> How to use the form below:</p>
<p>To enter a vehicle just click on a cell of table and an edit box will appear, enter the text you need to enter and then click <span style="font-weight: bold;">OK</span></p>
<p>To add extra rows for vehicles just click on the <span style="font-weight: bold;">Add a Vehicle</span> button at the bottom right of the table</p>
<p>To remove the bottom row of the table click on the <span style="font-weight: bold;">Remove a Vehicle</span> button</p>
<p>When you have finished entering your vehicle list click the <span style="font-weight: bold;">Submit</span> button</p>
</div>
<div id="datatable" style="overflow: hidden; width: 656px; height: 125px;border:1px solid #aec1e1;visibility:hidden;">
</div>
<select name="cover" id="cover" style="display: none;">
<option value="COMP">Comprehensive</option>
<option value="TPFT">Third Party Fire &amp; Theft</option>
<option value="TPO">Third Party Only</option>
</select>
<div class="quotemain" style="width: 656px; margin-top: 5px;">
<table width="100%" cellspacing="0" border="0">
<tr>
<td style="width: 200px;"><form id="vehicles" method="post">
<input type="submit" name="submit" onclick="echotable();" value="Submit" tabindex="" />
</form></td>
<td style="text-align: right; vertical-align: top;"><input type="button" value="Add a vehicle" onclick="addvehicles();"><input type="button" value="Remove a vehicle" onclick="removevehicles();"></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>


There you go, it's doing the same thing in the examples/grid folder as well. The buttons currently do not do anything, so I apologise for any javascript errors in advance.

[Animal]

Best just create the CmoboBox rather than converting a select:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-aero.css">
<!-- Dependencies -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var exampleData = [
['1', 'Mitsubishi', 'Lancer', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['2', 'Ford', 'Fiesta', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['3', 'Subaru', 'Impreza', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT'],
['4', 'Fiat', 'Panda', '2000', '3849', '4', '1998', '32987', 'EX52ENG', 'TPFT']
];

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(exampleData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'id'},
{name: 'make'},
{name: 'model'},
{name: 'cc'},
{name: 'gvw'},
{name: 'seats'},
{name: 'year'},
{name: 'value'},
{name: 'regno'},
{name: 'cover'}
])
});
var store = new Ext.data.SimpleStore({
fields: ['type', 'desc'],
data : [["COMP", "Fully Comprehensive"],
["TPFT", "Third Party Fire & Theft"],
["TPO", "Third Party Only"]]
});
var combo = new Ext.form.ComboBox({
store: store,
valueField:'type',
displayField:'desc',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus:true,
editable:false,
listWidth:150
});

var yg = Ext.form; var ege = Ext.grid.GridEditor;
var cols = [{
header: '',
dataIndex: 'id',
width: 20,
editor: new ege(new yg.TextField())
}, {
header: 'Vehicle Make',
dataIndex: 'make',
width: 100,
editor: new ege(new yg.TextField())
}, {
header: 'Vehicle Model',
dataIndex: 'model',
width: 100,
editor: new ege(new yg.TextField())
}, {
header: 'CC',
dataIndex: 'cc',
width: 40,
editor: new ege(new yg.TextField())
}, {
header: 'GVW',
dataIndex: 'gvw',
width: 40,
editor: new ege(new yg.TextField())
}, {
header: 'Seats',
dataIndex: 'seats',
width: 40,
editor: new ege(new yg.TextField())
}, {
header: 'Year',
dataIndex: 'year',
width: 40,
editor: new ege(new yg.TextField())
}, {
header: 'Value',
dataIndex: 'value',
width: 50,
editor: new ege(new yg.TextField())
}, {
header: 'Reg No.',
dataIndex: 'regno',
width: 80,
editor: new ege(new yg.TextField())
}, {
header: 'Cover',
dataIndex: 'cover',
width: 150,
editor: new ege(combo)
}];
var colModel = new Ext.grid.ColumnModel(cols);

var grid = new Ext.grid.EditorGrid('datatable', {ds: ds, cm: colModel});
grid.render();
ds.load();
Ext.get('datatable').show();
});
</script>
</head>

<body>
<div id="center">
<div style="margin: 3px 0px;"> <a href="#" style="border-left: 1px solid #aec1e1;" class="bclink">About You&nbsp;</a> <img src="../includes/link-link.png" width="10" height="23" border="0" class="bcimg" /> <a href="#" class="bclink">Fleet Details&nbsp;</a> <img src="../includes/link-cur.png" width="10" height="23" border="0" class="bcimg" /> <a href="#" class="bccurrent">Vehicle List &nbsp;</a> <img src="../includes/cur-dis.png" width="10" height="23" border="0" class="bcimg" /> <a href="#" class="bcdisabled" style="border-right: 1px solid #CCC;">Confirmation&nbsp;</a>
<div style="clear: both; height: 1px"></div>
</div>
<div style="width: 100%;">
<div class="help" style="margin-bottom: 5px; width: 636px;">
<p style="font-weight: bold;"><img src="../includes/help.png" width="16" height="16" /> How to use the form below:</p>
<p>To enter a vehicle just click on a cell of table and an edit box will appear, enter the text you need to enter and then click <span style="font-weight: bold;">OK</span></p>
<p>To add extra rows for vehicles just click on the <span style="font-weight: bold;">Add a Vehicle</span> button at the bottom right of the table</p>
<p>To remove the bottom row of the table click on the <span style="font-weight: bold;">Remove a Vehicle</span> button</p>
<p>When you have finished entering your vehicle list click the <span style="font-weight: bold;">Submit</span> button</p>
</div>
<div id="datatable" style="overflow: hidden; width: 656px; height: 125px;border:1px solid #aec1e1;visibility:hidden;">
</div>
<div class="quotemain" style="width: 656px; margin-top: 5px;">
<table width="100%" cellspacing="0" border="0">
<tr>
<td style="width: 200px;"><form id="vehicles" method="post">
<input type="submit" name="submit" onclick="echotable();" value="Submit" tabindex="" />
</form></td>
<td style="text-align: right; vertical-align: top;"><input type="button" value="Add a vehicle" onclick="addvehicles();"><input type="button" value="Remove a vehicle" onclick="removevehicles();"></td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

[Acaeris]

Thank you very much, that has solved it.