I have a grid with a store which is loaded when app is launched. I have a form also to which the grid is bound to. Initially, the grid shows all records. The search form allows user to filter records. The initial load and search URLs are different. When search is clicked, I dynamically change the URL configured on the store proxy to the filter URL, pass in the form values as extraParams, and load the store. I see the request is made and a response is returned. However, my grid records dont refresh.
//grid store inside initComponent
this.store = Ext.create("Ext.data.Store",{
fields:["rptid", "text", "value", "date_created", "created_by", "active],
autoLoad:true,
proxy:{
type:"ajax",
url:"./getRpts.html",
reader:{
type:"json",
root:"data"
}
}
});
//handler for search form button
this.getRPTGrid().getStore().getProxy().url = "./getFilteredReports.html";
this.getRPTGrid().getStore().getProxy().extraParams =
this.getSearchForm().getValues();
this.getRPTGrid().getStore().load();
thats it. I confirm the request is being made to load the store and confirm the response being received in debugger. The JSON response also contains the "data" root so thats not the issue and the fields dont change either. I have done this 10,000 times before but have never experienced this. Anyone have any ideas?
I even compared the Request and Response Headers from both requests and their exactly the same minus the url and params..
Try using reload to ensure your store data.
This code below check my data after add or update, so if i add record it's automatically reload my store and select the new record.
var store = this.getRPTGrid().getStore();
Ext.Ajax.request({
method: 'POST',
url: "./getFilteredReports.html",
params: {
data: this.getSearchForm().getValues()
},
success: function(response) {
store.reload({
callback: function() {
var newRecordIndex = store.findBy(
function(record, id) {
if (record.get(
'rptid'
) === values.rptid) {
return true;
}
return false;
});
getRPTGrid.getSelectionModel().select(
newRecordIndex);
}
});
}
});
and if you want to change proxy url to update your store try to update the proxy in your model instead in your store, like this below :
Ext.define('APP.model.m_gis', {
extend: 'Ext.data.Model',
alias: 'widget.gisModel',
proxy: {
type: 'jsonp',
url: './getRpts.html',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
},
fields: ["rptid", "text", "value", "date_created", "created_by",
"active"
]
});
This is the store look like :
Ext.define('APP.store.s_gis', {
extend: 'Ext.data.Store',
alias: 'widget.gisStore',
model: 'APP.model.m_gis'
});
and change your proxy like you want :
var place_store = Ext.create('APP.store.s_gis');
place_store.getProxy().setExtraParam('url', "./getFilteredReports.html");
Related
I have a problem here, first I create data tables after I select the user using select2, so the data is dynamic according to the selected user, then next to it there is an update data button, here serves to update the data from the API if there is the latest data, for the process the data update is no problem, but there is a problem in the data tables process where after the update process, the data tables don't want to be redrawn
$("#name").on("change",function(){
var cek_id = this.value;
$("#user_id").val(cek_id);
console.log(cek_id);
$('#getData').DataTable().clear().destroy();
var i = 1;
var VendorClient = $("#getData").DataTable({
order: [ 0, "asc" ],
processing: true,
serverSide: false,
ajax: "{{route('get-user-data')}}"+"/"+cek_id,
columns: [{
data: null,
render: function ( data, type, full, meta ) {
return meta.row+1;
} },
{
data: "fullname",
name: "fullname",
orderable:false
},
{
data: "date",
name: "date",
orderable:false
}
]
});
});
and here is the process when the data update is clicked
$("#get_data").on("click",function(){
var cek_id = $("#user_id").val();
var url = "{{route('get-update-data')}}"+"/"+cek_id,
$.ajax({
type: "get",
url: url,
dataType: "json",
success:function(data){
if(data.status=='success'){
$('#getData').data.reload();
}else{
$('#getData').data.reload();
}
}
});
});
I have tried various methods, including creating a globe variable for VendorClient, then after response ajax i'm adding this code VendorClient.ajax.reload(null, false); and get errorr (index):406 Uncaught (in promise) TypeError: Cannot read property 'ajax' of undefined
but it's not working, any ideas?
Try to redraw the table:
$('#getData').DataTable().clear().draw();
or
$('#getData').DataTable().columns.adjust().draw();
or
$('#getData').DataTable().columns.adjust().draw(false);
I'm upgrading an app to ExtJS 5, and I can't seem to get a grid using RowEditing to POST the edited record back to my server.
Ext.define("MyRecordDef", { extend: "Ext.data.Model" });
var MyEditor = Ext.create('Ext.grid.plugin.RowEditing', { clicksToEdit: 1 });
var MyStore = new Ext.data.Store({
model: "MyRecordDef",
autoSync: true,
proxy: {
type: "ajax",
url: "ajaxurl.aspx",
batchActions: false,
extraParams: { Command: 'Save' },
reader: { type: "json", rootProperty: "rows" },
writer: { type: "json", encode: true, writeAllFields: true }
}
});
var MyGrid = new Ext.grid.GridPanel({
store: MyStore,
plugins: [ MyEditor ],
columns: [
{
id: "fieldtoedit",
dataIndex: "fieldtoedit",
editor: new Ext.form.NumberField()
}
]
});
The row editor comes up, I'm able to change the value and click the Update button, but then nothing happens. No request is made, no errors logged in the console.
I added the following:
MyGrid.on('edit', function (e) {
alert('You are Editing ' + e.context.record.id);
MyStore.sync(); // attempt to force a sync
});
I get the alert with the correct record number, but still no AJAX request. It's like ExtJS is completely ignoring the writer.
I don't have different endpoints for each CRUD operation, so I'm not using the api config option, it should be using the url.
First of all you must define rootProperty on writer when you use encode: true.
Then after adding fields to MyRecordDef requests are sended.
Working sample: http://jsfiddle.net/jjVwR/3/ (saving don't work, but you can see on console that request is send)
I am working with Extjs4.1 MVC. What I am trying to do is save some data to the server but I do not know the proper format or how I should go about submitting the data to the server.
Here is what I am thinking but I do not believe the Ajax call should be in the controller, it should be in the model or in the store file?
method in my controller:
submit: function(value) {
data = {"id": 100, "tdt": "rTk", "val": "445"} // test data
Ext.Ajax.request({
url: 'http://test.myloc.com/providerSvc/dbproxy.php',
params: {
'do':'insert',
'object': 'stk',
'values': data
},
success: function(response){
alert('response.responseText);
}
})
}
My store:
Ext.define('STK.store.Stack', {
extend: 'Ext.data.Store',
model: 'STK.model.Stack',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'http://test.myLoc.com/providerSvc/dbproxy.php?do=get&object=stack'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json'
}
}
});
my model:
Ext.define('STK.model.Stack', {
extend: 'Ext.data.Model',
fields: ['id', 'tdt', 'val']
});
store.sync() works only when the endpoints for GET and POST are same.
What you can do is, for GET,
set the extraParams by concatenating to the URL or by creating an object like
extraParams[urlKeys] = paramObject[urlKeys];
store.getProxy().setExtraParams(extraParams);
then,
Store.getProxy().setUrl(StoreUrlForGET);
Store.load({
callback : function(rec, operation, success) {
if (success) {}
else {}
});
and for POST write an AJAX request as,
Ext.Ajax.request({
url : StoreURLForPOST,
method : 'POST',
jsonData : Ext.JSON.encode(YourPostData),
success : function(response, request) {},
failure : function(response, request) {}
});
for this AJAX request you can,
Ext.Ajax.setDefaultHeaders({
"TokenId" : TokenValue
});
All of this code goes into your controller.
I think the store is the proper place to make the ajax call.
You can "save" one record by adding it to the store, and then calling the "sync()" function.
Something like this (beware: code not tested):
var store = Ext.create("STK.store.Stack");
var record = Ext.create("STK.model.Stack");
record.set(xvalues);
record.isDirty = true;
record.setDirty(true); // I don't know if this line is required
store.add(record);
store.sync({
success: function(batch, options){
alert("OK!")
},
failure: function(batch, options){
alert("failure!")
}
});
i want to get value from this API http://demo82.com/lois/api/get_page/?id=6 using Backbone js. i tried but i don't know how can we get values from object in backbone.
here is my Backbone code
Page = Backbone.Model.extend({
initialize: function() {
this.on('all', function() { console.log(this.get('page')); });
},
url: "http://demo82.com/lois/api/get_page/?id=6",
defaults: {
"id":null,
"title":"",
"content":""
}
});
var page = new Page();
console.log(page.fetch({}));
i am new and try to learn backbonejs please explain what is the better way ? please give me ans using jsfiddle.net.
thanks
Is id always going to be 6? In your code, your model is always getting the 6th thing. If you want a custom url with a get parameter, override url as a function:
url: function() {
id = this.get("id");
return "loispage/api/get_page/?id=" + id
}
Better yet, if you have control over the server side and can do something a little more RESTful with a page entity -- simply set urlRoot
urlRoot: "loispage/api/page/"
and fetch will automatically do an HTTP get from
"http://.../loispage/api/page/<id>
It looks like a context problem (this doesn't refer to the model in on's callback). You can fix this by specifying the context:
this.on('all',
function() { console.log(this.get('pagel')); },
this
);
Edit
There's also a cross-domain issue. You'll need to use a JSONP request for this by overriding sync and parse. (I adapted the following code from this example.)
var Page= Backbone.Model.extend({
// override backbone synch to force a jsonp call
sync: function(method, model, options) {
// Default JSON-request options.
var params = _.extend({
type: 'GET',
dataType: 'jsonp',
url: model.url(),
processData: false
}, options);
// Make the request.
return $.ajax(params);
},
parse: function(response) {
// parse can be invoked for fetch and save, in case of save it can be undefined so check before using
if (response) {
console.log(JSON.stringify(response));
// here you write code to parse the model data returned and return it as a js object
// of attributeName: attributeValue
return { status: response.status }; // just an example
}
},
Here's a JSFiddle demo.
I've a ScriptTagProxy and I'm able to receive the data, but now I wanted to update a record. I've specified an url but only one url. Do I have to handle all the actions (read, update, create, delete) with this url?
If yes: how does the action is applied to the url?
If not: how I can specify more urls?
Here is the code I have so far:
app.stores.entries = new Ext.data.Store({
model: "app.models.Entry",
storeId: 'app.stores.entries',
proxy: {
type: 'scripttag',
url: 'http://myurl.de/getEntries.php',
extraParams: {
username: Ext.util.JSON.decode(window.localStorage.getItem('settings')).username,
password: Ext.util.JSON.decode(window.localStorage.getItem('settings')).password
},
reader: {
type: 'json'
},
writer: {
type: 'json'
}
}
});
I've read in the docs that you can pass an config object to the save function of a model to configurate the proxy.
So I tried following:
entry.save({
url: 'http://mysite.com/updateEntry.php',
extraParams: {
username: Ext.util.JSON.decode(window.localStorage.getItem('settings')).username,
password: Ext.util.JSON.decode(window.localStorage.getItem('settings')).password,
entry: entry
},}
As you see there is a url specified.
But I still get the error:
Uncaught Error: You are using a ServerProxy but have not supplied it with a url.
);
Same behaviour when using AjaxProxy or RestProxy for example :(
Hering,
With your first block of code you ask:
Question 1) "Do I have to handle all the actions (read, update, create, delete) with this url?"
The answer is yes.
Question 2) "If yes: how does the action is applied to the url?"
According to the Sencha source code you need to define the actionMethods like so:
myApp.stores.Things = new Ext.data.Store({
model: "Things", proxy: {
type: 'ajax',
actionMethods: {
create: 'POST',
read: 'GET',
update: 'PUT',
destroy: 'DELETE'
},
url: 'jsontest.json',
reader: {
type: 'json',
root: 'things'
}
},
autoLoad: true
});
If you delete, create or edit a record you must call:
store.sync();
There is also a "autoSave" property but it only syncs on edits, not removes.
This will send over the things that have changed or been deleted as part of the request payload, it is your responsibility to parse the json and handle it.
Hering,
I was reading the documentation here, I found this example in the Model class:
Ext.regModel('User', {
fields: ['id', 'name', 'email'],
proxy: {
type: 'rest',
url : '/users'
}
});
But above you don't show your Model for app.models.Entry, have you tried that?