I'm using ExtJs 5.1.1 and I've written a simple view with a grid, and selecting one row the corresponding model property are editable in some text fields.
When editing is completed the button 'save' call Model.save() method, which use the rest proxy configured to write the changes on the server.
The call made by the proxy are two, first is OPTIONS call to know which method are allowed, second call is a PUT.
My problem is PUT json contains only the changed attributes.
I would like that my application sends all the attributes in PUT, instead only the changed subset.
Is this a proxy configuration, or should I use another kind of proxy, like ajax?
Some code snippet:
Model:
Ext.define('myApp.model.CvModel', {
extend: 'Ext.data.Model',
alias: 'viewmodel.cv',
idProperty : 'code',
proxy: {
type: 'rest',
url: 'http://localhost:8080/CV/resource/rest/cvs/CodeSystem/Domain',
paramsAsJson: true,
reader: {
type: 'json',
rootProperty: 'Test_data'
}
},
fields: [{
...
Controller:
onSave: function () {
var selCv = this.getViewModel().get('selectedCv');
selCv.save();
....
You need to specify a writer config on your proxy with writeAllFields: true. By default it's false, and the default writer itself is just {type: 'json'}.
Related
I've a huge tree view to bind, So need to render all the parents , then when expand render the children. How to load child node on expand kendo treeview ?
I had taken a look at the below thread, but not sure where is the reference of the "Node" and "HasNodes" comes from in his last post saying Problem solved.
Appreciate the help.
How to load child node on expand kendo treeview
I have been playing around with this myself over the past few days...
first of all you need to define a method that allows you to pass a node Id (the one you are expanding) or null if getting the root nodes and returns a list of node objects.
When configuring your treeview, ensure that you are not setting your model to use the 'children' field - this prevents any ondemand loading for some reason and set the loadOnDemand to true (this is by default anyway).
Once you have set that up you need to configure the transport.read.data to get the id of the node and pass that through to your method call.
In my examples I have defined my tree model as an object with an ItemId, ItemName, HasChildItems and ParentTreeId properties.
Setting HasChildItems to true ensures the expand capability is available for the node.
Examples:-
Demo Configuration
// the Datasource
var demoDataSource= new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: urlforyouraction_dataretrieval,
cache: false,
type: 'POST',
dataType: "json",
traditional: true,
data: function (e) {
return {
// e is the node passed in, this is null on initial read
ParentTreeId: !e.id ? null : e.id
}
}
}
},
schema: {
model: {
id: "ItemId",
Name: "ItemName",
hasChildren: "HasChildItems",
parentTreeId: "ParentTreeId"
}
}
});
// the treeview
var demoTree = $("#treeview-left").kendoTreeView({
loadOnDemand: true,
dataSource: demoDataSource,
dataTextField: "ItemName"
}).data("kendoTreeView");
I am playing with the ExtJs4 cartracker application written by existdisolve. I was able to change his queries from rest requests to ajax requests. I also modified the api calls to use ajax to make ajax requests for updates.
I am not getting form or url data passed to my cfc. Instead, in firebug I see JSON passed. I am confused if it is not passed in the form or the url, how is this passed and how do I get to the data? I have tried deserialized the form and url and dumping these after the deserialize and I am told that it is not json.
Where would I find the json?
I am not allowed to post a picture. But it looks like this in the xhr window:
JSON
Active true
ColorID null
Shortname red
Longname Blood Red
So if it is being passed why can I not get to it?
Edit:
#existdissolve - I replaced the rest.js with ajax.js which looks like this:
/**
* Abstract REST proxy
*/
Ext.define('CarTracker6.proxy.Ajax', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.baseajax',
/*format: 'json',*/
limitParam: 'max',
startParam: 'offset',
sortParam: 'sortorder',
writer : {
type : 'ajax',
encode : false,
writeAllFields : true,
root : 'data',
allowSingle : true,
batch : false,
method: 'post',
params: { record: 'record' },
writeRecords : function(request, data) {
request.jsonData = data;
return request;
}
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
},
api: {
read: 'api/option/colors.cfc?method=getcolors',
create: 'api/option/colors.cfc?method=addcolors',
update: 'api/option/colors.cfc?method=updatecolors',
destroy: 'api/option/colors.cfc?method=deletecolors'
}
});
My read works perfectly and I can call the correct cfcs for colors, statuses, etc. and retrieve the requisite data. I am looking to pass parameters to the CFCs and that is not working.
see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.writer.Json-cfg-encode:
if the encode property of your writer is set to false, all data is sent as raw post body. Instead, you can use
encode: true,
root: 'data', // must be set if encode is true
i'm using solr+haystack(django plugin) on the backend and the search is working fine;
While Django(and Haystack) with its templates is doing everything for me(I mean its pretty simple to configure and use), ExtJS4 is a little more complex;
The question is how to use Solr using ExtJS4?
An example is very much appreciated;
Thanks for any help and sorry for my English;
As ExtJS4 is a MVC framework, the solution is done like MVC;
The controller/Search.js
Ext.define('yourapp.controller.Search',{
extend:'Ext.app.Controller',
stores:[
'Searches'
],
views:[
'search.Search',
'search.SearchList'
],
models:[
'Search'
],
init:function(){
this.control({
"search":{
'keyup':this.search,
},
});
},
search:function(inputedTxt, e, eOpts){
this.getSearchesStore().load({
//When sending a request, q will rely to request.POST['q'] on server-side;
//inputedTxt.getValue() -- a value, entered in textfield (or whatever)
params:{
q:inputedTxt.getValue()
},
callback:function(result){
if(result[0]){
//do something with the result
//i'd been creating a window with a grid inside. "Grid"'s view is written below.
}
}
}
});
The models/Search.js
Ext.define('yourapp.model.Search',{
extend:'Ext.data.Model',
fields:[
{name:'name', type:'string'}
]
});
The store/Searches.js
Ext.define('yourapp.store.Searches',{
extend:'Ext.data.Store',
storeId: "searchStore",
model:'yourapp.model.Search',
autoLoad: false,
proxy:{
type:'ajax',
// server-side url
url: '/searchlist/',
actionMethods:{create: "POST", read: "POST", update: "POST", destroy: "POST"},
reader:{
type:'json',
root:'searches'
}
}
});
The view/search/Search.js
//a Text field to input text;
Ext.define('yourapp.view.search.Search',{
extend:'Ext.form.field.Text',
alias: 'widget.search',
id: "searchView",
enableKeyEvents: true,
initComponent:function(){
this.callParent(arguments);
}
});
The view/search/SearchList.js
//a view for a result
Ext.define('yourapp.view.search.SearchList',{
extend: 'Ext.grid.Panel',
alias:'widget.searchlist',
title: 'search result',
store: 'Searches',
columns:[
{
header:'Name',
dataIndex:'name',
flex:1
}
]
});
Somewhere in the view/Viewport.js xtype: 'search', should be inserted for a text field to be displayed.
That's all for a ExtJS4 part.
On server-side -- Django:
'haystack' and Solr should be installed and configured (by 'configured' i mean: search should already work on the server-side);
In someapp/view.py
def searchlist(request):
from haystack.query import SearchQuerySet
# POST["q"] should be receivedt from our client-side
searchText = request.POST["q"]
sqs = SearchQuerySet().filter(name=searchText)
data = []
for result in sqs:
data.append({"name": result.object.name})
return HttpResponse('{ success:true, searches:'+simplejson.dumps(data)+'}', mimetype = 'application/json')
Finally in your urls.py you should add:
(r'^searchlist/','someapp.views.searchlist'),
That was for it. Best wishes.
P.S.
I know this is not the greatest answer and there's lack of explanation, but as for me, I rather prefer a code example than verbal explanation.
SOLR has JSON output from its queries using wt=json param and can readily be consumed by ExtJS.
http://wiki.apache.org/solr/SolJSON?action=fullsearch&context=180&value=jsonp&titlesearch=Titles#JSON_Response_Writer
if you need to use jsonp you can specify a callback function via this param json.wrf=callback
I try to display some data in my Sencha touch application, but it doesn't work... and i can't find what I'm doing wrong.
My webSiste return a json object who look like this
[{"name":"a","id":1}]
the script is getting the Json and display it:
Ext.regApplication({ name: 'Command',
phoneStartupScreen: 'phone-startup.png',
phoneIcon: 'apple-touch-icon.png',
launch: function(){
this.viewport = new Ext.Panel(
{
layout: 'fit',
fullscreen: true,
items: [{xtype: 'list',
itemTpl: new Ext.XTemplate('<div>{name}</div>'),
store: stores
}],
dockedItems: [{xtype: "toolbar",
dock: "top",
title: 'MovieCommand',
items: [{ui: 'back',text: 'back',handler: function(){}}]
}]
});
}
});
Ext.regModel('Commands', {
fields: ['name', 'id' ]
});
var stores = new Ext.data.Store(
{model: 'Commands',
proxy: {type: 'scripttag',
url: 'http://localhost:8080/GTI710/commandes/liste.htm',
format: 'sencha',
reader: new Ext.data.JsonReader ({
type: 'json',
})
},
});
stores.load();
I don't have any error in the java script but nothing is displayed.
I just want to have the "a" displayed but it doesn't work, I don't know why...
The ScriptTagProxy, which you are using, requires a response from server that's composed of legitimate Javascript code.
Specifically, the code is a callback function with the desired JSON data you what as the its first argument:
someCallback([{"name":"a","id":1}]);
The name of someCallback is generated dynamically by Sencha Touch when the request is sent. In other words, your attempt to store the response with a static file will not work.
The name of someCallback is passed as a parameter in the GET request sent by Sencha Touch, the key of which defaults to callback.
If you don't want to have a web server as the data source, checkout Ext.util.JSONP.
Is there anyway to remotely override/replace a GridPanel's store?
I have a grid that has a dummy store as I get an error if I don't declare as store:
this.ds is undefined
When my form is submitted, it makes a GET REST call & loads a JSON store with the results. I want this store to be the store of my grid and show it underneath the formPanel.
I can get it to show & return JSON but can't seem to replace the store.
I tried using
searchGrid.store = formStore //the JSONStore returned from form submit
EDIT
This if the data store:
var formStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '...',
method: 'GET'
}),
root: 'Report',
fields:[
....]
});
This is the loading / changing of the store:
var data = this.getForm().getValues();
formStore.load({
params: {
fields: Ext.encode(data)
}
});
var grid = Ext.getCmp('search');
Ext.apply(grid, {store: formStore});
grid.show();
Try this
myGridPanel.getStore().proxy.setApi({read: url});
myGridPanel.getStore().load();
I'm using this solution when I want to read data from another url
grid.reconfigure(store, colModel);
Works fine for me. Is the formStore.data compatible with Grid's columns configuration? You don't need to specify the column model in the reconfigure call if it didn't change.
Show a slice of your formStore.data and grid configuration.
Have you tried Ext.apply()?
From the api:
apply( Object object, Object config, Object defaults ) : Object
EDIT:
Here's how you use it:
Ext.apply(myGrid, { store : mystore }); //no need for the third parameter, but if you do want a default, then you can use one
Should the root is inside reader? Like this
var formStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '...',
method: 'GET'
}),
reader: {
type: 'json',
root: 'Report'
},
fields:[
....]
});
I managed to solve this by moving the jsonStore to the grid itself and make it a singleton. Then reference to it from the form using StoreMgr