Help with DataGrid/JSON/PHP

[hydra12]

I'm trying to get the datagrid to work with json and php. My php script returns this:

({"users":[{"id":"1","last_name":"Lang","first_name":"Emily"},{"id":"2","last_name":"Post","first_name":"Parish"}]})

Here is my js file:



Ext.onReady(function(){
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'http://localhost/ekklesia3/users/getAllUsers'}),
reader: new Ext.data.JsonReader({
root: 'users',
id: 'id'
},[
{name: 'id', mapping: 'id'},
{name: 'last_name', mapping: 'last_name'},
{name: 'first_name', mapping: 'first_name'}
])
});

var cm = new Ext.grid.ColumnModel([{
id: 'students',
header: "Students",
dataIndex: 'id',
width: 100
},{
header: "Last Name",
dataIndex: 'last_name',
width: 100
}, {
header: "First Name",
dataIndex: 'first_name',
width: 100
}])

var grid = new Ext.grid.Grid('grid-paging', {
ds: ds,
cm: cm
});

grid.render();
ds.load();
})


Nothing shows up on the screen. Is there a problem with my json? Please help!

Thanks!
hydra12

[kenITR]

Hi:

Doesn't your url have to refer to a php, asp, or jsp file, or some file that returns an html header and your student data?

Also, this is an obvious thing but it needs to be asked, do you have a 'grid-paging' div on your html page?

HTH

[kenITR]

also if you use FireBug you can see what data (if any) is being returned by the server.

[hydra12]

kenITR, thanks for the reply. I'm using cakePHP for my backend, so I don't have to put .php on the end of the file name. If I call http://localhost/ekklesia3/users/getAllUsers directly, I get this:
({"users":[{"id":"1","last_name":"Lang","first_name":"Emily"},{"id":"2","last_name":"Post","first_name":"Parish"}]})

When I check in FireBug, it shows as a get request with this response:

({"users":[{"id":"1","last_name":"Lang","first_name":"Emily"},{"id":"2","last_name":"Post","first_name":"Parish"}]})

Everything looks right to me, but it doesn't work. I do have

<div id="grid-paging" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;"></div>
in my html code. The headers from my xmlhttp request show a content-type of text/html.

Any ideas? Any help would be appreciated.

[Ronaldo]

In cases like this, stepping through the reader code will probably tell you what's wrong:

Find the code in ext-all-debug.js:


Ext.data.JsonReader = function(meta, recordType){
meta = meta || {};
Ext.data.JsonReader.superclass.constructor.call(this, meta, recordType||meta.fields);
};
Ext.extend(Ext.data.JsonReader, Ext.data.DataReader, {

read : function(response){
var json = response.responseText;
var o = eval("("+json+")");
if(!o) {
throw {message: "JsonReader.read: Json object not found"};
}
if(o.metaData){
delete this.ef;
this.meta = o.metaData;
this.recordType = Ext.data.Record.create(o.metaData.fields);
this.onMetaChange(this.meta, this.recordType, o);
}
return this.readRecords(o);
},


And see if o is eval'd properly. Then follow the this.readRecords(o) call. Maybe that'll help you out.

[hydra12]

Thanks for the advice. I've stepped through the code with firebug, and everything looks like it's working correctly, but still no datagrid. I'm at a loss . . .

[crafter]

Modify your code controller functions to echo the data until you are satisfied it's right.

Try losing the ():
{"users":[{"id":"1","last_name":"Lang","first_name":"Emily"},{"id":"2","last_name":"Post","first_name":"Parish"}]}

[hydra12]

I tried losing the (). Here is what I get (both in firebug and when I call getAllUsers directly):

{"users":[{"id":"1","last_name":"Lang","first_name":"Emily"},{"id":"2","last_name":"Post","first_name":"Parish"}]}

The grid still won't render. I'm at a loss. I'm new to json and new to extjs. I've looked at every example I can find, I've searched the forums, I've been over this code more times than I can count, and I still can't make it work. I don't know what else to try.

Thanks for trying to help. I'll keep looking at it (it's probably something little). If anyone else has any suggestions or advice, please let me know.

Thanks!
hydra12

[devnull]

I dont think you need to define the 'id' field in the data.Record config, and in fact it may conflict with the 'id' parameter in the reader config.
You also dont need to map the fields if they have the same name in the grid, but thats just redundant and wont cause a failure.
So you might try something like this:


var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: 'http://localhost/ekklesia3/users/getAllUsers'}),
reader: new Ext.data.JsonReader({
root: 'users',
id: 'id'
},[ 'last_name', 'first_name'])
});

