Results 1 to 4 of 4

Thread: MOVED POST: Posting a JSON array with multiple values to ext js panel

  1. #1
    Sencha User
    Join Date
    Oct 2013
    Location
    Oklahoma
    Posts
    6

    Default MOVED POST: Posting a JSON array with multiple values to ext js panel

    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

    PHP Code:
    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

    Code:
    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/1...o-ext-js-panel
    Last edited by Troxy; 10 Oct 2013 at 8:57 AM. Reason: Question Answered

  2. #2
    Sencha User
    Join Date
    Jan 2011
    Posts
    549

    Default

    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:

    Code:
    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://dev.sencha.com/deploy/ext-3.4...templates.html

  3. #3
    Sencha User
    Join Date
    Oct 2013
    Location
    Oklahoma
    Posts
    6

    Default

    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!

  4. #4
    Sencha User
    Join Date
    Oct 2013
    Location
    Oklahoma
    Posts
    6

    Default

    Quote Originally Posted by willigogs View Post
    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:

    Code:
    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://dev.sencha.com/deploy/ext-3.4...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!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •