Results 1 to 8 of 8

Thread: JsonStore / XTemplate / Dataview - can't get data to display

  1. #1

    Default JsonStore / XTemplate / Dataview - can't get data to display

    Having trouble getting some data to display. Here's the scripts:

    Code:
    Ext.onReady(function(){
                
                var companyInfoStore = new Ext.data.JsonStore({
                    url:'company_info.php',
                    root:'data',
                    fields: [
                        'id',
                        'companyID',
                        'municipality',
                        'approved',
                        'prefix',
                        'name',
                        'suffix',
                        'former_name'
                    ]
                });
                companyInfoStore.load();
                
                
                var companyInfoTemplate = new Ext.XTemplate(
                    '<div class="innerGrid"><table width="100%" border="0">',
                    '<tr>',
                    '<td width="25%">Company ID:</td><td width="75%">{companyID}</td>',
                    '</tr><tr>',
                    '<td>Municipality:</td><td>{municipality}</td>',
                    '</tr><tr>',
                    '<td>Approved:</td><td>{approved}</td>',
                    '</tr><tr>',
                    '<td>Prefix:</td><td>{prefix}</td>',
                    '</tr><tr>',
                    '<td>Name:</td><td>{name}</td>',
                    '</tr><tr>',
                    '<td>Suffix:</td><td>{suffix}</td>',
                    '</tr><tr>',
                    '<td>Former Name:</td><td>{former_name}</td>',
                    '</tr>',
                    '</table></div>'
                );
    
                var companyInfoPanel = new Ext.Panel({
                    renderTo:'contentGrid',
                    id:'panel',
                    collapsible:true,
                    header:true,
                    border:false,
                    frame:true,
                    width:400,
                    title:'Company Information',
                    layout:'fit',
                    style:'font-family:arial; font-size:small; color:#666600;',
                    items: new Ext.DataView({
                        store: companyInfoStore,
                        tpl: companyInfoTemplate,
                        multiSelect:true,
                        autoHeight:true,
                        itemSelector:'div.innerGrid',
                        emptyText:'No data',
                        id:'dataview'
                    })
                });
    
            });
    And the PHP to create the JSON file:

    Code:
    <?php
    
    $conn = mysql_connect("localhost","root","") or die("Could not connect".mysql_error());
    @mysql_select_db("json_test", $conn) or die("Could not select database".mysql_error());
    
    $query = "SELECT * FROM company_info";
    $result = mysql_query($query, $conn) or die("Could not retrieve data: ".mysql_error());
    
    while ($obj = mysql_fetch_object($result)) {
        $arr[]= $obj;
    }
    
    echo '{"data":'.json_encode($arr).'}';
    
    ?>
    Multiple variations on encoding the json have been tried with varying results, and this PHP seems to produce the best results.

    when looking at the JsonStore variable (document.write(companyInfoStore)), it gives [object Object]. Don't know if this is relevant.

    The HTML shows up, but not the data from the JSON file.

    Yes, I've read all the API documentation and all the forum posts I can find.

    I'm stuck and need fresh eyeballs on this. It's been almost a week and the boss is getting pissed.

    Thanks in advance.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    FATAL1TY had exactly the same problem as you today. See her thread. Your XTemplate is wrong.


    I assume you want the <tr> part of it to repeat, one for each Record in your Store?

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    document.write?

    THAT is NOT debugging.

    Use Firebug, or you will waste 90% of your time, and nobody will be able to help you.

  4. #4

    Default

    So is there an equivalent to dump() in ExtJS? I am using Firebug, but I guess that there are still gaps in my knowledge (developing in ExtJS and Javascript is only about 10% of my whole job).

    The examples of the XTemplate page shows the template using a data set that has an array in only part of the whole set, and that array is being rendered with the tpl tags. The rest of the array is being rendered straight, therefore it's not an illogical conclusion that you can send JSON that doesn't have an array:

    {"sample":{"id":"1","companyID":"12","municipality":"Blah","approved":"yes","prefix":"","name":"BlahBlah","suffix":"Inc.","former_name":" BlahBlahBlah"}}

    I see now that the JSON must have an array for the JsonStore to parse it properly; that wasn't clear at least to me who is not a full-time JavaScript developer, is not 100% comfortable with the language used in documentation, and trying to learn a language via the API documentation, which is like trying to learn a foreign language from a dictionary, not a phrase book.

    Anyway, I'm on the right track now; thanks for pointing me in the right direction.

  5. #5

    Default

    Quote Originally Posted by Animal View Post
    FATAL1TY had exactly the same problem as you today. See her thread. Your XTemplate is wrong.


    I assume you want the <tr> part of it to repeat, one for each Record in your Store?
    Actually, there's only one record I'm trying to display - I'm just trying to format it so it display's cleanly (the table isn't the final design solution, just a quick-and-dirty layout method).

  6. #6

    Default

    The code that works:

    Code:
            Ext.onReady(function(){
                
                var companyInfoStore = new Ext.data.JsonStore({
                    url:'company_info.php',
                    root:'sample',
                    fields: [
                        'id',
                        'companyID',
                        'municipality',
                        'approved',
                        'prefix',
                        'name',
                        'suffix',
                        'former_name'
                    ]
                });
                companyInfoStore.load();
                
                
                var companyInfoTemplate = new Ext.XTemplate(
                    '<div class="innerGrid"><table width="100%" border="0">',
                    '<tpl for=".">',
                        '<tr><td width="85">ID:</td><td width="315">{id}</td></tr>',
                        '<tr><td>Company ID:</td><td>{companyID}</td></tr>',
                        '<tr><td>Municipality:</td><td>{municipality}</td></tr>',
                        '<tr><td>Approved:</td><td>{approved}</td></tr>',
                        '<tr><td>Prefix:</td><td>{prefix}</td></tr>',
                        '<tr><td>Name:</td><td>{name}</td></tr>',
                        '<tr><td>Suffix:</td><td>{suffix}</td></tr>',
                        '<tr><td>Former Name:</td><td>{former_name}</td></tr>',
                   '</tpl>',
                   '<table>',
                    '<div class="x-clear"></div>'
                );
                
                var companyInfoPanel = new Ext.Panel({
                    renderTo:'contentGrid',
                    id:'panel',
                    collapsible:true,
                    header:true,
                    border:false,
                    frame:true,
                    width:400,
                    title:'Company Information',
                    layout:'fit',
                    style:'font-family:arial; font-size:small; color:#666600;',
                    items: new Ext.DataView({
                        store: companyInfoStore,
                        tpl: companyInfoTemplate,
                        multiSelect:true,
                        autoHeight:true,
                        itemSelector:'div.innerGrid',
                        emptyText:'No data',
                        id:'dataview'
                    })
                });
    
            });
    Which displays JSON that looks like this:

    Code:
    {
    
    "sample": [
    {
    "id":"1", "companyID":"12", "municipality":"Blah", "approved":"yes", "prefix":"", "name":"BlahBlah", "suffix":"Inc.", "former_name":"BlahBlahBlah"
    }
    ]
    }
    The JSON needs to be in an array; this will not work, even though it is valid JSON:

    Code:
    {
    
    "sample": {
    "id":"1", "companyID":"12", "municipality":"Blah", "approved":"yes", "prefix":"", "name":"BlahBlah", "suffix":"Inc.", "former_name":"BlahBlahBlah"
    }
    }

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    In Firebug, you set breakpoints, to pause execution and examine (and possibly change) values dynamically during execution.

  8. #8

    Default

    I am also facing problem I could not able to see my firebug please let me know below my code steps are :Step -1 :Using Spring mvc I am getting json data seeing in response on my firebug {"reportTreeType":null,"leaf":null,"qtip":null,"href":null,"hidden":null,"reportType":"Root Report","dirName":null,"reportUrl":null}] is it my json data correct ? because i have null values ? please let me know if any made mistaken ?

Posting Permissions

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