[hydra12]

I feel really stupid. Would you believe I've been doing it right all along? The problem was this: cakephp (my backend) expects the style sheets to live in a specific folder. I was using cake's css helper like this to link my style sheet:


<?php echo $html->css('js/ext-1.1/resources/css/ext-all.css');?>


That tells it to look in webroot/css/js/...
I changed it to this:


<link rel='StyleSheet' href='<?php echo $this->base ?>/js/ext-1.1/resources/css/ext-all.css' />


And now, everything works. Thanks everybody for the help.

hydra12

[abbab]

also works if you do e( $html->css( '../js/...' ) );

[thundaman]

I have a similar problem with Ext and CakePHP, except that in my case, the grid renders but has no content. When I look in Firebird, there is no content returned. This is strange because I'm testing the grid with almost exactly the same code as Hydra12. I'd really appreciate any help. Here's my code:

Ext.onReady(function(){
// the data store
var store = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://[hostname]/pw/rma/users'}),

// the reader
reader: new Ext.data.JsonReader({
root: 'users',
totalProperty: 'count',
id: 'id',
fields: ['username', 'last_name', 'first_name', 'client_id']
}),
remoteSort: true
});

// column model
var cm = new Ext.grid.ColumnModel([
{id: 'grid-paging', header: 'ID', dataIndex: 'id', width: 10, hidden: true},
{header: 'First Name', dataIndex: 'first_name', width: 100},
{header: 'Last Name', dataIndex: 'last_name', width: 100},
{header: 'Client', dataIndex: 'client_id', width: 120}
]);

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

// create the grid
var grid = new Ext.grid.GridPanel({
el: 'grid-paging',
width: 400,
height: 100,
title: 'Users',
store: store,
cm: cm,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: false,
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
}
//frame: false
});

// render it
grid.render();

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

[hydra12]

A couple of things:

1. If you call http://[hostname]/pw/rma/users directly, do you get any results?
2. I had problems with scriptTagProxy. Are you calling things from another host, or from the same host as your page is on? If they are on the same host, use HttpProxy. Make sure that your host name matches what you put in your address bar, though. I had localhost in my httpproxy, and it worked when I tested it from my dev machine. I tried to access the page from someone else's computer using tc-mark-lap (my dev machine's name), and no data was returned. I didn't even get any errors, just no data returned.

