PDA

View Full Version : CodeIgniter+MySQL+Grid



rvent
7 Mar 2008, 1:51 PM
Hello,

This is my first day using ExtJS and i can say it is very powerfull. Also, i am new to JS. I ve been using CodeIgniter for a few months now and like it better than RoR.

I ve gone through the tutorials, past posts and searches on the web but have not found a simple and true tutorial for noobs like me.

I have the following in the conroller:
listboards.php


function index()
{
$list['Boards'] = $this->Boards->getBoards();

$this->load->view('listBoardsv', $list);
}

function js_listBoards()
{
$Boards = $this->Boards->getBoards();

foreach($Boards->result() as $row)
{
echo $row->WOrder;
echo $row->PartNumber; // all this gives me all the rows
echo $row->WOPartQuantity;
echo $row->WODateIn;
echo '<br>';
}
}

When the page loads up i get a simple display of the data retrieved from the DB. So i am trying to get the Grid to be populated with data from the DB (like many other ppl). But i cant find a way to get the data from the "js_ListBoards" in the .php into the .js which currently looks like this:



Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];


Any ideas on how i can get the data...?

aconran
7 Mar 2008, 4:16 PM
Check out the examples/grid/ directory for some examples of loading a dataset from a server-side resource. You can use a JSONStore and return your php data with json_encode rather than outputting it with echo.

There are also a few good threads on the forum about integrating with PHP.

mjlecomte
7 Mar 2008, 11:43 PM
Check the example in my signature. It is php.

Once you get that loaded and understood you can convert it to codeigniter.

In my example instead of using "task", you'll be able to use the CI url segment way of doing things to route the "task" to the correct method in the controller. The only thing different you'll do with the js file is change the url that is given and you can eliminate the task, although it won't hurt, it just won't be used for anything.

There's some others using codeigniter around and there's posts here and in CI forums for how to handle the MVC nature of the php, etc.

rvent
10 Mar 2008, 10:41 AM
MJ, i ve looked at your example and its i good, but overkill for what i need.

Ok, so i have my controller that creates and json_encode. What would i need on the .js file..?

I have this on my controller and it produces and json_encode:


function js_listBoards()
{
$Boards = $this->Boards->getBoards();

//$output[] = Array("WOrder", "PartNumber", "WOPartQuantity", "PartPriority");


foreach($Boards->result() as $row)
{
$data = Array("WOrder" => $row->WOrder,
"PartNumber" => $row->PartNumber,
"WOPartQuantity" => $row->WOPartQuantity,
"PartPriority" => $row->PartPriority);

$output[] = $data;
}
echo json_encode($output);
}


Here is the echo:


[{"WOrder":"97350","PartNumber":"H35146AAD","WOPartQuantity":"3","PartPriority":"Medium"},{"WOrder":"98058","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Medium"},{"WOrder":"98197","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Low"},{"WOrder":"98633","PartNumber":"H78673A","WOPartQuantity":"5","PartPriority":"Lowest"},{"WOrder":"98886","PartNumber":"H78812AAG","WOPartQuantity":"7","PartPriority":"Low"},{"WOrder":"98919","PartNumber":"T1005049AM","WOPartQuantity":"60","PartPriority":"Lowest"},{"WOrder":"99082","PartNumber":"T1023529AK","WOPartQuantity":"10","PartPriority":"Low"}]


I dont care about getting the collumn names since i belive i can set that up manually. So i was wondering how can use that data in the datagrid...?

Do i need to create a jsonstore...? then a jsonreader..?

In your example you have many things going on: datastore, groupingstore, etc... Is it a must to use all of that...?

What excatly do i need to put on the root property...?
Why would i need a httpProxy..?


Thanks

devnull
10 Mar 2008, 11:47 AM
the array you are returning needs to be a property in the json, which is where the 'root' comes from:


foreach($Boards->result() as $row)
{
$item = Array("WOrder" => $row->WOrder,
"PartNumber" => $row->PartNumber,
"WOPartQuantity" => $row->WOPartQuantity,
"PartPriority" => $row->PartPriority);
$data[] = $item;
}
$output[data]=$data;
echo json_encode($output);

a dataStore with jsonReader is what you need in the js. other stuff is optional.
a store/reader to consume json like that would look like this:


