My app send multiply request to server each time I insert new item to store. When the first item inserted it calls POST once, one more item ... twice and so on.
Im new at ExtJs, so can you help me in solving some qustions:
First of all what the sync method do, why (GET, POST, PUT, DELETE) methods are not called without store.sync() method invok?
Why my post method multiply requests?
Why store.remove() (DELETE) method throws 400 error (Bad request) when the PUT method works fine?
Thank you in advance
my edit controller:
Ext.define('MVC.controller.Edit', {
extend: 'Ext.app.Controller',
init: function () {
this.control({
'editForm > button#SaveRecord': {
click: this.onSaveButtonClick
},
'editForm > button#DeleteButton': {
click: this.onDeleteButtonClick
}
});
},
onSaveButtonClick: function (btn) {
//get reference to the form
var detailView = btn.up('editForm');
//get the form inputs
var data = detailView.getValues();
//see if the record exists
var store = Ext.getStore('TestStore');
console.log(data.id);
var record = store.getById(data.id);
if (!record) {
record = Ext.create('MVC.model.Note', {
title: data.title,
created: new Date(),
updated: new Date(),
text: data.text
});
store.insert(0, record);
store.sync();
Ext.MessageBox.alert('Created', record.id);
return;
}
record.set(data);
store.sync();
//manually update the record
detailView.updateRecord();
},
onDeleteButtonClick: function (btn) {
//get reference to the form
var detailView = btn.up('editForm');
//get the form inputs
var data = detailView.getValues();
var store = Ext.getStore('TestStore');
var record = store.getById(data.id);
store.remove(record);
store.sync();
}
});
Store :
Ext.define('MVC.store.TestStore', {
extend : 'Ext.data.Store',
requires : [
'MVC.model.Note'
],
storeId : 'TestStore',
model : 'MVC.model.Note',
autoLoad: false,
proxy: {
type : 'rest',
url: 'rest/notes',
actionMethods : {
create : 'POST',
read : 'GET',
update : 'PUT',
destroy : 'DELETE'
},
reader: {
type: 'json',
rootProperty: 'data'
},
writer: {
type: 'json'
}
}
});
And model:
Ext.define('MVC.model.Note', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'string'
},
{
name: 'title',
type: 'string'
},
{
name: 'created',
type: 'date'
},
{
name: 'updated',
type: 'date'
},
{
name: 'text',
type: 'string'
}
]
});
Try to use record's methods:
1)Add proxy to you'r model like this:
Ext.define('MVC.model.Note',{
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'string'
},
{
name: 'title',
type: 'string'
},
{
name: 'created',
type: 'date'
},
{
name: 'updated',
type: 'date'
},
{
name: 'text',
type: 'string'
}],
proxy:
{
type: 'rest',
url: 'rest/notes',
reader:
{
type: 'json'
}
}
});
2)Now you can use methods: record.save() - will send PUT if it was loaded to store from server and record have id, or POST if this record was created with record.create();
record.destroy() - will send DELETE to server with id of record;
You can use Ext.ModelManager.getModel('Model_name').load(id) to send GET request to server for single record.
3)Use store.load() to GET array of records from server
Related
I need to ask - I've got a /users endpoint and I want to add tasks to user, just like that: /users/:username/tasks. Should I create another model and route? I don't know how to add an ID to an array in Mongoose model and add a slug with mongoose-url-slugs.
I want it to be RESTful as much as I can. So this: /users/:username/tasks or /tasks/:username? If first, I need to know how to add ID to tasks in that model:
import mongoose from 'mongoose'
const User = mongoose.Schema({
username: String,
email: String,
password: String,
tasks: Array
}, {
timestamps: true
})
export default mongoose.model('User', User)
In my opinion, I believe you should create a new model tasks.
You can use a reference to tasks model like that:
tasks: [{ type: Schema.Types.ObjectId, ref: 'tasks' }]
https://mongoosejs.com/docs/populate.html
This route's better because you're adding a task to the user and not a user to the task
/users/:username/tasks
And to link then you can use mongoose's virtual: https://mongoosejs.com/docs/tutorials/virtuals.html
Ex: https://github.com/Automattic/mongoose/issues/6608
UserSchema.virtual('tasks', {
lookup: (doc) => {
return {
from: 'tasks',
let: { userId: '$_id' },
pipeline: [{
$match: {
$expr: {
$and: [{
$eq: ['$refId', '$$userId']
}]
}
}
}, {
$project: { name: 1, createdAt: 1 }
}
],
as: 'tasks',
}
}
});
userModel.find().populate('tasks').lean(true);
I am using Extjs 6. I want to get data from server and load data to combobox. But when I get data root property and success value is not comes with data still its goes in success call but unable to load data to combobox.
Any help would be appreciated!
Below are code snippets:
I have combobox as below :
xtype : 'thrcombobox',
fieldLabel : 'Select District',
store : Ext.create('thr.store.admin.master.DistrictStore'),
itemId : 'cmbDistrict',
name : 'cmbDistrict',
displayField : 'districtMarathi',
valueField : 'districtID',
queryMode : 'local'
Below is Store :
Ext.define('thr.store.admin.master.DistrictStore',{
extend : 'Ext.data.Store',
alias : 'store.districtStore',
storeId : 'districtStore',
requires : [
'thr.model.admin.master.District'
],
model : 'thr.model.admin.master.District',
autoSync : false,
autoLoad : false,
proxy: {
type : 'memory',
reader : {
type : 'json',
rootProperty: 'data'
}
}
});
Below is Model :
Ext.define('thr.model.admin.master.District',{
extend : 'Ext.data.Model',
fields : [
{
name : 'districtID'
},
{
name : 'districtMarathi'
},
{
name : 'districtEnglish'
}
]
});
And below is ajax call where I am getting data for store:
var districtStore = districtCombobox.getStore();
districtStore.loadData([]);
Above districtStore defines store of combobox.
Ext.Ajax.request({
url: <path goes here..>,
method: 'POST',
success: function(response, action){
var decodedResponse = Ext.decode(response.responseText);
if(!Ext.isEmpty(decodedResponse) && decodedResponse.success){
districtStore.loadData(decodedResponse.data);
}
},
failure: function(form, action){
return false;
}
});
I'm begginner in Ext JS and i want to send my Java Form to an ext js store who has a defined model :
This is my Java Form :
public class Form {
private member1;
private member2;
private List<AnotherType> membersList;
//getters and setters
}
This is my store :
Ext.define('MyApp.store.Mystore', {
extend : 'Ext.data.Store',
model : 'MyApp.model.MyModel',
proxy : {
type: 'rest',
url : '/myapp/url/for/findForm',
reader: {
type: 'json'
rootProperty : 'form'
},
writer: {
type: 'json'
}
}
}
How to define MyModel for include list of members ?
And how to use this list once my store is loaded ?
(it's a list to load a combox)
Thanks !
Your models could look something like this. I've used a naming pattern similar to what you used in your question.
Ext.define("MyApp.model.Form", {
extend: "Ext.data.Model",
fields: [
{name: "member1", type: "string"},
{name: "member2", type: "string"},
],
hasMany: {
model: "MyApp.model.AnotherType",
name: "membersList",
associationKey: "membersList"
}
});
Ext.define("MyApp.model.AnotherType", {
extend: "Ext.data.Model",
fields: [
{name: "value", type: "string"},
{name: "label", type: "string"},
]
});
You can create a combo box like this.
Ext.create("Ext.form.ComboBox", {
fieldLabel: "Members",
store: Ext.getStore("MyApp.store.Mystore").getAt(0).membersList(),
queryMode: "local",
displayField: "label",
valueField: "value",
renderTo: Ext.getBody()
});
Note that the above is just an example using the first MyApp.model.Form in your store. You'll likely want to create the combo box in a more generic way, but I'm not sure of the specifics for your case.
I have to implement the jqxGrid using spring.I don't know how to do it on spring.Below is my controller class
AccountController.java:
#Controller
#RequestMapping(value="/account")
public class AccountsController {
#Autowired
private AccountService accountService;
#RequestMapping(value = "/list", method = RequestMethod.GET, headers =
"Accept=application/json")
public #ResponseBody ModelAndView listOfAccounts() {
ModelAndView modelAndView = new ModelAndView();
List<Accounts> accounts = accountService.getAccounts();
modelAndView.addObject("accounts", accounts);
return modelAndView;
}
}
I think the json data retrieved from Accounts.java class is in the format :
[{"id":"1","PeriodName":2000-2001,"PeriodStartDate":"2000-01-01","PeriodEndDate":"2001-12-31"},{"id":"2","PeriodName":2001-2002,"PeriodStartDate":"2001-01-01","PeriodEndDate":"2002-12-31"}]
Below is jquery get request for the json response and code for getting the jqxGrid:
$.get('account/list',function(responseJson) {
var data = responseJson;
var source =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'PeriodName' },
{ name: 'PeriodStartDate' },
{ name: 'PeriodEndDate' }
],
id: 'id',
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
//columnsresize: true,
width: 800,
source: dataAdapter,
pageable: true,
//pagerButtonsCount: 10,
autoheight: true,
// editable: false,
pagerrenderer: pagerrenderer,
columns: [
{ text: 'Period Name', datafield: 'PeriodName', width: 200 },
{ text: 'Start Date', datafield: 'PeriodStartDate', width: 200 },
{ text: 'End Date', datafield: 'PeriodEndDate', width: 200 }
]
});
});
But i didn't get the grid on here.I don't know where is the problem in the above code.I have imported all js files for jqxGrid.Please help me to solve this
*I looked on your problem here is the same code (little modified). comment that pagerenderer code .You have not defined the pagerenderer function anywhere. It will work. here is the working code http://jsfiddle.net/qwm3z/ .
responseJson = <c:out value="${accounts}" />;
var data = responseJson;
var source =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'PeriodName' },
{ name: 'PeriodStartDate' },
{ name: 'PeriodEndDate' }
],
id: 'id',
localdata: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
//columnsresize: true,
width: 800,
source: dataAdapter,
pageable: true,
//pagerButtonsCount: 10,
autoheight: true,
// editable: false,
// pagerrenderer: pagerrenderer,
columns: [
{ text: 'Period Name', datafield: 'PeriodName', width: 200 },
{ text: 'Start Date', datafield: 'PeriodStartDate', width: 200 },
{ text: 'End Date', datafield: 'PeriodEndDate', width: 200 }
]
});
and why are you making grid in each response? you can make one time and update it for every get request.*
I am new for sencha touch. I need to create, delete, update a member record throughout jersey java. Here is my code
view.js
Ext.define('bluebutton.view.BlueButton.testing', {
extend: 'Ext.form.Panel',
xtype: 'testing',
requires: [
'bluebutton.view.BlueButton.TransactionList',
'bluebutton.view.BlueButton.MemberPopUp',
'bluebutton.view.BlueButton.MemberDetail',
'bluebutton.store.BlueButton.MemberList',
],
config: {
id:'register',
items :[
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'button',
text: 'Send',
handler: function(button) {
var form = Ext.getCmp('register');
values = form.getValues();
var myStore= new Ext.data.Store({
model: 'bluebutton.model.BlueButton.MemberList'
});
var newModel = Ext.ModelMgr.create({ 'memberId': 1,
'name': 2,
'imgUrl': 3
}, 'bluebutton.model.BlueButton.MemberList');
myStore.add(newModel);
myStore.sync();
}
}
],
}
});
Model.js
Ext.define('bluebutton.model.BlueButton.MemberList', {
extend: 'Ext.data.Model',
config: {
idProperty: 'memberModel',
fields: [
{ name: 'memberId' },
{ name: 'name' },
{ name: 'imgUrl' },
{ name: 'age' },
{ name: 'address' },
{ name: 'pointAvalaible' },
{ name: 'lastVisited' },
],
proxy: {
type: 'ajax',
actionMethods: {
create : 'POST',
read : 'POST', // by default GET
update : 'POST',
destroy: 'POST'
},
url: 'http://localhost:8080/RESTFulExample/rest/json/metallica/testingj'
},
}
});
Store.js
Ext.define('bluebutton.store.BlueButton.MemberList', {
extend: 'Ext.data.Store',
requires: [
'bluebutton.model.BlueButton.MemberList'
],
config: {
grouper: {
groupFn: function (record) {
return record.get('name')[0];
}
},
model :'bluebutton.model.BlueButton.MemberList',
storeId :'memberStore',
autoLoad:false,
pageSize: 5,
clearOnPageLoad: false,
data: [
]
}
});
Jersey.java
#POST
#Path("/testingj")
// #Consumes("application/x-www-form-urlencoded")
#Consumes(MediaType.APPLICATION_JSON)
public Response too(MultivaluedMap<String, String> form) {
return Response.status(201).entity(form).build();
}
But I keep getting this error
XMLHttpRequest cannot load localhost:8080/RESTFulExample/rest/json/metallica/testingj?_dc=1358408853016.
Origin localhost is not allowed by Access-Control-Allow-Origin.
Please guide me solution.
You are getting this response because of browser's security constraint for cross origin requests, which means from javascript you can call only those urls which are in same domain. Since your service is running on 8080 post so browser consider it from other domain.
There are various ways to do cross domain request, out of which you should read about:
JsonP
Enabling CORS on server
But since mobile's security constraints are different from desktop's browser constraints so the same thing might work in mobile even though it doesn't work in browser. For more details check this out : Loading store data with rest proxy from server in Sencha Touch 2
In your case I would recommend you to add JsonP support to your services and use JsonP proxy instead of AJAX & REST proxy.