I have a Store that need to load DataView,
I used Dummy Data until today and it work just fine,
I want to use a web page to load the data.
my store code is:
Ext.define("myApp.store.myStore", {
extend: "Ext.data.Store",
alias: "widget.myStore",
model: "myApp.model.myModel",
proxy: new Ext.data.HttpProxy({
type: 'ajax',
method: 'post',
url: 'URL'
}),
reader: new Ext.data.JsonReader(
{
type:'json',
rootProperty:'Results'
}),
autoLoad: true,
config: {
sorters: [{ property: 'MyProp', direction: 'ASC'}],
grouper: {
sortProperty: "MyOtherProp",
direction: "ASC",
groupFn: function (record) {
if (record && record.data.MyOtherProp) {
return record.data.MyProp;
} else {
return '';
}
}
}
}
});
In Firebug I can see that the result is 0 items (and the url have 2 items..)
What am I doing Wrong??
Thanks!
You may need to set the URL to a specific location.
Related
Below is the code where I try to load some records using JSon Reader in the store.
I am unable to see this on the Grid.
Can you please point me out what am I missing as I don't want to use proxy/url for JSon.
var itemsPerPage = 10;
Ext.Loader.setConfig({enabled: true});
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging'
]);
Ext.define('Assemble', {
extend: 'Ext.data.Model',
fields: [
{name: 'lot_no', type: "string"}
],
idProperty: 'lot_no'
});
Ext.onReady(function() {
Ext.QuickTips.init();
var jsonString = '{"result":[{"lot_no":"MT6261"},{"lot_no":"MT6262"},{"lot_no":"MT6263"}]}';
// create the data store
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
proxy:{
type: 'ajax',
reader: {
type: 'json',
root: 'result',
model: Assemble
}
}
});
store.loadData(Ext.decode(jsonString));
console.log(store);
var pagingToolbar = Ext.create('Ext.PagingToolbar',{
pageSize: itemsPerPage,
store: store,
displayInfo: true,
displayMsg: ' {0}-{1}，{2}',
emptyMsg: "empty."
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
disableSelection: true,
loadMask: true,
columns: [
{
text : 'LOT_NO',
flex : 1,
sortable : true,
dataIndex: 'lot_no'
}
],
bbar : pagingToolbar,
renderTo: 'grid',
viewConfig: {
stripeRows: true,
enableTextSelection: true
}
});
store.loadPage(1);
});
Proxy has to use with url. So, you can't use the proxy like that. I removed the proxy, put the model in store and you have to load objects into store, but in your case contained rootProperty('result', I only get the main objects or you can remove the 'result' from the jsonString). Then, it worked. Chck this fiddle:
https://fiddle.sencha.com/#fiddle/11or
var jsonString = '{"result":[{"lot_no":"MT6261"},{"lot_no":"MT6262"},{"lot_no":"MT6263"}]}';
// create the data store
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
model: 'Assemble'
});
store.loadData(Ext.decode(jsonString).result);
Why are you even using a reader? Your data is local so just decode the string and pass in what you want:
https://fiddle.sencha.com/#fiddle/11qc
Also, your data is local so no need for a paging toolbar. In Ext JS 5+ the grid will use the buffered renderer (if the grid has a defined size from height/width configs or from a parent layout) so loading all the data into the store will not affect performance (other than creating the records). The grid will only render what is viewable plus a few on either side.
So I am following the tutorial here: http://docs.sencha.com/extjs/4.2.1/#!/guide/application_architecture
I am running extjs4.2.1.
app/controller/Users.js
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
models: ['User'],
stores: ['Users'],
views: ['user.List','user.Edit'],
init: function() {
this.control({
'viewport > userlist': {
itemdblclick: this.editUser
},
'useredit button[action=save]': {
click: this.updateUser
}
});
},
editUser: function(grid, record) {
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
// synchronize the store after editing the record
this.getUsersStore().sync();
}
});
app/store/Users.js
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
reader: {
type:'json',
root:'users'
},
writer: {
type:'json',
},
api:{
read: 'data/users.json',
update: 'data/updateUsers.json'
}
}
});
However, updateUsers.json NEVER gets updated on a save (.sync()).
I have check the API documentation and searched google extensively. I have found people with the same issues but no answers.
A json files is just a text file, so no, it doesn't get updated, because there's nothing to process it. Imagine if a page could make a request to the server and change the contents. It would be a giant security hole.
You need PHP/C#/Java/whatever to actually do something with it.
I'm curious as to why you expected that it would update, are you new to web programming?
I'm trying to override the default parameter name for limitParam in proxy for the Store. I want to make a JSONP call to http://search.twitter.com/search.json?q=kathmandu&rpp=2 but instead of setting rpp directly I want to map it to limitParam and set it's value. But it's not setting through limitParam. The reason I'm doing is the parameter keys store sends (sort, dir, etc) do not match the parameters on the server side (which I've no control over). Thanks in advance.
Ext.require('Ext.grid.View');
Ext.require('Ext.util.Point');
Ext.application({
name: 'HelloExt',
launch: function() {
/*Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});*/
console.log('ok1');
Ext.define('Video', {
extend: 'Ext.data.Model',
fields: ['from_user', 'from_user_id']
});
var myStore2 = Ext.create('Ext.data.Store', {
model: 'Video',
storeId : 'restfulStore',
proxy: {
type: 'jsonp',
url : 'http://search.twitter.com/search.json?q=kathmandu',
reader: {
type: 'json',
//root: 'data.items'
root: 'results'
},
limitParam: 'rpp',
pageParam: 'page'
},
listeners: {
load: function(store, records) {
Ext.each(records, function(rec) {
console.log(rec.get('from_user'));
});
}
},
sorters: [{
property: 'from_user',
direction: 'DESC'
}, {
property: 'from_user_id',
direction: 'ASC'
}],
//autoLoad: true,
remoteSort: true
});
var p = myStore2.getProxy();
p.limitParam = 2;
myStore2.load();
console.log('loads anyway??? loaded the store ...');
Ext.create('Ext.grid.Panel', {
title: 'Restful Grid',
store: Ext.data.StoreManager.lookup('restfulStore'),
columns: [
{header: "From User", width: 200, sortable: true, dataIndex: 'from_user'},
{header: "From User ID", width: 200, sortable: true, dataIndex: 'from_user_id'}
],
height: 400,
width: 400,
renderTo: Ext.getBody()
});
console.log('store loaded!!');
}
});
Your proxy configuration is fine for what you want to do. The problem is in the way you load the store. You should not change limitParam which is really the config option for the name of the param. To affect the number of results, use the limit option of the load method, that you can also configure in the store with the pageSize option.
So, remove this:
var p = myStore2.getProxy();
p.limitParam = 2;
And instead, use the limit option when loading the store:
myStore2.load({
limit: 2
});
Alternatively, you can set this in the store config with the pageSize option:
Ext.create('Ext.data.Store', {
// ...
pageSize: 2
,autoLoad: true
});
You can mix both by setting a default with pageSize, and changing it at loading time with limit.
As a side note, the tweeter API doesn't seem to support sorting, so your sorters configuration won't have any effect on the returned results. You should switch remoteSort to false to have the returned results sorted on the client side according to your configuration.
This is the json response I am getting. I checked with JSONLINT and it says valid, but if you notice it's only giving me value without the heading of the column... the column name is "States".
{"myTable":["VA","CA","CO","OK","PA","TX"]}
Would it be possible to use this Json to load in my combobox
items: [{
xtype: 'combo',
id: 'iccombo',
scope: this,
store: this.store,
mode: 'remote',
minChars: 0,
fieldLabel: 'Short State',
displayField: 'States',
valueField: 'States',
typeAhead: true,
name: 'States',
labelWidth: 125,
anchor: '95%'
},
this is my store
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
id: 'OurData',
scope: this,
fields: [{ name: 'States' }],
proxy: {
type: 'ajax',
url: 'GetState/getS',
reader: {
type: 'json',
root: 'myTable'
idProperty: 'States'
}
}
});
Out of the box Ext has the Array Reader which is almost a match but a tweak is required for the data format you have. The Array Reader can be customized to take your data format and turn it into the format needed. This kind of customization is common for many services that cannot be modified at the server level and so we can easily adjust at the UI level thanks to the Ext JS data framework.
Here is a custom reader that you could use as well as an implementation based on your example and a quick loop that shows the data by record:
/**
* A customized reader to convert a list to an array for the
* ArrayReader to take
*/
Ext.define('Ext.ux.data.reader.JsonList', {
extend: 'Ext.data.reader.Array',
alias : 'reader.jsonlist',
root: 'myTable',
/**
* this is really the guts of the change
* convert an array of strings to an array of arrays of strings
*/
extractData: function (root) {
var data;
if (Ext.isArray(root) && !Ext.isArray(root[0])) {
root.forEach(function (val, idx, all) {
/* turn the value into an array */
all[idx] = [val];
})
}
data = root;
/* hand the array of arrays up to the ArrayReader */
return this.callParent([data]);
}
});
store = Ext.create('Ext.data.Store', {
autoLoad: true,
id: 'OurData',
scope: this,
fields: [{ name: 'State' }],
proxy: {
/* change this back to ajax to get server data */
type: 'memory',
url: 'GetState/getS',
reader: {
type: 'jsonlist'
}
},
/* temp data for simplified demo code */
data: {"myTable":["VA","CA","CO","OK","PA","TX"]}
});
/* just to demo that there are six records with State as the field name: */
store.each(function (rec, id, total) {
console.log(rec.get('State'))
});
The kendoUI grid uses HttpGet requests to update the data during an AJAX request. (http://www.kendoui.com/documentation/asp-net-mvc/helpers/grid/ajax-binding.aspx) The server returns a Json result, and, in order to get it to work, we need to use the following code:
return Json(Result, JsonRequestBehavior.AllowGet);
That does the job just fine, but it's a security vulnerability (that's why Microsoft makes us put the "AllowGet" in there).
The safe way to return the Json would be in an HttpPost, but the kendoui grid doesn't allow it.
I want to use the kendoui grid. Is there a way to use the HttpGet, return Json, and do it securely?
Thanks!
If you are using the MVC wrapper of the Kendo Grid this would not happen. There the grid is configured to make POST requests because of this ASP.NET MVC behavior. Make sure you have included kendo.aspnetmvc.min.js though. More info can be found in the docs.
The kendo datasource uses GET by default when using ajax, but it is possible to use POST by defining the transport settings to post.
Here is a shortened version of the code at a Telerik kendo CRUD example using post.
<script>
$(function () {
$("#grid").kendoGrid({
toolbar: ["create", "save", "cancel"],
dataSource: {
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true } }
}
}
},
transport: {
create: {
url: "Products.svc/Create",
contentType: "application/json; charset=utf-8",
type: "POST"
},
read: {
url: "Products.svc/Read",
contentType: "application/json; charset=utf-8",
type: "POST"
},
parameterMap: function(data, operation) {
if (operation != "read") {
return JSON.stringify({ products: data.models })
}
}
}
}
});
});
</script>