new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'foo.php'
}),
reader: new Ext.data.JsonReader({
root: 'data',
//id: 'id', //not sure which is your id field, perhaps WOrder? is also optional
//totalProperty: 'rowCount', //optional
fields: ['WOrder','PartNumber','WOrderPartQuantity','PartPriority']
})
})

if needed you can provide data types for the fields as well.

rvent
10 Mar 2008, 2:00 PM
I hate doing this, but i am really getting lost here.

Would you mind illustrating it with a GridPanel...?

It seems that for that i need
1.- The datastore
2.- the reader
3.- the grid the 1 and 2 included...

right...?

Thanks

mjlecomte
10 Mar 2008, 2:21 PM
For "basic" examples see the online demos which are in your downloaded examples directory. They show the minimal parts needed, but provide relatively little in the way of explanation.

Enter my 'example'/tutorial. It's not meant to be used, although a few people try to use it blindly. That was not my intent in posting it. I go through and provide fairly verbose comments about the why/how to/what to watch out for etc in the commentary of the different lego blocks of the grid (store, reader, column model, grid, etc.).

If you feeling a wee lazy to read the commentary, check out the screencasts on building a grid as well.


Do i need to create a jsonstore...? then a jsonreader..?
both answered in the commentary of my tutorial

In your example you have many things going on: datastore, groupingstore, etc... Is it a must to use all of that...?
I disagree that I had all of that active. I may mention both, but only use one, I recall decribing when to use each or something.

What exactly do i need to put on the root property...?
Hmmm, yup also gave an example of this in the tutorial


Why would i need a httpProxy..?
Yeah, another one that was specifically talked about in the tutorial.


If I didn't address it in the tutorial I would gladly rephrase it, or expound on it. But I get the impression you didn't look too far into it. I really don't intend to be rude here, but these questions were all covered in the tutorial.

I also put together a FAQ as well.

Maybe someone else will happen across this thread and just give you the short answer. I'm more of a teach a man to fish kind of guy....


Another thought, you might want to just get an example working with php before you try to integrate it with codeigniter. In hindsight, it's not much different, but from my perspective you'll isolate what each component is doing more (mysql, js, php).

mjlecomte
10 Mar 2008, 2:26 PM
I hate doing this, but i am really getting lost here.

Would you mind illustrating it with a GridPanel...?

It seems that for that i need
1.- The datastore
2.- the reader
3.- the grid the 1 and 2 included...

right...?

Thanks
The very first demo example, the array grid, probably answers these.

rvent
11 Mar 2008, 7:38 AM
well, i cant still get it working... :-?

How can i find out if the reader is actually reading something...? I went to that site that checks to see if a string is json foramtted and it told my result is ok...

json encoded data is ok so i know thats not the problem:


function js_listBoards()
{
$Boards = $this->Boards->getBoards();

foreach($Boards->result() as $row)
{
$item = Array("WOrder" => $row->WOrder,
"PartNumber" => $row->PartNumber,
"WOPartQuantity" => $row->WOPartQuantity,
"PartPriority" => $row->PartPriority);

$data[] = $item;
}

echo json_encode($data);
}


Perhaps, my reader is not reading it...? how can i tell..?


Ext.onReady(function(){
var dataRecord = new Ext.data.Record.create({
{name: 'WOrder'},
{name: 'PartNumber'},
{name: 'WOPartQuantity'},
{name: 'PartPriority'}
});

var dataReader = new Ext.data.JsonReader({
root: 'data'
//fields: ['WOrder', 'PartNumber', 'WOPartQuantity', 'PartPriority']
},
dataRecord
);

var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'http://localhost/index.php/listboards/js_listboards'}),
reader: dataReader
});

var colModel = new Ext.grid.ColumnModel({
{header: "WorkOrder", dataIndex: 'WOrder'},
{header: "PartNumber", dataIndex: 'PartNumber'},
{header: "PartQuantity", dataIndex: 'PartQuantity'},
{header: "Priority", dataIndex: 'Priority'},
});

var grid = new Ext.grid.GridPanel({
height: autoHeight,
renderTo: 'content',
store: dataStore,
id: 'grid',
width: 740,
viewConfig: {
forceFit: true
},
cm: colModel
});

dataStore.load();

});



I am not asking for a resolution, but for a pointer on what i have done wrogn...

Thanks for any ideas or pointers...

