PDA

View Full Version : MOVED POST: Posting a JSON array with multiple values to ext js panel



Troxy
9 Oct 2013, 10:13 AM
I am working on an element of an application I am developing. I have a small web app dedicated to keep track of clients for a business. Currently my capability is pretty limited. I store the note along with other attributes in the clients table. I decided to try and make it a bit better by adding a note table and updating an ext js panel with the notes from that table.<br><br>What I have right now is partially working. It gives me the last value of my json array. What I want is it to give me all the values in the format I assign.

Here is my PHP


case 'note':
$userid = $_REQUEST['clientID'];
$query = $dbh->prepare("SELECT a.username, b.bdev_firstname, b.bdev_lastname, n.note_date, n.note_body FROM admin a, bdevs b, clients c, notes n WHERE c.clientID=".$userid.";");
$query->execute(array($userid));
$response = json_encode(array('success'=> true, 'data' => $query->fetchAll(PDO::FETCH_ASSOC)));
echo $response;
break;

This is my .js function


function getNote(){
var selectedNote = userGrid.getSelectionModel().getSelected();
Ext.Ajax.request({
url: 'inc/template.php',
params: {list: 'note',
clientID: selectedNote.get('clientID')
},
method: 'POST',
success: function(f,a){
var jsonData = Ext.util.JSON.decode(f.responseText);

if(jsonData.success == true)
{

for(i = 0; i < jsonData.data.length; i++) {
var item = jsonData.data[i];
RightPanel.update('<b>Admin:</b> ' + item.username + '<br/><b>Buissiness Dev Rep:</b> ' + item.bdev_firstname + ' ' + item.bdev_lastname + '<br/><b>Note Date:</b> ' + item.note_date + ' <br/>----------<br/> ' + item.note_body);
}
}
else
{
RightPanel.update('Access Denied');
}
},
failure: function(f,a){
Ext.Msg.alert("Error", "Access Denied");
}
});
}

This is the response I am getting after I run the function


{"success":true,"data":[{"username":"rcox","bdev_firstname":"T***","bdev_lastname":"E***","note_date":"2013-10-08","note_body":"abcd"},{"username":"rcox","bdev_firstname":"T***","bdev_lastname":"E***","note_date":"2013-10-09","note_body":"dqwerty"},{"username":"rcox","bdev_firstname":"T***","bdev_lastname":"E***","note_date":"2013-10-10","note_body":"zxcvxccvbcvbncbvncvbn"}]}

All that shows in my panel is this.

Admin: rcox
Buissiness Dev Rep: T*** E***
Note Date: 2013-10-10
----------
zxcvxccvbcvbncbvncvbn

When I want something like this

Admin: rcox
Buissiness Dev Rep: T*** E***
Note Date: 2013-10-10
----------
zxcvxccvbcvbncbvncvbn

Admin: rcox
Buissiness Dev Rep: T*** E***
Note Date: 2013-10-10
----------
zxcvxccvbcvbncbvncvbn

Admin: rcox
Buissiness Dev Rep: T*** E***
Note Date: 2013-10-10
----------
zxcvxccvbcvbncbvncvbn

I appreciate any help or comments.

Thanks!


This has been answered below. For more troubleshooting on this topic you can visit my question on StackOverfolw. http://stackoverflow.com/questions/19275480/posting-a-json-string-with-multiple-values-to-ext-js-panel

willigogs
10 Oct 2013, 12:54 AM
Your issue is that you are running the update method inside your loop - therefore you update the panel with a customer's details, then immediately overwrite them with the next (hence you only see the final customer details).

Instead you should build up the display html into a single variable outside of the loop, then update once the loop has completed. e.g:



var html = '';
Ext.each(jsonData, function(i, row) {
html = html + '<b>Admin: </b>' + row.username;
})
panel.update(html)


However, Ext has build-in dataviews for handling exactly what you're building here manually, where you can run recordsets through templates, and display them in a dataview.

e.g:
http://extjsinaction.com/examples/chapter09/DataView_bound_to_ListView.html
(http://extjsinaction.com/examples/chapter09/DataView_bound_to_ListView.html)
http://dev.sencha.com/deploy/ext-3.4.0/examples/core/templates.html

Troxy
10 Oct 2013, 7:05 AM
Your my hero! Thanks for the reply. I will get to work tryin to implement the DataView!

I'm relativley inexperienced so I just started building what I knew!

Fantastic, really great! :D

Troxy
14 Oct 2013, 8:11 AM
Your issue is that you are running the update method inside your loop - therefore you update the panel with a customer's details, then immediately overwrite them with the next (hence you only see the final customer details).

Instead you should build up the display html into a single variable outside of the loop, then update once the loop has completed. e.g:



var html = '';
Ext.each(jsonData, function(i, row) {
html = html + '<b>Admin: </b>' + row.username;
})
panel.update(html)


However, Ext has build-in dataviews for handling exactly what you're building here manually, where you can run recordsets through templates, and display them in a dataview.

e.g:
http://extjsinaction.com/examples/chapter09/DataView_bound_to_ListView.html
(http://extjsinaction.com/examples/chapter09/DataView_bound_to_ListView.html)
http://dev.sencha.com/deploy/ext-3.4.0/examples/core/templates.html

I appreciate the links in this post, but I am having real trouble understanding the DataView. Do you know of an explain like I'm 5 tutorial floating around anywhere? I just can't seem to grasp it.

Thanks if you have anything, otherwise I'm still on the search for something I can figure out myself!