I have the following code -
var options = new Ext.data.JsonStore({
model: 'options_model',
data: [
{ id: 1, option1: 'Alope', status1: 'true',option2: 'Option2', status2: 'false',option3: 'Option3', status: 'false',option4: 'Option4', status4: 'false' }
]
});
Now how can I retrieve data of option ???
I suggest you put your data into maybe a filename.json file (this is to maintain the scalability and integrity of your code).
Anyway, wherever it is you store your data, this is the code you need:
Ext.Ajax.request({
url: 'path_to_ur_json_file_wrt_html_file/filename.json', //in my case it was data/xyz.json since my folder layout was : abc.html, app, data, lib, stylesheets; and my data.json was in the data folder :)
timeout:3000, //how long it shud try to retrieve data in ms
method:'GET',
success: function(xhr) {
jsonData = Ext.util.JSON.decode(xhr.responseText);
var data4u = jsonData.data[0].option1;
}
});
First, JsonStore is not really a class to use. It's internal to Sencha and may be removed at any time. You should use Ext.data.Store instead.
Second, many of the out-of-the-box components in Sencha receive a store as confguration options so you don't have to worry about the inner workings.
Finally, if you do need to access store's data, you can do so by using each, getAt or find methods, depending on your needs and the way you want to access your data (random access, sequential or search).
I suggest you to go over this documentation:Sencha 1.1 Documentation
Related
I am currently using SAPUI5/OpenUI5 to consume and modify OData Services.
I want to create a new product entry over an HTTP POST Request and have problems to properly config the associations to a category. For developing reasons I am using a reference OData Service with this metadata. The Product already has the NavigationProperty to the right Category EntrySet.
<NavigationProperty Name="Category" Relationship="ODataDemo.Product_Category_Category_Products" FromRole="Product_Category" ToRole="Category_Products"/>
I am using the following JavaScript code in my controller:
var oCategory = oModel.getData("/Categories(0)");
var oEntry = {};
oEntry.ID = "10";
oEntry.Name = "Beer";
oEntry.Category = oCategory;
oModel.create("/Products", oEntry, {
method: "POST",
success: function(data) {...},
error: function(response) {...}
});
The product is successfully created /Products(10) but the relation to the existing category /Products(10)/Category is not working properly. Instead a new category with the same ID and information is created (is this meant with 'deep insert'?) but I want to use the elected category (of course).
Do I have to reference the category differently or can I create the associations manually somehow? Shouldn't the OData Service check if the category ID already exists and then use the existing entry?
Is there any best practices for such cases?
It's important to note that you are using an OData V2 service. Yes, by building the request the way you are doing it, you are actually doing a deep insert.
If you think about it, it makes sense, because you would not need to send the whole category information to just link the new product to the exiting category. What if you would change something in the category data? Should a deep insert result in an update?
In any case, OData v2 has something called "links" (see the OData terminology - www.odata.org). Basically each "association" between entities is represented through such a link. You can manage these links separately from the entity (e.g. you can remove and create links between existing entities; without having to change the entity itself - see the OData v2 operations, chapters 2.9 to 2.12).
Depending on the data format that you are using (by default, JSON if you are using sap.ui.model.odata.v2.ODataModel), you can create entity links in the same time when creating new entities. Check out this answer: https://stackoverflow.com/a/4695387/7612556.
In a nutshell, you would have to write something along the lines of:
oModel.create("/Products", {
ID: "10",
Name: "Beer",
Category: {__metadata: {uri: "/Categories(0)"}}
}, {
method: "POST",
success: function(data) {...},
error: function(response) {...}
});
I have some client-side JSON and want to use to "quickly" experiment with various controls without writing all the REST API calls. All I want to do is point any given Kendo DataSource to the local array of data I already have instead of writing all the extra's...but nothing I do works.
I have tried various online examples...can someone direct me to something that actually works?
EXAMPLE:
This particular example is for their Donut Chart using Angular, but I cant use their data calls because of CORS & I am getting tired of writing a new set of REST calls every time I merely want to experiment with a particular control.
var data = [{ ... }, { ... }]
$scope.screenResolution = new kendo.data.DataSource({
// I dont want this at the moment
//transport: {
// read: {
// url: "http://demos.telerik.com/kendo-ui/content/dataviz/js/screen_resolution.json",
// dataType: "json"
// }
//},
sort: {
field: "order",
dir: "asc"
},
group: {
field: "year"
}
});
Datasource has a data property that you can set to a local array.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-data
In my Extjs project I have a model with a rest proxy defined:
Ext.define('Registration.model.Session', {
extend: 'Ext.data.Model',
fields: [
...
],
proxy:{
type: 'rest',
url: '/sessions',
reader: {
type: 'json',
rootProperty: 'records'
}
}
});
When I create a store that uses this model and try to do a GET request for a particular record id, the id is not being appended to the url for some reason:
I was reading back through the rest proxy's docs and it seems like this is all I needed to do to make a get call for a particular record.
I've not specified the appendId config in the proxy so it should be set to the default value of true.
Is there a config I'm missing on the proxy to append the id?
Nevermind. That was a goof on my part. I was calling the load method on the store and the proxy I defined is on the model.
I pulled out the model and fired it's load method with the record ID and it worked:
I should point out that I don't think this is the best way of getting this record.
So if anyone has a better suggestion I'm all ears ;)
you can also define proxies on models. I didnt realize it at first, but my team uses sencha architect and I noticed that there were the settings to connect it all up there under the model too so I tried it one day and it worked.
After I saw it in Sencha Architect, I also went back to the APIs on the site and sure enough its there too.
Did you defined idProperty: 'Id' in your model. If not try this.
I'm trying to create a note taking web app that will simply store notes client side using HTML5 local storage. I think JSON is the way to do it but unsure how to go about it.
I have a simple form set up with a Title and textarea. Is there a way I can submit the form and store the details entered with several "notes" then list them back?
I'm new to Javascript and JSON so any help would be appreciated.
there are many ways to use json.
1> u can create a funciton on HTML page and call ajax & post data.
here you have to use $("#txtboxid").val(). get value and post it.
2> use knock out js to bind two way.and call ajax.
here is simple code to call web app. using ajax call.
var params = { "clientID": $("#txtboxid") };
$.ajax({
type: "POST",
url: "http:localhost/Services/LogisticsAppSuite.svc/Json/GetAllLevelSubClients",
contentType: 'application/json',
data: JSON.stringify(params),
dataType: 'json',
async: false,
cache: false,
success: function (response) {
},
error: function (ErrorResponse) {
}
I have written a lib that works just like entity framework. I WILL put it here later, you can follow me there or contact me to get the source code now. Then you can write js code like:
var DemoDbContext = function(){ // define your db
nova.data.DbContext.call(this);
this.notes=new nova.data.Repository(...); // define your table
}
//todo: make DemoDbContext implement nova.data.DbContext
var Notes = function(){
this.id=0; this.name="";
}
//todo: make Note implement nova.data.Entity
How to query data?
var notes = new DemoDbContext().notes.toArray(function(data){});
How to add a note to db?
var db = new DemoDbContext();
db.notes.add(new Note(...));
db.saveChanges(callback);
Depending on the complexity of the information you want to store you may not need JSON.
You can use the setItem() method of localStorage in HTML5 to save a key/value pair on the client-side. You can only store string values with this method but if your notes don't have too complicated a structure, this would probably be the easiest way. Assuming this was some HTML you were using:
<input type="text" id="title"></input>
<textarea id="notes"></textarea>
You could use this simple Javascript code to store the information:
// on trigger (e.g. clicking a save button, or pressing a key)
localStorage.setItem('title', document.getElementById('title').value);
localStorage.setItem('textarea', document.getElementById('notes').value);
You would use localStorage.getItem() to retrieve the values.
Here is a simple JSFiddle I created to show you how the methods work (though not using the exact same code as above; this one relies on a keyup event).
The only reason you might want to use JSON, that I can see, is if you needed a structure with depth to your notes. For example you might want to attach notes with information like the date they were written and put them in a structure like this:
{
'title': {
'text':
'date':
}
'notes': {
'text':
'date':
}
}
That would be JSON. But bear in mind that the localStorage.setItem() method only accepts string values, you would need to turn the object into a string to do that and then convert it back when retrieving it with localStorage.getItem(). The methods JSON.stringify will do the object-to-string transformation and JSON.parse will do the reverse. But as I say this conversion means extra code and is only really worth it if your notes need to be that complicated.
I have an ExtJS based application. When editing an object, an ExtJS window appears with a number of tabs. Three of these tabs have Ext GridPanels, each showing a different type of data. Currently each GridPanel has it's own JsonStore, meaning four total AJAX requests to the server -- one for the javascript to create the window, and one for each of the JsonStores. Is there any way all three JsonStores could read from one AJAX call? I can easily combine all the JSON data, each one currently has a different root property.
Edit: This is Ext 2.2, not Ext 3.
The javascript object created from the JSON response is available in yourStore.reader.jsonData when the store's load event is fired. For example:
yourStore.on('load', function(firstStore) {
var data = firstStore.reader.jsonData;
otherStore.loadData(data);
thirdStore.loadData(data);
}
EDIT:
To clarify, each store would need a separate root property (which you are already doing) so they'd each get the data intended.
{
"firstRoot": [...],
"secondRoot": [...],
"thirdRoot": [...]
}
You could get the JSON directly with an AjaxRequest, and then pass it to the loadData() method of each JSONStore.
You may be able to do this using Ext.Direct, where you can make multiple requests during a single connection.
Maybe HTTP caching can help you out. Combine your json data, make sure your JsonStores are using GET, and watch Firebug to be sure the 2nd and 3rd requests are not going to the server. You may need to set a far-future expires header in that json response, which may be no good if you expect that data to change often.
Another fantastic way is to use Ext.Data.Connection() as shown below :
var conn = new Ext.data.Connection();
conn.request({
url: '/myserver/allInOneAjaxCall',
method: 'POST',
params: {
// if you wish too
},
success: function(responseObj) {
var json = Ext.decode(responseObj.responseText);
yourStore1.loadData(json.dataForStore1);
yourStore2.loadData(json.dataForStore2);
},
failure: function(responseObj) {
var message = Ext.decode(responseObj.responseText).message;
alert(message);
}
});
It worked for me.