mjlecomte
11 Mar 2008, 7:48 AM
Check the debug sequence in the FAQ. See if it helps in your situation, and if not, maybe we can adjust it a bit.
That's good that you checked jslint to see that the json is valid, good start. But what helps is if you post here a screenshot or post inside code tags what is inside the POST and RESPONSE from the console.

mjlecomte
11 Mar 2008, 8:33 AM
Also, check the bit about adding listeners. Examining the response may be sufficient, but some of those listeners are a tell tale sign of what's wrong.

rvent
11 Mar 2008, 8:40 AM
It is giving me error on the dataRecord.



invalid property id
[Break on this error] {name: 'PartNumber'},\n


If i comment the line out it moves on to the next one.... :-?

mjlecomte
11 Mar 2008, 8:44 AM
Well, don't just start commenting out the lines that give errors, that's not the solution.

Can you post firebug response?

mjlecomte
11 Mar 2008, 8:49 AM
How can i find out if the reader is actually reading something...? I went to that site that checks to see if a string is json foramtted and it told my result is ok...

json encoded data is ok so i know thats not the problem:


I think I see your problem. Post your response.

mjlecomte
11 Mar 2008, 8:50 AM
See FAQ Likely problems to check: Did you make it to #6?

rvent
11 Mar 2008, 9:10 AM
Well i did that just to see if it would happen to only that field or all of them...

I fixed a few errors, but now i get this new one:



[Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

Line 0


The grid now shows up, but with no data...:-?

THanks

rvent
11 Mar 2008, 9:20 AM
See FAQ Likely problems to check: Did you make it to #6?

Yes... here is my php function:


function js_listBoards()
{
$Boards = $this->Boards->getBoards();
foreach($Boards->result() as $row)
{
$item = Array("WOrder" => $row->WOrder,
"PartNumber" => $row->PartNumber,
"WOPartQuantity" => $row->WOPartQuantity,
"PartPriority" => $row->PartPriority);

$data[] = $item;
}
echo json_encode($data);
}


It encodes $data and i get:


[{"WOrder":"97350","PartNumber":"H35146AAD","WOPartQuantity":"3","PartPriority":"Medium"},{"WOrder":"98058","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Medium"},{"WOrder":"98197","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Low"},{"WOrder":"98633","PartNumber":"H78673A","WOPartQuantity":"5","PartPriority":"Lowest"},{"WOrder":"98886","PartNumber":"H78812AAG","WOPartQuantity":"7","PartPriority":"Low"},{"WOrder":"98919","PartNumber":"T1005049AM","WOPartQuantity":"60","PartPriority":"Lowest"},{"WOrder":"99082","PartNumber":"T1023529AK","WOPartQuantity":"10","PartPriority":"Low"}]


Which passes the test on the json verify from the site in your FAQ..

mjlecomte
11 Mar 2008, 10:06 AM
It passes the jslint test which just means it's valid json. It doesn't mean it meets the requirements of #6.


var dataReader = new Ext.data.JsonReader({
root: 'data'
//fields: ['WOrder', 'PartNumber', 'WOPartQuantity', 'PartPriority']
},
dataRecord
);


Re-read the FAQ, I supplemented it further. This bit is already in the API docs showing an example, but I repeated it anyway.

mjlecomte
11 Mar 2008, 10:08 AM
Additional hint:


[{"WOrder":"97350","PartNumber":"H35146AAD

You have something missing.

rvent
11 Mar 2008, 10:57 AM
I see...

So now my json data looks like yours, BUT i still get the:


[Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

Line 0


I was reading about it and it mentions something about browser security... I have checked safari and firefox options and didnt see anything about that.

Would that error prevent the data from loading into the grid.?

Thanks

rvent
11 Mar 2008, 11:25 AM
Well, i was using full url in the "httpProxy" property and it was causing the error. Changed it and it went away, but now i get this image.

UPDATE:

It seems it is related to the codeigniter urls.
Response:


<?php

/*

|---------------------------------------------------------------

| PHP ERROR REPORTING LEVEL

|---------------------------------------------------------------

|

| By default CI runs with error reporting set to ALL. For security

| reasons you are encouraged to change this when your site goes live.

| For more info visit: http://www.php.net/error_reporting

|

*/

error_reporting(E_ALL);

/*

|---------------------------------------------------------------

| SYSTEM FOLDER NAME

|---------------------------------------------------------------

|

| This variable must contain the name of your "system" folder.

| Include the path if the folder is not in the same directory

| as this file.

|

| NO TRAILING SLASH!

|

*/

$system_folder = "system";

/*

|---------------------------------------------------------------

| APPLICATION FOLDER NAME

|---------------------------------------------------------------

|

| If you want this front controller to use a different "application"

| folder then the default one you can set its name here. The folder

| can also be renamed or relocated anywhere on your server.

| For more info please see the user guide:

| http://www.codeigniter.com/user_guide/general/managing_apps.html

|

|

| NO TRAILING SLASH!

|

*/

$application_folder = "application";

/*

|===============================================================

| END OF USER CONFIGURABLE SETTINGS

|===============================================================

*/

/*

|---------------------------------------------------------------

| SET THE SERVER PATH

|---------------------------------------------------------------

|

| Let's attempt to determine the full-server path to the "system"

| folder in order to reduce the possibility of path problems.

| Note: We only attempt this if the user hasn't specified a

| full server path.

|

*/

if (strpos($system_folder, '/') === FALSE)

{

if (function_exists('realpath') AND @realpath(dirname(__FILE__)) !== FALSE)

{

$system_folder = realpath(dirname(__FILE__)).'/'.$system_folder;

}

}

else

{

// Swap directory separators to Unix style for consistency

$system_folder = str_replace("\\", "/", $system_folder);

}

/*

|---------------------------------------------------------------

| DEFINE APPLICATION CONSTANTS

|---------------------------------------------------------------

|

| EXT - The file extension. Typically ".php"

| FCPATH - The full server path to THIS file

| SELF - The name of THIS file (typically "index.php)

| BASEPATH - The full server path to the "system" folder

| APPPATH - The full server path to the "application" folder

|

*/

define('EXT', '.'.pathinfo(__FILE__, PATHINFO_EXTENSION));

define('FCPATH', __FILE__);

define('SELF', pathinfo(__FILE__, PATHINFO_BASENAME));

define('BASEPATH', $system_folder.'/');

if (is_dir($application_folder))

{

define('APPPATH', $application_folder.'/');

}

else

{

if ($application_folder == '')

{

$application_folder = 'application';

}

define('APPPATH', BASEPATH.$application_folder.'/');

}

/*

|---------------------------------------------------------------

| DEFINE E_STRICT

|---------------------------------------------------------------

|

| Some older versions of PHP don't support the E_STRICT constant

| so we need to explicitly define it otherwise the Exception class

| will generate errors.

|

*/

if ( ! defined('E_STRICT'))

{

define('E_STRICT', 2048);

}

/*

|---------------------------------------------------------------

| LOAD THE FRONT CONTROLLER

|---------------------------------------------------------------

|

| And away we go...

|

*/

require_once BASEPATH.'codeigniter/CodeIgniter'.EXT;

?>


This link doesnt work... (http://extjs.com/forum/showthread.php?p=120599)

mjlecomte
11 Mar 2008, 12:33 PM
What all have you changed?

How did you go from a response in firebug showing something like this:

[{"WOrder":"97350","PartNumber":"H35146AAD","WOPartQuantity...

To all of those errors?


So now my json data looks like yours
Looks like mine? My what?

Move this outside CI to remove that unnecessary complication. I suggested that part in my first post. Your mixing in so many different things and you don't know what each one does.

Suggestions, post the following here:
1. current js code
2. current php code
3. the post and response from firebug
4. navigate directly to the url and post the JSON string that should hopefully be displayed there.

rvent
11 Mar 2008, 12:56 PM
The json string never showed up in firebug. It shows by calling the function that echos the json_encode.

controller: (only the relevant function)


function js_listBoards()
{
$Boards = $this->Boards->getBoards();

foreach($Boards->result() as $row)
{
$item = Array("WOrder" => $row->WOrder,
"PartNumber" => $row->PartNumber,
"WOPartQuantity" => $row->WOPartQuantity,
"PartPriority" => $row->PartPriority);

$itemList[] = $item;
}

$rows = $Boards->num_rows();
$data = json_encode($itemList);

echo '[{"results":' . $data . '}]';
}


Here is the js script:


Ext.onReady(function(){
var dataRecord = new Ext.data.Record.create([
{name: 'WOrder'},
{name: 'PartNumber'},
{name: 'WOPartQuantity'},
{name: 'PartPriority'}
]);

var dataReader = new Ext.data.JsonReader({
root: 'results'
//fields: ['WOrder', 'PartNumber', 'WOPartQuantity', 'PartPriority']
},
dataRecord
);

var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '../../../index.php?c=listboards&m=js_listboards',
//url: '../../../index.php/listboards/js_listboards',
method: 'POST'
}),
reader: dataReader
});

var colModel = new Ext.grid.ColumnModel([
{header: "WorkOrder", dataIndex: 'WOrder'},
{header: "PartNumber", dataIndex: 'PartNumber'},
{header: "PartQuantity", dataIndex: 'PartQuantity'},
{header: "Priority", dataIndex: 'Priority'},
]);

var grid = new Ext.grid.GridPanel({
height: 400,
renderTo: 'content',
store: dataStore,
id: 'grid',
width: 740,
viewConfig: {
forceFit: true
},
cm: colModel
});

dataStore.load();


});



Firebug:
Response:


<?php

/*
|---------------------------------------------------------------
| PHP ERROR REPORTING LEVEL
|---------------------------------------------------------------
|
| By default CI runs with error reporting set to ALL. For security
| reasons you are encouraged to change this when your site goes live.
| For more info visit: http://www.php.net/error_reporting
|
*/
error_reporting(E_ALL);

/*
|---------------------------------------------------------------
| SYSTEM FOLDER NAME
|---------------------------------------------------------------
|
| This variable must contain the name of your "system" folder.
| Include the path if the folder is not in the same directory
| as this file.
|
| NO TRAILING SLASH!
|
*/
$system_folder = "system";

/*
|---------------------------------------------------------------
| APPLICATION FOLDER NAME
|---------------------------------------------------------------
|
| If you want this front controller to use a different "application"
| folder then the default one you can set its name here. The folder
| can also be renamed or relocated anywhere on your server.
| For more info please see the user guide:
| http://www.codeigniter.com/user_guide/general/managing_apps.html
|
|
| NO TRAILING SLASH!
|
*/
$application_folder = "application";


/*
|===============================================================
| END OF USER CONFIGURABLE SETTINGS
|===============================================================
*/


/*
|---------------------------------------------------------------
| SET THE SERVER PATH
|---------------------------------------------------------------
|
| Let's attempt to determine the full-server path to the "system"
| folder in order to reduce the possibility of path problems.
| Note: We only attempt this if the user hasn't specified a
| full server path.
|
*/
if (strpos($system_folder, '/') === FALSE)
{
if (function_exists('realpath') AND @realpath(dirname(__FILE__)) !== FALSE)
{
$system_folder = realpath(dirname(__FILE__)).'/'.$system_folder;
}
}
else
{
// Swap directory separators to Unix style for consistency
$system_folder = str_replace("\\", "/", $system_folder);
}

/*
|---------------------------------------------------------------
| DEFINE APPLICATION CONSTANTS
|---------------------------------------------------------------
|
| EXT - The file extension. Typically ".php"
| FCPATH - The full server path to THIS file
| SELF - The name of THIS file (typically "index.php)
| BASEPATH - The full server path to the "system" folder
| APPPATH - The full server path to the "application" folder
|
*/
define('EXT', '.'.pathinfo(__FILE__, PATHINFO_EXTENSION));
define('FCPATH', __FILE__);
define('SELF', pathinfo(__FILE__, PATHINFO_BASENAME));
define('BASEPATH', $system_folder.'/');

if (is_dir($application_folder))
{
define('APPPATH', $application_folder.'/');
}
else
{
if ($application_folder == '')
{
$application_folder = 'application';
}

define('APPPATH', BASEPATH.$application_folder.'/');
}

/*
|---------------------------------------------------------------
| DEFINE E_STRICT
|---------------------------------------------------------------
|
| Some older versions of PHP don't support the E_STRICT constant
| so we need to explicitly define it otherwise the Exception class
| will generate errors.
|
*/
if ( ! defined('E_STRICT'))
{
define('E_STRICT', 2048);
}

/*
|---------------------------------------------------------------
| LOAD THE FRONT CONTROLLER
|---------------------------------------------------------------
|
| And away we go...
|
*/
require_once BASEPATH.'codeigniter/CodeIgniter'.EXT;
?>


No post, no headers.
Params: c listboards, m js_listboards

when i call the function that has the echo for the json encode i get this within the browser:
i go to: http://localhost/index.php?c=listboards&m=js_listboards


[{"results":[{"WOrder":"97350","PartNumber":"H35146AAD","WOPartQuantity":"3","PartPriority":"Medium"},{"WOrder":"98058","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Medium"},{"WOrder":"98197","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Low"},{"WOrder":"98633","PartNumber":"H78673A","WOPartQuantity":"5","PartPriority":"Lowest"},{"WOrder":"98886","PartNumber":"H78812AAG","WOPartQuantity":"7","PartPriority":"Low"},{"WOrder":"98919","PartNumber":"T1005049AM","WOPartQuantity":"60","PartPriority":"Lowest"},{"WOrder":"99082","PartNumber":"T1023529AK","WOPartQuantity":"10","PartPriority":"Low"}]}]



I think the problem is on my url property...

mjlecomte
11 Mar 2008, 1:30 PM
What do you mean no post and no headers?

Firebug --> Console --> Look for a line that shows outgoing request, it will have plus sign on left side. Click on plus sign you will see tabs for headers, post, and response.

The response you keep posting is not the response that shows up on the console tab.

Looks like you don't want to move this outside CI huh? I agree part of your problem is probably the URL / post. But you've had a bunch of other problems as well it seems. Seems like it would be much easier to fix one problem at a time.

You have php, mysql, javascript, and codeigniter. There's at least 4 areas where things can get screwed up.

I imagine that's why you think the example I posted is too complicated, because it's not made to drop right into CI?

rvent
11 Mar 2008, 1:37 PM
Take a look.

mjlecomte
11 Mar 2008, 1:56 PM
Hmmm. I don't remember Codeigniter working that way. Meaning your url yes. Starts with file:// and looks like it has html at the end of it.

I can't help you more with the ext end of it while you have it wrapped up inside CI.

rvent
12 Mar 2008, 10:15 AM
One of the issues was the path for some of the files.

My controller looks like this:


function index()
{
// $list['Boards'] = $this->Boards->getBoards();

// $this->load->view('listBoardsv', $list);
$this->load->view('js-test');
}

function js_listBoards()
{
$Boards = $this->Boards->getBoards();

foreach($Boards->result() as $row)
{
$item = Array("WOrder" => $row->WOrder,
"PartNumber" => $row->PartNumber,
"WOPartQuantity" => $row->WOPartQuantity,
"PartPriority" => $row->PartPriority);

$itemList[] = $item;
}

$rows = $Boards->num_rows();
$data = json_encode($itemList);

echo '[{"results":' . $data . '}]';
}


And i get this RESPONSE from firebug when the page loads: (i am also able to see the empty grid (yes, i checked your FAQ))


[{"results":[{"WOrder":"97350","PartNumber":"H35146AAD","WOPartQuantity":"3","PartPriority":"Medium"

},{"WOrder":"98058","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Medium"},{"WOrder"

:"98197","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Low"},{"WOrder":"98633","PartNumber"

:"H78673A","WOPartQuantity":"5","PartPriority":"Lowest"},{"WOrder":"98886","PartNumber":"H78812AAG","WOPartQuantity"

:"7","PartPriority":"Low"},{"WOrder":"98919","PartNumber":"T1005049AM","WOPartQuantity":"60","PartPriority"

:"Lowest"},{"WOrder":"99082","PartNumber":"T1023529AK","WOPartQuantity":"10","PartPriority":"Low"}]}

]


The JS code is still the same...

...:-?

mjlecomte
12 Mar 2008, 10:22 AM
Ok, if you see that in firebug then the backend issues are out of the way and no longer an issue.

You checked the FAQ, does that mean that you added listeners? What listeners fired? load or loadexception?

rvent
12 Mar 2008, 10:54 AM
this one:
** - Data Store listener fired (loadexception), arguments: Object tId=0 status=200 statusText=OK

mjlecomte
12 Mar 2008, 11:02 AM
Ok, well inspect with firebug inside that listener. You mentioned earlier that you've posted the most current js code yet I don't see where there's any listeners activated, what's inside them, etc.

Out of curiosity what does your screenshot look like now. Earlier you posted a screenshot showing the page with the url and the response etc.

rvent
12 Mar 2008, 11:13 AM
The only thing added was the store listeners..
What whould i be looking for in firebug...? THe first line in the DOM tab i see the "argument" filed and it says undefined..

The responseText has the json string. I have no clue at what i should be looking for... :-?:-/



Ext.onReady(function(){
var dataRecord = new Ext.data.Record.create([
{name: 'WOrder'},
{name: 'PartNumber'},
{name: 'WOPartQuantity'},
{name: 'PartPriority'}
]);

var dataReader = new Ext.data.JsonReader({
root: 'results'
//fields: ['WOrder', 'PartNumber', 'WOPartQuantity', 'PartPriority']
},
dataRecord
);

var dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
//url: '../../../index.php?c=listboards&m=js_listboards',
url: '../../../index.php/listboards/js_listboards',
method: 'POST'
}),
reader: dataReader
});

var colModel = new Ext.grid.ColumnModel([
{header: "WorkOrder", dataIndex: 'WOrder'},
{header: "PartNumber", dataIndex: 'PartNumber'},
{header: "PartQuantity", dataIndex: 'PartQuantity'},
{header: "Priority", dataIndex: 'Priority'},
]);

var grid = new Ext.grid.GridPanel({
height: 400,
renderTo: 'content',
store: dataStore,
id: 'grid',
width: 740,
viewConfig: {
forceFit: true
},
cm: colModel
});

dataStore.load();
dataStore.on({
'load':{
fn: function(store, records, options){
console.log('01 - Data Store listener fired (load), arguments:',arguments);
console.log(' this:',this);
}
,scope:this
}
,'loadexception':{
fn: function(httpProxy, dataObject, arguments, exception){
console.log('** - Data Store listener fired (loadexception), arguments:',arguments);
}
,scope:this
}
});

});