I hope that helps some. I got mine working, and posted a tutorial here (http://www.ntatd.org/mark/?p=29), but it's very CakePHP oriented.

hydra12

[thundaman]

Thanks for your quick response. I actually used your blog tutorial to test the data grid in CakePHP because I need to do something similar in a site I'm working on. The code I posted is a slight variation of the code in your tutorial. I followed your tutorial and first used the "getAllUsers" function, which is inside of my users controller. When I call the page (either as ../users or ../users/getAllUsers), nothing is returned, even though I can echo the data to the page. Like I indicated in my earlier posting, I get a grid with column headers but no data - and there is no data in the response header either.

Also, I've tried both ScriptTagProxy and HttpProxy without any success. I'm calling from the same host as the page is on, though it's on a shared hosting machine. But I'm accessing the page from my laptop. Could that have something to do with it? Interestingly, when I put the code from the grid-paging example on ExtJS in the same JS file and make the call, it returns data without a problem and prints to my users page. But the URL in that case has a .php extension and is not in the CakePHP format. Any thoughts would be appreciated. One other interesting fact is that I get an undefined or unknown error from the $javascript->link, so I have to use a complete path to avoid that.

[hydra12]

OK, let's look at this one step at a time.
If the example from extjs.com is working, then it's not an ajax problem on your host.
If firebug isn't showing any errors, then it's not what I originally thought (XMLHttp error).
Is there anything at all in the response?

->When I call the page (either as ../users or ../users/getAllUsers), nothing is returned
I'm not sure I understand this. Why are you calling the page with ../ ? That could be the problem, or maybe I'm just misunderstanding.

Can you post your code so I can take a look at it? Can you give me the url so I can see what it's doing for myself?

[thundaman]

Thanks for your reply. I realized after our prior communications that I was using ExtJS 2.0, so I went back and installed Ext-1.1, then did everything in your tutorial. Still, nothing shows, not even in the response (looking through Firebird). I'm using the JS code exactly as it is in your tutorial, except I've limited the fields I'm fetching to just ID, first_name and last_name. One adaptation I had to make was include JSON.php explicitly because the version of PHP on my hosting server (5.1.x) doesn't have Json built in. Here's my controller code:

<?php require_once '/home/infinici/public_html/pw/rma/controllers/components/JSON.php';
class UsersController extends AppController {

var $name = 'Users';
var $helpers = array('Html', 'Form', 'Javascript');
//var $displayField = 'last_name';

function index() {
}

function getAllUsers() {
$userArray = array();
$this->layout = 'ajax';
$json = new Services_JSON();
$count = $this->User->findCount();
$userA = $this->User->findAll(null,'*','last_name ASC');
$userArray = Set::extract($userA, '{n}.User');
$this->set('users','{"total":'.$count.',"users":'.$json->encode($userArray).'}');
$this->set('total', $count);
$this->set('users',$userArray);
}
}
?>

Note that I changed the $this->layout = 'Ajax' to $this->layout = 'ajax'; the capitalized form returns an error to the effect that there's no template for Ajax.ctp. The URL is http://www.infinicity.net/pw/rma/users.

I appreciate your taking the time to look at this for me.

Incidentally, you will recall I mentioned that $javascript->link('...') returns an error: "Undefined variable: javascript [CORE/rma/views/layouts/default.ctp, line 12", and also "Fatal error: Call to a member function link() on a non-object in /home/infinici/public_html/pw/rma/views/layouts/default.ctp on line 12". Line 12 is where I have my first $javascript->link statement.

[hydra12]

OK, first - http://www.infinicity.net/pw/rma/users doesn't show any data because it's calling http://www.infinicity.net/pw/rma/users/getAllUsers through ajax, and http://www.infinicity.net/pw/rma/users/getAllUsers doesn't return any data. If you call http://www.infinicity.net/pw/rma/users/getAllUsers directly in your browser, you should get a json string. When I call this page, I get the word Users with a line under it. The problem (at least, the initial problem) is not with users/index, it's with users/getAllUsers.

After looking closer, in getAllUsers, you have an error on this line:
$this->set('users','{"total":'.$count.',"users":'.$jso n->encode($userArray).'}');

You have a space in $json. See if that fixes things.

Second, on your Javascript problem: it's acting like you didn't include Javascript in your helper. Of course, you did in the code you sent me. Very strange. Just out of curiosity, which version of cake are you using?

[thundaman]

I'm using CakePHP 1.2. And the space in $this->set('users','{"total":'.$count.',"users":'.$json->encode($userArray).'}'); seems to have appeared when I copied and pasted the code. In the actual file there's no space. Regarding helpers, I even included Javascript in the pages controller, but that doesn't change anything.

[JasonMichael]

I haven't touched CakePHP in quite awhile, but I remember that it does things to prevent you from directly accessing scripts within its various directories, as you have in your examples above.... I believe some rules in your .htaccess file will prevent it.

I think you'll need to do some customizations in your route.php script to get even close to accessing a script directly, within the CakePHP framework - don't ask me how though.. its been over a year and only one project....you'll also need to fix the rules in the .htaccess file.... I know it can be done, but don't remember how... off the top of my head here...

But perhaps instead of fighting the framework, setup your own API script that works outside the framework (with a rule in .htaccess to allow direct access to the file), and have all your Ajax/MySQL handling take place within it? You can still enjoy ExtJS on your CakePHP pages, but the communications could just take place outside the framework... This is how I'm handling things with another PHP framework - LogiCreate (ick eh?). I'm using ExtJS to bring my employer's apps into the 21st century.

-Jason

[hydra12]

Can you post the code for get_all_users.ctp? If your controller is correct, but no data is output, it could be a problem in the view. Since I don't get any data returned even when I call getAllUsers directly, that would be my next guess. It's at least a place to start.

[thundaman]

The get_all_users.ctp file only contains code to display the grid, as follows:

<div class="users">
<h2><?php __('Users');?></h2>
<?php //echo '{"users":'. $javascript->Object($users).'}'; ?>
<div id="grid-panel">
<div id="grid-paging" style="border:1px solid #99bbe8;overflow:hidden; width: 400px; height: auto;"></div>
</div>
</div>

[thundaman]

Thanks for your response, Jason. My .htaccess file doesn't have any rules other than the default CakePHP one for the rewrite engine. Can you give me an idea of how you bypass the framework you're using? Incidentally, is LogiCreate still being developed/supported? I did a search after I saw your post and the website registration for the project seems to have lapsed...

[hydra12]

Try replacing all of your view code with just this:

<?php echo '{"users":'. $javascript->Object($users).'}'; ?>

That won't get everything working, I don't think, but it will start returning data (I hope). Once that's working, we can go further.

[thundaman]

That code, which as you can see in my earlier post is commented out, does return the correct data. Why that data is not getting to the grid is annoyingly puzzling.

[hydra12]

Put the <div> in your layout or in your index.ctp. getAllUsers should only return json data.

[thundaman]

What should be in get_all_users.ctp? Even if after I remove the <div>, no data is sent to the grid in index.ctp, even though <?php echo '{"users":'. $javascript->Object($users).'}'; ?> returns the expected data.

[hydra12]

Your result looks like this (according to firebug) and gives me an error: invalid label. I edited the data :-)

