yarr
20 May 2007, 4:53 AM
I've just started evaluating Ext using JQuery and am trying to get a grid to work. I've copied most of the code from the simple array example in the api docs but it throws an error reported by firebug as "this.config[col] has no properties" on line 26173 of ext-all-debug.js which is the getColumnWidth method.
Setting a breakpoint i see that this method is being called with a column index of -1??? this is from an anonymous function, line 25721!?
Anyone know why this is, or experienced this before? thanks
I tried putting ds.load() after grid.render() which was suggested in a topic about the same error message but that just produced more errors!
Debugging a little more with firebug i see that it gets this column value of -1 from calling getIndexById (line 26088) with the column names expecting the objects in the array passed to the ColumnModel constructor to each have id properties which most don't in any of the grid examples (if it doesn't find one with a matching id it returns -1). So I added ids to each of the objects matching the respective dataIndex fields. Now, no errors are produced but the code still doesn't work!
any ideas? thanks
<!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>
<title>Ext Test</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="ext/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ytheme-vista.css"/>
</head>
<body>
<div id="layoutdiv"><div id="griddiv"></div></div>
<script type="text/javascript">
var mydata = [
['Test', 10],
['Foo', 40],
['Bar', 5]
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(mydata),
reader: new Ext.data.ArrayReader({}, [
{name: 'col1'},
{name: 'col2'}
])
});
ds.load();
var colmodel = new Ext.grid.ColumnModel([
{header: 'Column 1', width: 160, sortable: true, locked: false, dataIndex: 'col1'},
{header: 'Column 2', width: 160, sortable: true, locked: false, dataIndex: 'col2'}
]);
var grid = new Ext.grid.Grid('griddiv', {ds: ds, cm: colmodel, autoExpandColumn: 'col1'});
var layout = Ext.BorderLayout.create({
center: {
margins: {left: 3, top: 3, right: 3, bottom: 3},
panels: [new Ext.GridPanel(grid)]
}
}, 'layoutdiv');
grid.render();
grid.getSelectionModel().selectFirstRow();
</script>
</body>
</html>
update: actually, if i remove the BorderLayout statement (still keeping the id properties i added to the objects in the ColumnModel arguments) then the grid does display! now to figure out why the that doesn't work!
Setting a breakpoint i see that this method is being called with a column index of -1??? this is from an anonymous function, line 25721!?
Anyone know why this is, or experienced this before? thanks
I tried putting ds.load() after grid.render() which was suggested in a topic about the same error message but that just produced more errors!
Debugging a little more with firebug i see that it gets this column value of -1 from calling getIndexById (line 26088) with the column names expecting the objects in the array passed to the ColumnModel constructor to each have id properties which most don't in any of the grid examples (if it doesn't find one with a matching id it returns -1). So I added ids to each of the objects matching the respective dataIndex fields. Now, no errors are produced but the code still doesn't work!
any ideas? thanks
<!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>
<title>Ext Test</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="ext/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ytheme-vista.css"/>
</head>
<body>
<div id="layoutdiv"><div id="griddiv"></div></div>
<script type="text/javascript">
var mydata = [
['Test', 10],
['Foo', 40],
['Bar', 5]
];
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(mydata),
reader: new Ext.data.ArrayReader({}, [
{name: 'col1'},
{name: 'col2'}
])
});
ds.load();
var colmodel = new Ext.grid.ColumnModel([
{header: 'Column 1', width: 160, sortable: true, locked: false, dataIndex: 'col1'},
{header: 'Column 2', width: 160, sortable: true, locked: false, dataIndex: 'col2'}
]);
var grid = new Ext.grid.Grid('griddiv', {ds: ds, cm: colmodel, autoExpandColumn: 'col1'});
var layout = Ext.BorderLayout.create({
center: {
margins: {left: 3, top: 3, right: 3, bottom: 3},
panels: [new Ext.GridPanel(grid)]
}
}, 'layoutdiv');
grid.render();
grid.getSelectionModel().selectFirstRow();
</script>
</body>
</html>
update: actually, if i remove the BorderLayout statement (still keeping the id properties i added to the objects in the ColumnModel arguments) then the grid does display! now to figure out why the that doesn't work!