mjlecomte
12 Mar 2008, 11:31 AM
Well, I can see now you changed your url in the js code. Still curious what the url looks like in your browser.

What about adding the ajax and proxy listeners? I suspect some of them will fire exceptions as well.

rvent
12 Mar 2008, 12:00 PM
Ok, got updated JS so that it was easy to use the listener.

url on browser looks like this: http://localhost/index.php?c=listboards or i could just use locathost. (taken from here: http://extjs.com/forum/showthread.php?p=120599) either way i get the same result.

Firebug:


10 - Ajax listener fired (requestcomplete), arguments(connection, response, options): [Object autoAbort=false events=Object transId=false, Object tId=0 status=200 statusText=OK, Object params=Object request=Object reader=Object]

** - Data Store listener fired (loadexception), arguments: Object tId=0 status=200 statusText=OK

Proxy listener fired (loadexception), arguments: [Object events=Object conn=Object useAjax=true, Object params=Object request=Object reader=Object, Object tId=0 status=200 statusText=OK, TypeError: root has no properties message=root has no properties]


json string: this is what i get when i go to http://localhost/index.php?c=listboards&m=js_listboards


[{"results":[{"WOrder":"97350","PartNumber":"H35146AAD","WOPartQuantity":"3","PartPriority":"Medium"},{"WOrder":"98058","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Medium"},{"WOrder":"98197","PartNumber":"T1022229AD","WOPartQuantity":"8","PartPriority":"Low"},{"WOrder":"98633","PartNumber":"H78673A","WOPartQuantity":"5","PartPriority":"Lowest"},{"WOrder":"98886","PartNumber":"H78812AAG","WOPartQuantity":"7","PartPriority":"Low"},{"WOrder":"98919","PartNumber":"T1005049AM","WOPartQuantity":"60","PartPriority":"Lowest"},{"WOrder":"99082","PartNumber":"T1023529AK","WOPartQuantity":"10","PartPriority":"Low"}]}]


