PDA

View Full Version : problem with gridpanel causing exception in ext-all.js



hworg
2 Jun 2009, 5:59 AM
hi all,

i'm pretty new to extjs and am slowly struggling through learning how it all works...anyway I've copied code from a few different places to get a grid example together, except it doesn't work -firebug gives me this following error


this.el is null
http://localhost/generation/ext/ext-all-debug.js
Line 14783is this a bug within ext(less likely) or have i not defined something properly(mode likely)? i seem to get these kind of errors fairly often where they are inside the ext code files themselves.

my code -

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<title id="page-title">Title</title>
<script type="text/javascript">
// Path to the blank image must point to a valid location on your server
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';
// Main application entry point
Ext.onReady(function() {

// *************************************************8

var data = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'test.php'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
idProperty: 'appname',
remoteSort: true,
fields: [
{name: 'icon'},
{name: 'appname'},
{name: 'author'},
{name: 'install', type: 'date', dateFormat: 'd/m/Y'},
{name: 'help'},
{name: 'desc'}
]
})
});
data.setDefaultSort('install', 'ASC');

// *************************************************8

var paging = new Ext.PagingToolbar({
pageSize: 16,
store: data,
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: 'No installed applications',
items: [
'-',
{
pressed: true,
enableToggle: true,
text: 'Show description',
cls: 'x-btn-text-icon details',
toggleHandler: function(button, pressed) {
var view = grid.getView();
view.showDesc = pressed;
view.refresh();
}
}
]
})

// *************************************************8

renderApp = function(value, p, record) {
return String.format("<b><a href='{0}' target='_blank'>{1}</a></b><a href='{0}' target='_blank'>{0}</a>",
record.data.help, value);
}

// *************************************************8

var grid = new Ext.grid.GridPanel({
el: 'ap-grid',
width: 700,
height: 500,
trackMouseOver: false,
disableSelection: true,
loadMask: true,
columns: [
{
id: 'appname',
header: 'Application',
dataIndex: 'appname',
width: 500,
renderer: renderApp,
sortable: true
},
{
header: 'Author',
dataIndex: 'author',
width: 100,
sortable: true
},
{
header: 'Installed',
dataIndex: 'install',
width: 100,
align: 'right',
sortable: true
}
],
viewConfig: {
forceFit: true,
enableRowBody: true,
showPreview: true,
getRowClass: function(record, idx, p, store) {
if (this.showApp) {
p.body = '<p>' + record.data.desc + '</p>';
return 'x-grid3-row-expanded';
}
return 'x-grid-row-collapsed';
}
},
bbar: paging
});
grid.render();
store.load({params:{start: 0, end: 16}});
});

</script>
</head>

<!-- You can leave the body empty in many cases, or you write your content in it. -->
<body></body>

</html>

jay@moduscreate.com
2 Jun 2009, 6:03 AM
Use Ext-all-debug.js and debug with firebug.

jay@moduscreate.com
2 Jun 2009, 6:04 AM
There is no element with the id of ap-grid.

instead of el , use renderTo : Ext.getBody()

var grid = new Ext.grid.GridPanel({
el: 'ap-grid',
width: 700,
height: 500,
trackMouseOver: false,
disableSelection: true,
loadMask: true,

jay@moduscreate.com
2 Jun 2009, 6:04 AM
There is no element with the id of ap-grid.

instead of el , use renderTo : Ext.getBody()

var grid = new Ext.grid.GridPanel({
el: 'ap-grid',
width: 700,
height: 500,
trackMouseOver: false,
disableSelection: true,
loadMask: true,

nomack84
2 Jun 2009, 6:06 AM
the problems is on the line grid.render(), see the api, you will see you need to pass a reference to the function where you indicate where the grid will be rendered. For instance: grid.render(document.body)
Any time you see an error like that, is because you don't pass where to render the component.

hworg
2 Jun 2009, 6:10 AM
wow that was fast....thanks a tonne for that, fixed up the problem, now say I wanted to render it to a window, do I just point the renderTo property to the window instance?

nomack84, thanks fo the advice about that error...ill know where to look from now.

nomack84
2 Jun 2009, 6:15 AM
Ext has a very active community.
You should just declare the window, and make the grid a item of it.
When a component is contained by another component, the renderTo config or the render method, are no longer needed. The container is the responsible for the rendering.

jay@moduscreate.com
2 Jun 2009, 6:16 AM
to render it to an Ext.Window, set it up a child for that Window with the Window's layout set to 'fit'

Animal
2 Jun 2009, 6:21 AM
@op, you must become familiar with http://extjs.com/deploy/ext-3.0-rc1.1/docs/?class=Ext.Container

Otherwise you will start running into problems which you can easily avoid.