{"users":[{"id":4, "username":"****", "password":"****", "first_name":"****", "last_name":"****", "email":"****", "client_id":****}, {"id":2, "username":"****", "password":"****", "first_name":"****", "last_name":"****", "email":"****", "client_id":****}, {"id":1, "username":"****", "password":"****", "first_name":"****", "last_name":"****", "email":"****", "client_id":****}, {"id":3, "username":"****", "password":"****", "first_name":"****", "last_name":"****", "email":"****", "client_id":****}]}

My results look like this:

{"total":7, "users":[{"id":11, "last_name":"Buckner", "first_name":"Mark", "address1":"Home", "address2":"", "city":"somewhere", "state":"Texas", "zip":11111, "homePhone":"", "cellPhone":"", "otherPhone":"", "birthdate":"", "grade":"", "school_id":""}, {"id":32, "last_name":"Dixon", "first_name":"Ben", "address1":"", "address2":"", "city":"Macross City", "state":"SDF1", "zip":"", "homePhone":"", "cellPhone":"", "otherPhone":"", "birthdate":"", "grade":"", "school_id":""}]}

The only difference I see is that your results don't have "total":7 (or whatever). See about adding that in, even if you have to hard-code it for now to make things work.

BTW, don't send your passwords as plain text. It's a bad security practice. Edit your findAll call and only select the fields you need.

[hydra12]

OK, I've done some more checking. The invalid label error I get on your page is a result of using ScriptTagProxy. ScriptTagProxy is NOT a direct dropin replacement for HttpProxy. Now that we have data returned, try switching to httpProxy and see if that fixes things.

[thundaman]

Changing to HttpProxy does not improve matters. And don't worry about those passwords, they're dummy ones. Going back to the problem, it seems that the data does get returned, but you can only tell by echoing it to the page. If you don't echo it, you don't see it in the response.

[hydra12]

In your get_all_users.ctp, you should only have something like this:

<?php echo '{"users":'. $javascript->Object($users).'}'; ?>

It should return that data, and you should be able to see it in firebug. It shouldn't print that to the screen. When getAllUsers returns that data to index, your javascript should load the data into your datastore. Your grid should take the data and display it on the screen.

Set your script to use httpProxy, and don't echo the json string in your index page. Then let me know, and I'll see if I can figure out what's going on from this end.

Sorry I'm not being more help :-(

[hydra12]

Once again I hit submit too soon. Looking closer at http://www.infinicity.net/pw/rma/users/, none of your javascript is being loaded. In fact, it looks like EVERYTHING is using your ajax layout instead of your default one. Since the javascript isn't being loaded (do a view source on the page, and you'll see what I mean), the grid isn't loading.