JS:


Ext.onReady(function(){
var dataRecord = new Ext.data.Record.create([
{name: 'WOrder'},
{name: 'PartNumber'},
{name: 'WOPartQuantity'},
{name: 'PartPriority'}
]);

var dataReader = new Ext.data.JsonReader({
root: 'results'
//fields: ['WOrder', 'PartNumber', 'WOPartQuantity', 'PartPriority']
},
dataRecord
);

var dataProxy = new Ext.data.HttpProxy({
url: '../../../index.php/listboards/js_listboards',
method: 'POST'
});

var dataStore = new Ext.data.Store({
proxy: dataProxy,
reader: dataReader
});

var colModel = new Ext.grid.ColumnModel([
{header: "WorkOrder", dataIndex: 'WOrder'},
{header: "PartNumber", dataIndex: 'PartNumber'},
{header: "PartQuantity", dataIndex: 'PartQuantity'},
{header: "Priority", dataIndex: 'Priority'},
]);

var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'content',
store: dataStore,
id: 'grid',
width: 740,
viewConfig: {
forceFit: true
},
cm: colModel
});

dataStore.load();
dataStore.on({
'load':{
fn: function(store, records, options){
console.log('01 - Data Store listener fired (load), arguments:',arguments);
console.log(' this:',this);
}
,scope:this
}
,'loadexception':{
fn: function(httpProxy, dataObject, arguments, exception){
console.log('** - Data Store listener fired (loadexception), arguments:',arguments);
}
,scope:this
}
});

