I've recently taken a dive into ExtJS by inheriting a web app written in 3.4. I've managed to create a store attached to a grid with no problem and have been able to bring up a PanelForm with data loaded from a call to a php page.
I have another json store defined which doesn't get populated when I call its load procedure and I'm wondering what I am missing.
The definition of the store is below:
var ImgStore = new Ext.data.JsonStore({
totalProperty: 'total'
,root: 'data'
,url : 'json/getProductImage/'
,fields : [{
name : 'img'
},{
name : 'extn'
}]
});
My code to load the data is:
ImgStore.load({callback: function() {}
,params: {'ProductGUID': x}
});
The code behind the URL is fine and the response in Firebug below:
{"success":true,"data":{"img":"iVBORw0KG...ggg==","extn":"png"}}
What I cannot understand is why the response comes back but the Store does not populate. I must be missing something; I just can't see what...
Does the Store have to be bound to another object? What I wanted to do was to read back the base64 encoded string and then show the image on screen (on either a panel, FormPanel or Container; not really sure of the best method really)
Any advice is greatly received.
Your store needs a model. The model needs to reflect the attributes that are then being returned in your JSON feed. Only then will the data show up in your store.
Everything looks fine, except for the url config aren't u missing the name of the file ? 'json/getProductImage/myfile.json'?
How are you validating store is not loaded by binding it to a grid? Because if so, store could be loading but not configuring grid properly might make u think store is not loaded, try console.log(store.getTotalCount())
Related
I created my Model using a JSON file.
var oModel = new sap.ui.model.json.JSONModel( jsonFileUrl ); //JSON from file
It worked and the element was populated as I wanted.
But after this, when I tried to use oModel.getJSON() to get the JSON data it didn't work.
If I use an variable with the same content as the file, it works!
You can check the full test that I created:
https://googledrive.com/host/0B2gJUv6a_V1dYnNSV0ZsTFhxazg/index.html
Is there anybody to help me to understand what on Earth is happening here?
It's because at the time you try to emit the JSON here:
$("#jsonFile").append(oModelFile.getJSON());
the actual ajax request to retrieve the file hasn't completed, and so the JSON model isn't filled at that time.
Wrap this in a handler for the requestCompleted event like this and it will work:
oModelFile.attachRequestCompleted(function() {
$("#jsonFile").append(oModelFile.getJSON());
});
I am getting the data from server in JSON and I am converting that to my viewModal. Now I am loading the a new view using return router.navigate('results'). But at the same time I want to pass the viewModel which I created from the JSON object to be passed to this view. By default the "results" viewModel is getting called but it is having blank values.
A small code snippet will be helpful as I am new to Durandal JS.
The best answer I have is to store that information in a separate module, like so:
storage.js
define(function(require) { return []; });
viewmodel.js
define(['storage'], function(storage) {
$.get('uri', function(data) {
data.forEach(function(obj) {
storage.push(obj);
});
});
});
This is not the most elegant solution. I'm really interested if there is a clean way to pass data from and to separate view models on activation, but so far I have found none.
Ended up finally something like this.
In the module where I want to navigate, I created an "Initialize" function which accepts a JSON object. Using this JSON object I initialized all properties in the viewModel.
From the page from where I have to navigate there I did a "require" on the module where I want to navigate next. Then I called the "Initialize" method and passed my JSON object.
After this I used router.navigate method to go that module.
This way when I navigated, I got all the values which I wanted to pass from one view to other. Hope this approach will help someone else.
The answer from Matthew is certainly similar to the way that I currently do it, once the data is held within your separate module (i have a path called modules/data/someDataStorage) you can use either events or a knockout observable to make the data update through to your view models.
In your case I would make updates to your shared module to store information on your request and then on the activation of your results module, go and get the data from that shared module.
I am fairly new to JSON and I want to create a choropleth example as so. http://gabrielflor.it/a-half-decade-of-rising-poverty Whenever the years are clicked it just goes to a different portion of the JSON (I'm assuming). Is this how functionality like this is usually done to avoid redrawing the whole map again and calling another JSON.js file? If so these .JSON files can get quite large?
Using a JSON is only a way to store values you need for each year. When you switch to another year the JS parse the JSON for the giving year and update the choropleth. For the example you have provided, here is the JSON used:
http://gabrielflor.it/static/data/saipe.json
This is a good way since you only have one JSON with every year you need and you load it only once. However since d3 needs datas this way I think you should add another JSON if you want to provide additional data like in gabrielflor example:
http://gabrielflor.it/static/js/d3.poverty-by-county.js?v=121107
He loads JSON like this with d3:
d3.json('../static/data/states.json', function (json) {
states = json;
});
or
d3.json('../static/data/saipehighlights.json', function (json) {
saipehighlights = json;
});
If you look at the network traffic for the example page you gave (ex. by using Chrome Developer Tools).
The file with the poverty data is quite large, but the mapping data file is even larger. You'll notice, that it takes longer for the website to load, but afterwords it runs very smoothly in the client without making any server calls.
The site is just about browsing information and nice design - for that purpose I think a longer load time is quite acceptable if the user experience after is smoother(i.e. user doesn't have to wait for year data to load).
I'm writting an application in Sencha-Touch 1.1 and I want to add localization to strings.
I've thought (but not implemented) of two ways.
Create seperate JSON files for each language (en-US.json, el-GR.json
etc) and use a proxy and a store to load the data, changing each
time the proxy url (json file destination). The problem is that I don't know how to extract the data from the store afterwards.
Create a global JSON object which then I inflate (parse the json file
and turn it into an object). The problem here is that I cannot seem to find a way to parse a JSON file without using a reader/proxy combo.
Is there any optimal solution for localizing strings in sencha-touch?
A common approach is to extract all of your strings into class level properties and have separate locale files which override these classes and their string properties.
For example, if I had a panel like this:
MyApp.MyPanel = Ext.extend(Ext.Panel, {
myPanelContent: 'This is your text to be translated...',
initComponent: function(){
Ext.apply(this, {
html: this.myPanelContent
});
MyApp.MyPanel.superclass.initComponent.call(this)
}
});
And then you would have a locale file along the lines of:
Ext.override(MyApp.MyPanel, {
myPanelContent: 'This is a translation of my text to another language'
});
You can then either load the correct locale file when your app is loaded (after the views themselves have been loaded) or dynamically load the locale files during runtime (this would require logic to update each of the views with the current value).
Hope this makes sense, give me a shout if it doesn't!
Stuart
I'm trying to use the jquery-ui autocomplete and I'm having trouble fully understanding how to hook it up.
In an effort to see functionality, we exported a list of user names in the json format of
["Abbott, Bob",
"Adams, Jo", etc...
and it's over 8k lines. I saved this into a file called names.json. When I set up my autocomplete, I used the following:
$("#userName").autocomplete({
source: "names.json"
});
Based on the jqueryi-ui autocomplete page. It says this:
When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data.
It returns all 8k+ names instead of filtering it based on what I'm typing. I tried changing it to:
$("#userName").autocomplete({
source: "names.json?term="
});
That didn't work to filter it either.
I've tried variations on the remote JSONP datasource example, but I can't seem to get it to work.
I've tried changing my json file to the format of:
[{"value":"Abbot, Bob"},
{"value":"Adams, Jo"}, etc...
That didn't filter.
I've tried taking out the quotes around value. That didn't return anything.
I've tried changing it to the format listed in the answer for this stackoverflow question returning item.value with my second json format but that didn't filter it either.
I'm not quite sure what I'm doing wrong and I hope to understand. Thank you.
Your datasource needs to by dynamic.
jquery ui autocomplete is going to send a request to the URL you have specified with ?term=WHATEVER_THE_USER_TYPED appended. You need something on the server side that will process that request and return just the data for that term.
For instance,
$("#userName").autocomplete({
source: "names.php" // php as an example.
});
Will result in a request to:
/names.php?term=abcd
names.php would have to pull back the data that matches the search and return it.