Passing Javascript object to a view from the Controller

[NMFord]

Hey guys,

I'm trying to pass this Javascript object to my view for displaying information but I can't seem to find a way to access it. In the code below you see I get the object from an ajax request to one of my PHP scripts. Can someone give me some pointers? Thanks!

You can see the line of code I used to try pass it to the view, but in the view I just can't seem to get it working...


Code snippet from my controller:

'search': function (options) {

var panel = BioGene.views.mainView;

panel.setLoading(true, true);

Ext.Ajax.request({
url: 'codeigniter/index.php/search/go/'+options.query,
success: function(response, opts) {
panel.setLoading(false);
var jsonData = Ext.util.JSON.decode(response.responseText);
console.log(jsonData);
if(jsonData.count > 1) {
BioGene.views.searchListView.jsonData = jsonData;
BioGene.views.mainView.setActiveItem(
BioGene.views.searchListView,
{ type: 'slide', direction: 'left' }
);
}
else if((jsonData.count == 1) && (jsonData.return_code = "SUCCESS")) {
alert("One result");
}
else if(jsonData.return_code != "SUCCESS") {
alert("No Results");
}
}
});

},

Code snippet for the view it is being sent to:

BioGene.views.SearchListView = Ext.extend(Ext.Panel, {
layout: 'fit',
type: 'vbox',
align: 'center',
pack: 'center',
scroll: 'vertical',
initComponent: function () {

this.backButton = new Ext.Button({
text: 'Search',
ui: 'normal',
handler: this.onCloseTap,
scope: this
});

this.topToolbar = new Ext.Toolbar({
title: 'Genes',
items: [
//{ xtype: 'spacer' },
this.backButton
]
});

this.dockedItems = [this.topToolbar];

BioGene.views.SearchListView.superclass.initComponent.call(this);
},

onCloseTap: function () {
Ext.dispatch({
controller: BioGene.controllers.bioGeneController,
action: 'index',
slideDirection: 'right'
});
}

});

[mitchellsimoens]

How do you want to display the object? Do you just want to have a template and apply the object to it?

[NMFord]

How do you want to display the object? Do you just want to have a template and apply the object to it?

Well I do want to have a template that I want to apply the object to (since within the object there is an array of arrays I want to make a list out of), but before I do that I just want to simply figure out how to access the object so I can go one step at a time (still learning!). To start with I was just trying to simply pass the variable to the view and print some data out from it.

If you're curious, here's an example of an object returned from my codeigniter scripts that I want to pass. You can see the count variable I'm using to route the view near the top. (http://finite-element.com/example.json)

[mitchellsimoens]

If you assign your template to the tpl property on your view, then you can execute the update method on the view and pass in the object and it should then apply the data to the template and insert that HTML into the view.

[NMFord]

If you assign your template to the tpl property on your view, then you can execute the update method on the view and pass in the object and it should then apply the data to the template and insert that HTML into the view.

Just to help me with my understanding of how the framework works, how would I go about simply passing the object so that I can print out information from it in the html: property of the view (just so I can test and play about)

Thanks for all the help!

[NMFord]

Still banging my head against this, it seems like it should be a simple problem so it's getting quite frustrating that I can't figure it out! Does anyone have any pointers for simply accessing the object in the view? Not using templates etc..

[findajit]

@nmform

1. Add a method, say, loadDataInView(jsonData) to your view class
2. In the success callback of the Ajax call, call loadDataInView on the instance of the SearchListView and pass the json data, that you have received from the server
3. In the body of the loadDataInView method, define a template and apply the data to it, as shown below

Var tpl = new Ext.XTemplate('<p>{name}</p>');
tpl.overwrite(this.body, jsonData);

Where name is a filed in the json data passed to the method

Hope this helps! Let me know if you have any specific question!

[NMFord]

@nmform

Perfect! This was extremely helpful, thank you very much.

I bought your book this morning for Kindle by the way! It's great.

[findajit]

Thanks! And, I hope it would be helpful to you!