Ext.Ajax.on({
//Fires before a network request is made to retrieve a data object:
'beforerequest':{
fn: function(connection, options){
console.log('03 - Ajax listener fired (beforerequest), arguments(connection, options):',arguments);
}
,scope:this
}
//Fires if the request was successfully completed:
,'requestcomplete':{
fn: function(connection, response, options){
console.log('10 - Ajax listener fired (requestcomplete), arguments(connection, response, options):',arguments);
}
,scope:this
}
//Fires if an error HTTP status was returned from the server. See HTTP Status Code
//Definitions for details of HTTP status codes:
,'requestexception':{
fn: function(connection, response, options){
console.log('Ajax listener fired (requestexception), arguments:(connection, response, options)',arguments);
}
,scope:this
}
});

dataProxy.on({
'beforeload':{
fn: function(store, options){
console.log('02 - Proxy listener fired (beforeload), arguments:',arguments);
}
,scope:this
}
,'load':{
fn: function(store, options){
console.log('Proxy listener fired (load), arguments:',arguments);
}
,scope:this
}
,'loadexception':{
fn: function(store, options){
console.log('Proxy listener fired (loadexception), arguments:',arguments);
}
,scope:this
}
});

});

mjlecomte
12 Mar 2008, 12:12 PM
Ok, got updated JS so that it was easy to use the listener.

