PDA

View Full Version : Grid Problem



rich_montana
23 Apr 2008, 7:42 PM
Hello All,

I have looked at the forums and googled the reasons for the following error:
"this.el has no properties ext-all-debug.js line12327"

It seems that typically this can many things. Not finding else I turn her to see if i can get some insight into this problem.

HTML

<html>
<head>
<title>Introduction to Ext 2.0: Starter Page</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="AjaxPage.js"></script>
<script id="js" type="text/javascript"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ajax3/ExtStart.css">
</head>
<body>
<h1>Ajax Text Page</h1>
<div id="content">
First Name: <input type="text" id="fname"/><br/>
Last Name: <input type="text" id="lname"/><br/>
Age: <input type="text" id="age"/><br/>
<input type="button" id="submit" value="submit"/>
</div>
<div id="msg"></div>
</body>
</html>JS



Ext.onReady(function(){

var RecordDef = Ext.data.Record.create([
{name: 'firstName'},
{name: 'lastName'}
]);


// create the Data Store
var dataStore = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({
url: 'getuserXML.php',
params:
'fname=' + Ext.get('fname').dom.value +
'&lname=' + Ext.get('lname').dom.value +
'&age=' + Ext.get('age').dom.value
}),

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an Item tag
record: "Person",
id: "ID"
},[
{name: 'firstName', mapping: 'firstName'},
{name: 'lastName', mapping: 'lastName'}
]
),
remoteSort: true
});

var colModel = new Ext.grid.ColumnModel([
{header: "First Name", width: 120, dataIndex: 'firstName'},
{header: "First Last", width: 180, dataIndex: 'lastName'}
]);
colModel.defaultSortable = true;

// create the grid
var grid = new Ext.grid.GridPanel('example-grid', {
ds: dataStore,
cm: colModel
});
grid.render();

ds.load();
});
The php code will create and return xml based on params passed to the file. The meaning ful part of the code goes as follows:

$results = $test->getUser($fname,$lname,$age);

$xml = "<People>";

foreach($results as $result){
$xml .= "<Person>";
$xml .= "<ID>" . $result['id'] . "</ID>";
$xml .= "<FirstName>" . $result['FirstName'] . "</FirstName>";
$xml .= "<LastName>" . $result['LastName'] . "</LastName>";
$xml .= "<Age>" . $result['Age'] . "</Age>";
$xml .= "<Occupation>" . $result['job'] . "</Occupation>";
$xml .= "</Person>";
}
$xml .= "</People>";
echo $xml;This seems to be more or less inline with the examples i have seen. My first inclination was that my paths to the ext files were wrong but after double checking that a handful of times i can yes they are in the correct spot and the paths are correct. Stepping through the js code in firebug the error gets triggered when i create the grid. what this tells i am not fully sure im hoping this forum can help.

thanks!

evant
23 Apr 2008, 7:47 PM
The constructor is not correct, the first argument should be a config object:

http://extjs.com/deploy/ext-2.1/docs/?class=Ext.grid.GridPanel&member=GridPanel



var grid = new Ext.grid.GridPanel({
ds: dataStore,
cm: colModel
});
grid.render('foo');

rich_montana
23 Apr 2008, 8:16 PM
wow thanks for the fast response time, much appreciated. ya that did take care of that error. I think i copied that portion of the code using extJS 1 Ext.grid.Grid i think ??? I dont know im very new to extJS. however i did get a error triggered on the

grid.render();the error goes as follows:
ct has no properties
this.el = ct.createChild({ on ext-all-debug.js line 15678

evant
23 Apr 2008, 8:17 PM
When you call render, the argument you pass should be the element you want to render it to.

rich_montana
23 Apr 2008, 9:46 PM
Yup that did it. I am loading my data store wrongly it appears. I get the grids title row. In firebug i can see the response from the php file and it is valid xml. I am not sure if my mapping is incorrect or what the deal? I do know i have read some examples with people not specifying mappings that being said i still am mapping because the xml i create is really simple.

evant
23 Apr 2008, 9:50 PM
Give the grid a height.

rich_montana
23 Apr 2008, 10:07 PM
again thanks for the super quick resonse. that only gives me a visible border, some mapping within the data store or, as with designating a height, some displaying mechanism within the grid isn't set i believe. looking at the api for xml reader i am pretty sure that i have that correct. also too i dont know if this is a related issue but the submit button isn't triggering a request. and the initial request upon refreshing the page is a GET request, does this need to be POST?

rich_montana
24 Apr 2008, 1:30 PM
is it even possible to use an xml reader when the url for the httpproxy is a php file that creats xml? all the examples i have seen for xml reader the httpproxy uses an xml file not a php. is having a php create a respond with xml a valid solution?

thanks

mjlecomte
24 Apr 2008, 1:49 PM
Ext doesn't care what your backend is (php, coldfusion, whatever). So you send back valid json or xml. See the FAQ on grids to make sure you're sending the right header back, I recall that tripping up some XML users. That said also check that you must use XML, json is the 'preferred' for most I think.
If you add load and loadexception listeners (see FAQ again) then you can see which one fires. Those give you a good indication of where to look for the problem. Loadexception generally indicates some server side problem. If load event fires then generally you check client (js) side for the problem.

Animal
24 Apr 2008, 1:51 PM
Of course it is. Not all XML is static. XML for UIs like this is most often generated bya server script/servlet.

The problem is with the mapping. Read this carefully, should only take 5 minutes to digest it: http://extjs.com/deploy/dev/docs/?class=Ext.data.Record&member=create

rich_montana
24 Apr 2008, 8:39 PM
my mapping goes as follows as well as the other js code goes as follows


Ext.onReady(function(){
var RecordDef= Ext.data.Record.create([
{name: 'firstName', mapping: 'Person > firstName'},
{name: 'lastName', mapping: 'lastName'},
{name: 'age', mapping: 'age', type: 'int'},
{name: 'occupation', mapping: 'occupation'}
]);

var dataStore = new Ext.ddata.Store({
proxy: new Ext.data.HttpProxy({
url: 'getuserXML.php'
}),

baseParams: {
fname: Ext.get('fname').dom.value,
lname: Ext.get('lname').dom.value,
age: Ext.get('age').dom.value
},

reader: new Ext.data.XmlReader({
record: 'Person',
id: 'ID',
totalRecords: 'count'
}, RecordDef
),

remoteSort: true
});

var colModel = new Ext.grid.ColumnModel([
{header: 'First Name', width: 120, dataIndex: 'firstName'},
{header: 'Last Name', width: 120, dataIndex: 'lastName'}
]);

colModel.defaultSortable = true;

var grid = new Ext.grid.GridPanel({
ds: dataStore,
cm: colModel,
width: 300,
height: 300
});

grid.render('msg');
dataStore.load();
});

This is to handle and display xml like the following:


<People>
<count>1</count>
<Person>
<ID>4</ID>
<firstName>Glen</firstName>
<lastName>Quagmire</lastName>
<age>39</age>
<occupation>Pilot</occupation>
</Person>
</People>

This seems to be exactly like the examples for grids and xml readers on this website and is inline with the api for each of the objects used in the javascript above.

rich_montana
24 Apr 2008, 9:07 PM
also in response to the post processing (just read i somehow skipped over it the first time) would i have to add a listener? i guess i am confused by 'post processing' if i am just display back the contents from the response i wouldn't need to do post processing? i am thinking of post processing as being editable grids, which i am not trying to do yet, is this incorrect?

rich_montana
24 Apr 2008, 10:00 PM
oh sweet. the deal was not having the proper header. thanks to all for the help. greatly appreciated.