[thundaman]

<?php echo '{"users":'. $javascript->Object($users).'}'; ?> echoes the data to the page, as a result of which it shows up in Firebird. It never gets to the grid, which is why nothing is displayed. And please don't feel bad that we haven't got this thing resolved.

[thundaman]

Okay, I made some changes, now I can see the data that's being echoed, but that's only because it's being echoed. If I comment out the echo, nothing shows up. The grid is loaded, but again it has no data. Phew!

[hydra12]

OK. First, I'm getting a syntax error in firebug referencing hmenu.js. I'm not sure what that's about. It's showing your doctype. I did some checking with my own page. Try removing the doctype and changing your <html . . .> tag to just <html>. When I set my working page to your doctype and <html> tag, everything quite working. No idea why . . .

[thundaman]

I also hit submit too soon last time. I should have said that the data is now showing in Firebird, but not in the grid, as you've probably seen if you've looked at it.

[thundaman]

I changed the doctype and now I'm getting a grid with no data...

[hydra12]

Here's what the page is returning:

{"users":[{"first_name":"Chris", "id":4}, {"first_name":"Marylyn", "id":2}, {"first_name":"Joe", "id"
:1}, {"first_name":"Hien", "id":3}]}<!-- 1.0215s -->

See that <!-- 1.0215s --> at the end? That's appended by cake's debug function. Put this at the top of your getAllUsers controller:

Configure::write('debug', '0');

That will turn debugging off for that one function, and now things should work (I hope).

[thundaman]

Gosh-darn it! It worked! You're the best! I guess the only problem to solve now is why the doctype declaration causes the thing to throw up, as it were...

[hydra12]

I'm glad it worked! I think I'll link this discussion to my blog until I have a chance to work things out and update my tutorial. Is that cool with you?

[thundaman]

One interesting note: now that it's working, I went back and made the URL relative, as in "users/getAllUsers", and it still works.

[hydra12]

Cool. I'm still learning how all this works, too, and there are not many tutorials about extjs, let alone ext and cake :-( I guess that means people like us get to write the manual as we figure things out, huh? I'll have to remember about the relative urls.

[thundaman]

That's cool with me. And I'll troubleshoot why the doctype doesn't work. If and when I find a solution - and I don't see why the doctype should be a problem since there must be sites out there using ExtJS with doctype declarations, including extjs.com itself - I'll post a message so maybe you can update your blog about that issue. Thanks a lot for your help! You've been wonderful and extremely patient and I really appreciate it. Now I can get on with developing the site with cool ExtJS stuff.

[thundaman]

I figured out why the doctype was causing a problem. I had a <?php require_once ... ?> string calling my JSON.php file right before the doctype declaration. I moved it below the doctype declaration and the thing still works fine. It was kind of stupid of me: I went back and looked at the DTD requirement, and the doctype declaration must be the root element of the document, something I know and should have remembered. I wonder why, when you used my doctype declaration in your file, things stopped working. Did you have any other element before the doctype?

[hydra12]

I can't figure it out. I don't have anything before the doctype (not that I can see, anyway). Oh, well. I'll figure it out later.

Thanks!
hydra12

[hydra12]

I just updated my datagrid tutorial to work with ext-2.0. I also have the doctype thing working, though I'm still not sure why it wasn't working before. Oh, well. Here's the url: http://www.ntatd.org/mark/?p=30

I hope that helps some people.
hydra12

[thundaman]

Hydra,

Thanks for updating the tutorial. It works like a charm this time round.

[hydra12]

I'm glad you liked it :D I also did a short tutorial on using ExtJS's forms with CakePHP. Now I'm working on pagination, and eventually, (I hope) a tutorial building a full app (integrating datagrids and forms using AJAX).

[thundaman]

I just noticed one problem with the grid: in IE7, it doesn't show any data. Have you tried to display it in IE7? I haven't tried other browsers but I will be...

[hydra12]

Huh. It works on IE7 on my dev machine. Are you calling it in IE7 from the host machine or from a different one?

[thundaman]