url on browser looks like this: http://localhost/index.php?c=listboards or i could just use locathost. (taken from here: http://extjs.com/forum/showthread.php?p=120599) either way i get the same result.


My point on this part is that your earlier screenshot showed you going to file:// .........html

So I see you changed the url in your proxy and I gather you're navigating to the page through your server now.

Please take a look at your first few threads and see what you were posting and asking people for help on. Also take a look at the earlier questions I was asking and see what you were saying etc. You had some very "basic" issues going on that were fouling everything up but you were not providing the relevant information here and posting it. I hope you can see the other side of the story now, imagine sitting where I am trying to figure out your problems given the information you were providing.

mjlecomte
12 Mar 2008, 12:18 PM
Looks like that proxy listener told you what was wrong huh?

You have firebug, you can inspect the dom of those console logs.

I think you should put up a new thread on how to do a grid with codeigniter now, mentioning all of your trials and tribulations, pitfalls, etc.

rvent
12 Mar 2008, 12:34 PM
Yeah... i ll do that.

Let me ask you whats the difference with


echo '({"total":"' . $rows . '","results":' . $data . '})';


and



echo '[{"results":' . $data . '}]';


The first one made the grid work, but not the second one... Does that mean that i must have the number of rows...?

If so how efficient would this be when i have 10K records..? I know one way is to do pagination like you did on your example, but would there be much of a gain..?

Thanks a lot for your help... Never would have done it without you, specially this quickly...

Thanks again..

mjlecomte
12 Mar 2008, 2:14 PM
I'm not sure, post your latest js code, so I can check stuff.

Post the response seen by firebug for those two situations you describe.

When you include the total or any other extra data for that matter you're just saying how many records there were, not that you're sending all 10,000 back. Presumably you're limiting the number of returned records somehow, although I'm not sure how/why you would want to do that without paging. Paging limits you to X of 10,000 records. Without the paging I guess you'll hardcode the limit returned?