Load local JSON into Grid and Dialog

[ruprict]

HOla,

So, I am apologizing now, b/c I know this answer is here somewhere. However, I just can find it. I have spent over a day in the forums and help, but still can get this going.

I have a local string of JSON data that I want to load in a grid and then open a dialog with the grid inside.

Here's the JSON


"{"AddressMatches":[{"MatchCode":"R4100","MatchScore":72,"SourceOfMatch":"TAStreets","City":"CHARLOTTE","Id":"1","Point":{"X":35.227529,"Y":-80.842865,"ExtensionData":{}},"State":"NC","StreetAddress":"123 N TRYON ST","Zip":"28202","ExtensionData":{}},{"MatchCode":"R4100","MatchScore":72,"SourceOfMatch":"TAStreets","City":"CHARLOTTE","Id":"2","Point":{"X":35.227529,"Y":-80.842865,"ExtensionData":{}},"State":"NC","StreetAddress":"123 S TRYON ST","Zip":"28202","ExtensionData":{}}],"MatchType":2,"ExtensionData":{}}"


Here's the JS (the JSON is in req.responseText)


var selModel = new Ext.grid.RowSelectionModel({singleSelect:true});
var colModel = new Ext.grid.ColumnModel(
[
{header: "StreetAddress", width: 150, sortable: true},
{header: "City", width: 75, sortable: true},
{header: "State", width: 20, sortable: true},
{header: "Zip", width: 30, sortable: true},

// create reader that reads the Topic records

var ds = new Ext.data.JsonStore( {
fields: ['StreetAddress','City','State','Zip']
});
ds.loadData(req.responseText);
grid = new Ext.grid.Grid("multipleAddressGrid",
{
ds:ds,
cm:colModel,
selModel:selModel});
grid.addListener("rowclick",doSelectAddress);
dialog = new Ext.LayoutDialog("diaMultipleAddresses", {
autoCreate:true,
modal:true,
width:300,
height:300,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true,
panels: [new Ext.GridPanel(grid)]
}
});
dialog.addKeyListener(27, dialog.hide, dialog);

// create the grid

grid.render();
dialog.show(dialog.dom);


And the HTML


<div id="dlgMultipleAddresses" style="visibility:hidden;position:absolute">
<div class="x-dlg-hd">Title</div>
<div class="x-dlg-bd">
<div id="multipleAddressGrid" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;position:relative;left:0;top:0;"></div>
</div>
</div>
</div>


I get an empty dialog. I am pretty new with the Ext stuff, but this should be easier than I am making it, right?

Thanks for the help and, again, sorry for my newbeeness.

Glenn

[para]

The JsonStore.loadData requires an input of an array of objects. What you are inputting is an actual Json string.

Try this:



eval("var dsData=" + req.responseText);
ds.loadData(dsData.AddressMatches);


or reformat your response to be only the AddressMatches part


//(maybe...)
// where req.responseText = "[{"MatchCode":"R4100","MatchScore":72,"SourceOfMatch":"TAStreets","City":"CHARLOTTE","Id":"1","Point":{"X":35.227529,"Y":-80.842865,"ExtensionData":{}},"State":"NC","StreetAddress":"123 N TRYON ST","Zip":"28202","ExtensionData":{}},{"MatchCode":"R4100","MatchScore":72,"SourceOfMatch":"TAStreets","City":"CHARLOTTE","Id":"2","Point":{"X":35.227529,"Y":-80.842865,"ExtensionData":{}},"State":"NC","StreetAddress":"123 S TRYON ST","Zip":"28202","ExtensionData":{}}]"
ds.loadData( eval(req.responseText) );


Hope this helps

[ruprict]

Mate, you're a star. That did it.

As far as the dialog goes, I had several problems:

1) I was using a different id in the js and html for my container. That makes me feel SMART.
2) I think my HTML was off.

Now, I can get the reader correct (verified in FireBug) but the grid only shows up with a header , but the same number of rows as there are data.

Any idea why?

[jay@moduscreate.com]

Please post these questions in the help section :)

[ruprict]

I don't follow....did I post improperly or something? This is the Help section, is it not?

[para]

First, you're using firebug (and at least know somewhat of how to use it). That makes EVERYTHING easier. (and makes me happy).

Now, on to the answer.
When you specify a cm, you have to set up the columns correctly. You have to let it know where to look for the data to display in that column.

Try this:


var colModel = new Ext.grid.ColumnModel(
[
{header: "StreetAddress", width: 150, sortable: true, dataIndex: 'StreetAddress'},
{header: "City", width: 75, sortable: true, dataIndex: 'City'},
{header: "State", width: 20, sortable: true, dataIndex: 'State'},
{header: "Zip", width: 30, sortable: true, dataIndex: 'Zip'}
]); // you were missing the closing ]); in your post... i don't know if it's a copy/paste error or just a coding error.

[para]

I found it in the Help section.... Must be a mistake on his part. Oh well.

[ruprict]

That was it.....dataIndex....I tried numbers for it at one point....

Great help, mate. Thanks!

[jay@moduscreate.com]

I don't follow....did I post improperly or something? This is the Help section, is it not?

ruprict,

my apologies. I - for some reason - thought i was viewing the examples section. Again, i do apologize.