I've been trying the ExtJS form - and thanks for posting the tutorial - and it keeps returning the error that it couldn't save the data. When I look in Firebug, there's a "404 Not Found" right next to the page title. I'm still trying to figure out what can't be found...

[thundaman]

I'm calling both browsers (Firefox and IE) from my laptop; the site is on a remote server.

[hydra12]

If you are following my tutorial, you might try this. Under var form_user = new Ext.form.FormPanel, find buttons: [{. Look for the handler function under buttons and replace the url with a direct link to your page (ie. leave out host and put something like this: url: 'http://www.mysite.com/ext/users/add2') I don't know if that will help or not.

On the other problem (the data grid), I don't have any idea what could be wrong. I've checked it here, and I can call it from my dev machine and from other machines in IE6, IE7, and firefox with no problems. If you can give me the url for the site, I'll check it from this end. I can view the js, just not the controller functions (being php, of course).

[thundaman]

I found out what may have been causing my ExtJS form to fail: I had var $useTable = 'users'; in the controller instead of in the model. Stupid. However, the form won't show up in IE (6 or 7). As for the data grid, it seems the error was occurring because I was calling "users/" with a trailing "/". It now shows up without a problem in IE.

[hydra12]

OK, the form problem was a typo of mine. I have a trailing comma on line 38 of myForm.js. It seems that, if you have a list/array/whatever in javascript that is separated by commas, if you put a comma after the last item it will crash in IE but not in firefox. That's what I did. I'll update the tutorial.

Thanks for catching that!

[thundaman]

You're welcome. Any idea why the form doesn't display in IE?

[hydra12]

When you have code like this:



{
//some code
},
{
//some more code
},
{
//some other code
},


Notice the comma after the last } ? That breaks the code in IE, but not in FF. I left a comma like that on line 38 of myForm.js, and the whole page broke. Delete that comma, and everything works again.

[thundaman]

Actually, the extra comma was right after the closing brace for handler: function() { //code }. Removing the one on line 38 breaks the form and it won't display in either FF or IE. Thanks for pointing that out.

[hydra12]

OK, maybe I got the line number wrong. I deleted one of the commas (it was an extra), and it started working in IE for me. I updated the code in the tutorial. See if that works for you.

BTW - you find more problems with my code than anyone else! ;) Seriously, thanks for the testing and troubleshooting.

[noose]

Hi.
I have little problem with datagrid and json.
Only header of my datagrid is showing:( Can you help me?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test extJS</title>
<script type="text/javascript" src="js/ext-base.js">
</script>
<!--<script type="text/javascript" src="js/ext-all.js">
</script>-->
<script type="text/javascript" src="js/ext-all-debug.js">
</script>
<link rel="stylesheet" href="css/ext-all.css">
<link rel="stylesheet" href="css/xtheme-gray.css">
</link>
</head>
<body>
<div id="content" style="width: 1024px; height: 768px;">
</div>
<script type="text/javascript">
var grid;
var ds;

Ext.onReady(function(){
init_grid();
});

function init_grid(){
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'admin/ajax.php?get=users',
method: 'GET'
}),

reader: new Ext.data.JsonReader({
root: 'users',
totalProperty: 'total',
id: 'id'
},[{
name: 'id'
}, {
name: 'login'
}, {
name: 'email'
}, {name: 'registerDate'}]),
});

var cm = new Ext.grid.ColumnModel([{
id: 'id',
header: "ID",
dataIndex: "id",
width: 250
}, {
header: "Login",
dataIndex: 'login',
width: 75
}, {
header: "E-mail",
dataIndex: 'email',
width: 75
}, {
header: "Register Date",
dataIndex: 'registerDate',
width: 100
}]);

cm.defaultSortable = true;

grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
stripeRows: true,
title: 'Data grid',
autoExpandColumn: 'id'
});

grid.render('content');
ds.load();
}
</script>
</body>
</html>
json:


{"total":2,"users":[{"id":1,"login":"pawel","email":"pawel@ncreations.pl","registerDate":"2008-03-11 07:36:41"},{"id":2,"login":"micha\u0142","email":"michal@wp.pl","registerDate":"2008-03-11 07:36:41"}]}
Regards,
Pawel

Live example of this problem: http://stuff.dev.noose.pl/extjs/

[j996]

I also have the same problem but using Ext Js 2. Any help please?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Member/User Admin</title>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>

<style type="text/css">
.x-panel-body p {
margin:10px;
}
#container {
padding:10px;
}
</style>
</head>
<body>
<script type="text/javascript">

var member = Ext.data.Record.create([
{name: 'MEMId', mapping: 'MEMId'},
{name: 'Name', mapping: 'Name'}
]);

var mreader = new Ext.data.JsonReader({
root: "rows"
}, member);

var store = new Ext.data.JsonStore({
url: 'get_members.php',
reader: mreader
});

store.load();

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Name", width: 160, sortable: true, dataIndex: 'Name'}
],
stripeRows: true,
height:350,
width: 350,
border: 0
});

alert(store.getCount()); //this returns 0

Ext.onReady(function(){
var p = new Ext.Panel({
title: 'Member/User Admin',
renderTo: 'container',

tbar: [
'Search for Member: ', ' ',
new Ext.app.SearchField({
width:210
})
],

items: grid
});
});
</script>

<div id="container">
</div>

</body>
</html>



<?php
$link = mysql_pconnect("test", "johan1", "test") or die("Could not connect");
mysql_select_db("test") or die("Could not select database");

$arr = array();
$rs = mysql_query("SELECT MEMId, Name FROM MEMMembers");

while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}

echo '{"rows":'.json_encode($arr).'}';
?>


{"rows":[{"MEMId":"1","Name":"johan1"},{"MEMId":"2","Name":"johan2"}]}

[hydra12]

@noose:

Your test page works fine for me in firefox. In ie7 I get an error and the page never loads. In your html, you have a function init_grid() that has a trailing comma:



function init_grid(){
ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'admin/ajax.php?get=users',
method: 'GET'
}),

reader: new Ext.data.JsonReader({
root: 'users',
totalProperty: 'total',
id: 'id'
},[{
name: 'id'
}, {
name: 'login'
}, {
name: 'email'
}, {name: 'registerDate'}]), //remove this comma
});


That should fix (at least some of) your problems with IE. There may be more issues, but that's a start.

hydra12

[mjlecomte]

I also have the same problem but using Ext Js 2. Any help please?

Try checking out the FAQ on Grids, specifically the tips on debugging, and adding listeners (loadexception, etc.).

[hydra12]

@mjlecomte - That's great! I had no idea that faq was there. Thanks!

@j996 - you're approaching things a little differently than I have, so I'm not quite sure what the problem could be. Definitely check the faq mentioned above. One thing I notice that is VERY different in your code than in mine is that you create a record called member and pass that to your jsonReader. I didn't do that. Instead, I defined my fields when I created my jsonReader. I don't know if that will make a difference or not. I have a couple of tutorials at www.ntatd.org/mark. I use CakePHP, so my backend will be different from yours, but the javascript should be the same (or close enough).

I hope that helps.
hydra12

[mjlecomte]

@mjlecomte - That's great! I had no idea that faq was there. Thanks!


Amusing because it has been stickied for a while. I have a tendency to ignore stickied stuff too sometimes.

[noose]

@hydra:
thx for help with that comma ;-)

It doesn't work in FF because I forgot

autoHeight: true
:">

[maren]

can you show me how to link between PHP and EXTJS

[hydra12]

I've only used ext with CakePHP. You can see how I did it on my blog (http://www.ntatd.org/mark). I haven't used ext recently, so I'm kind of rusty on it. Basically, though, you have to write your php code to return or output a json string. Then, in your ext code, you can call your php page via ajax, and it will return a json string, which you then parse in your ext code (probably with a callback).

I hope that helps a little. Like I said, my blog has a few detailed examples, but I haven't touched it in over a year, mostly because I haven't needed an advanced gui for any of my recent projects.

hydra12

[mjlecomte]

can you show me how to link between PHP and EXTJS

I believe there are a few examples in the wiki on this as I recall. Towards the end of the Grid FAQ there is a section on other places to learn (screencasts, tutorials, etc.).

There's also a recently published book out Learning ExtJS, which has some php in it I believe. I'm pretty sure there's at least one example in the wiki with php. ;)