I'm now trying to connect Extjs with a web rest api apart from my project. This is my view:
Ext.define('mycomponents.view.comboselview', {
extend: 'Ext.container.Container',
id: 'comboview',
alias: 'widget.comboview',
xtype: 'comboview',
requires: [
'mycomponents.model.comboselmodel'
],
items: [
{
xtype: 'combobox',
reference: 'levels',
publishes: 'value',
fieldLabel: 'Choices',
displayField: 'description',
anchor: '-15',
store: {
type: 'levels'
},
minChars: 0,
queryMode: 'local',
typeAhead: true,
labelWidth: 100,
labelAlign : 'right',
width: 265,
allowBlank: false
}
],
initComponent: function () {
this.callParent(arguments);
var that = this;
console.log('!!!!!!!!!!!!!!!!!!!!!!>>>', that.up());
}
});
Here is my model:
Ext.define('mycomponents.model.comboselmodel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
mapping: 'pk'
},
{
name: 'description',
type: 'string',
mapping: 'description'
},
{
name: 'levelid',
type: 'integer',
mapping: 'levelid'
},
...
]
});
and my store:
Ext.define('mycomponents.store.comboselstore', {
extend: 'Ext.data.Store',
alias: 'store.levels',
model: 'mycomponents.model.comboselmodel',
storeId: 'levels',
restful: true,
autoLoad: true,
proxy: {
type: 'ajax',
headers: {
'Accept': '*/*',
'Cache-Control': 'no-cache',
'Content-Type': 'application/json',
'Authorization': localStorage.token
},
extraParamas: {
sort: 'description',
filter: {
idlevel: {
'null': -1
}
}
},
reader: new Ext.data.JsonReader({
}),
writer: new Ext.data.JsonWriter({
}),
actionMethods: {
read: 'GET'
},
api: {
read: 'apiurl',
create: 'apiurl',
update: 'apiurl',
destroy: 'apiurl'
},
autoSave: true
},
constructor: function (config) {
this.callParent([config]);
console.log('I am entering here!!!')
}
});
I'm trying to fetch resources from my apiurl which is a web rest api. I need to send some parameters, this code returns me the desired data, but this approach ignores the extraParamas at all. I can't tell that I went into the documentation and found how to use Extjs with a rest api becasue I was unable to find how to do that in the official documentation, so, I've been googleing for a solution and what I've made so far is getting code snippets from here and there. My question: how to send paramenters to a rest api? what am I doing wrong?
There's a typo in your code, extraParamas, when it should be extraParams
Related
how can I pass parameters from the view to the store in extjs?
this is my store:
Ext.define('mycomponents.store.mystore', {
extend: 'Ext.data.Store',
alias: 'store.levels',
model: 'mycomponents.model.mymodel',
storeId: 'levels',
restful: true,
autoLoad: true,
proxy: {
type: 'ajax',
headers: {
'Accept': '*/*',
'Cache-Control': 'no-cache',
'Content-Type': 'application/json',
'Authorization': localStorage.token
},
extraParams: {
sort: 'levelid',
'filter[active]': true,
'filter[idparent]': 0
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
root: 'data'
},
listeners: {
exception: function (proxy, response, operation) {
var error = Ext.decode(response.responseText);
Ext.MessageBox.show(
{
title: 'REMOTE EXCEPTION',
msg: error.message,
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
}
);
}
},
actionMethods: {
read: 'GET'
},
api: {
read: 'http://url...',
create: 'http://url...',
update: 'http://url...',
destroy: 'http://url...'
},
autoSave: true
},
constructor: function (config) {
this.callParent([config]);
}
});
My view:
var store = Ext.create('mycomponents.store.mystore', {});
Ext.define('mycomponents.view.myview', {
extend: 'Ext.container.Container',
id: 'leves',
alias: 'widget.levels',
xtype: 'levels',
items: [
{
xtype: 'combobox',
...
}
]
...
}
I need from the view send 'filter[idparent]': 1, 'filter[idparent]': 2, or whatever on combobox change. How can I achieve this?
You need to attach on change listener in combobox and use method setExtraParam in store.
Example:
Ext.define('mycomponents.view.myview', {
extend: 'Ext.container.Container',
id: 'leves',
alias: 'widget.levels',
xtype: 'levels',
items: [
{
xtype: 'combobox',
listeners:{
change: function (cmp, newV, oldV, opt) {
Ext.getStore('levels').getProxy().setExtraParam('filter[idparent]', newV);
Ext.getStore('levels').load();
}
}
...
}
]
...
}
I have the below code that I am trying to get the list of dates using Ajax and display those on the page as links to elsewhere. So each entry would be a link that when you click would take you elsewhere. Though the treelist is not loading any items...
Data
{
"success": true,
"data": [
"2018-10-08T00:00:00",
"2018-10-05T00:00:00",
"2018-10-04T00:00:00",
"2018-10-03T00:00:00",
]
}
Code
Ext.define('...', {
extend: 'Ext.form.Panel',
xtype: '...',
requires: [
'...'
],
layout: 'border',
items: [{
xtype: 'container',
store: {
proxy: {
type: 'ajax',
url: '...',
useDefaultXhrHeader: true,
withCredentials: true,
reader: {
type: 'json',
rootProperty: 'data'
},
}
}
}]
});
You can display a grid with your data. It can show clickable links.
To do this you need to make a grid with your ajax store and a grid renderer like this:
// Ajax store
Ext.create('Ext.data.Store', {
storeId: 'mystore',
autoLoad: true,
proxy: {
type : 'ajax',
url : '/file.php',
actionMethods: {
read: 'POST'
},
reader : {
type: 'json'
},
extraParams : {
key : 'val'
},
fields : [
{name: 'date', type: 'string'}
]
}
})
// Grid
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
scrollable: true,
store: {
type: 'mystore'
},
columns: [
{
text: 'link column',
dataIndex:'link',
renderer: function(value) {
if(value) {
// here you can format your output
return ''+value+'';
}
}
}
]
})
Please look whole example in a Fiddle
I can't tell why my store does not bind the the data returned from the server. Thank you in advance.
Here is how I instantiate and call "load":
var store = Ext.create('Iip.store.giip.other.States');
store.load({
params: {c: 'get_states'},
scope: this,
callback: function(records, operation, success) {
console.log(records); **<=== never prints**
}
});
Here is the store:
Ext.define("Iip.store.giip.other.States", {
extend: "Ext.data.Store",
storeId:"states-store",
model: "Iip.model.giip.other.State",
autoLoad: false,
buffered: true
});
Here is the model:
Ext.define('Iip.model.giip.other.State', {
extend: 'Ext.data.Model',
idProperty: "stateId",
fields:[
{name: "stateId", type: "int"},
{name: "state", type: "string"}
],
proxy: {
type: "ajax",
actionMethods: {
read: "POST"
},
api: {
read: "indexes/common_index.php"
},
reader: {
type: "json",
root: "states"
},
listeners: {
exception: function(proxy, response, operation, opts) {
if(typeof(operation.error) == "string") {
Ext.Msg.alert("Error", "Connection to server interrupted");
}
}
}
}
});
Here is the data returned from the server in firebug:
{"states":[{"stateId":"1","state":"AL"},{"stateId":"2","state":"AK"},
{"stateId":"3","state":"AS"},{"stateId":"4","state":"AZ"},{"stateId":"5","state":"AR"},
{"stateId":"6","state":"CA"},{"stateId":"7","state":"CO"},{"stateId":"8","state":"CT"},
{"stateId":"9","state":"DE"},{"stateId":"10","state":"DC"},
{"stateId":"11","state":"FM"},{"stateId":"12","state":"FL"},
{"stateId":"13","state":"GA"},{"stateId":"14","state":"GU"},
{"stateId":"15","state":"HI"},{"stateId":"16","state":"ID"},
{"stateId":"17","state":"IL"},{"stateId":"18","state":"IN"},
{"stateId":"19","state":"IA"},{"stateId":"20","state":"KS"},
{"stateId":"21","state":"KY"},{"stateId":"22","state":"LA"},
{"stateId":"23","state":"ME"},{"stateId":"24","state":"MH"},
{"stateId":"25","state":"MD"},{"stateId":"26","state":"MA"},
{"stateId":"27","state":"MI"},{"stateId":"28","state":"MN"},
{"stateId":"29","state":"MS"},{"stateId":"30","state":"MO"},
{"stateId":"31","state":"MT"},{"stateId":"32","state":"NE"},
{"stateId":"33","state":"NV"},{"stateId":"34","state":"NH"},
{"stateId":"35","state":"NJ"},{"stateId":"36","state":"NM"},
{"stateId":"37","state":"NY"},{"stateId":"38","state":"NC"},
{"stateId":"39","state":"ND"},{"stateId":"40","state":"MP"},
{"stateId":"41","state":"OH"},{"stateId":"42","state":"OK"},
{"stateId":"43","state":"OR"},{"stateId":"44","state":"PW"},
{"stateId":"45","state":"PA"},{"stateId":"46","state":"PR"},
{"stateId":"47","state":"RI"},{"stateId":"48","state":"SC"},
{"stateId":"49","state":"SD"},{"stateId":"50","state":"TN"},
{"stateId":"51","state":"TX"},{"stateId":"52","state":"UT"},
{"stateId":"53","state":"VT"},{"stateId":"54","state":"VA"},
{"stateId":"55","state":"VI"},{"stateId":"56","state":"WA"},
{"stateId":"57","state":"WV"},{"stateId":"58","state":"WI"},
{"stateId":"59","state":"WY"}]}
Here is the combo the data is supposed to bind to:
{
xtype: 'combo',
fieldLabel: 'State',
store: store,
displayField: 'state',
valueField: 'stateId',
anchor:'97%',
itemId: 'fatherState',
editable: false,
allowBlank: false,
emptyText: 'Select a state',
tabIndex: 6,
queryMode: 'local'
}
try after change this two fiels like below
store:
Ext.define("Iip.store.giip.other.States", {
extend: "Ext.data.Store",
config: {
storeId:"states-store",
model: "Iip.model.giip.other.State",
autoLoad: false,
buffered: true,
proxy: {
type: "ajax",
actionMethods: {
read: "POST"
},
api: {
read: "indexes/common_index.php"
},
reader: {
type: "json",
root: "states"
},
listeners: {
exception: function(proxy, response, operation, opts) {
if(typeof(operation.error) == "string") {
Ext.Msg.alert("Error", "Connection to server interrupted");
}
}
}
}
}
});
model:
Ext.define('Iip.model.giip.other.State', {
extend: 'Ext.data.Model',
idProperty: "stateId",
fields:[
{name: "stateId", type: "int"},
{name: "state", type: "string"}
]
});
Ext js TreeStore is not loading
Ext.ns('App');
Ext.onReady(function() {
Ext.QuickTips.init();
App.PPPExplorer.init();
});
App.PPPExplorer = {
// Initialize application
init : function(serverCfg) {
this.PPP = this.createPPP();
},
createPPP : function() {
// Set up a model to use in our Store
Ext.define('Summary', {
extend: 'Ext.data.Model',
fields: [
{name: 'pid', type: 'string'}
]
});
var myStore = Ext.create('Ext.data.TreeStore', {
model: 'Summary',
storeId:'myStore',
proxy: {
type : 'ajax',
method: 'GET',
url: '/Explorer.do?method=getPPP&search=true',
reader: {
type: 'json'
},
root: {
pid: 'src',
text:'test',
expanded: true
},
},
autoLoad: true
});
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: myStore,
// rootVisible: true,
renderTo: 'Explorer',
columns: [{
xtype: 'treecolumn', //this is so we know which column will show the tree
text: 'Reference',
flex: 2,
sortable: true,
dataIndex: 'pid',
locked: true
}]
});
}
}
I am using Ext js 4.2 Version
I have used treeStore, treePanel in the above code, somehow Proxy call is not sent to Server. There was no error message in the console
Thanks in advance
Root definition should be inside TreeStore definition as follows (it's on the proxy declaration now):
var myStore = Ext.create('Ext.data.TreeStore', {
model: 'Summary',
storeId: 'myStore',
proxy: {
type: 'ajax',
method: 'GET',
url: '/Explorer.do?method=getPPP&search=true',
reader: {
type: 'json'
}
},
autoLoad: true,
root: {
pid: 'src',
text: 'test',
expanded: true
}
});
That way your code works, you can see it here
In my ExtJS application I use EditorGridPanel to show data from server.
var applicationsGrid = new Ext.grid.EditorGridPanel({
region: 'west',
layout: 'fit',
title: '<img src="../../Content/img/app.png" /> Приложения',
collapsible: true,
margins: '0 0 5 5',
split: true,
width: '30%',
listeners: { 'viewready': { fn: function() { applicationsGridStatusBar.setText('Приложений: ' + applicationsStore.getTotalCount()); } } },
store: applicationsStore,
loadMask: { msg: 'Загрузка...' },
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: { 'rowselect': { fn: applicationsGrid_onRowSelect} }
}),
viewConfig: { forceFit: true },
tbar: [{
icon: '../../Content/img/add.gif',
text: 'Добавить'
}, '-', {
icon: '../../Content/img/delete.gif',
text: 'Удалить'
}, '-'],
bbar: applicationsGridStatusBar,
columns: [{
header: 'Приложения',
dataIndex: 'ApplicationName',
tooltip: 'Наименование приложения',
sortable: true,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: '<img src="../../Content/img/user.png" />',
dataIndex: 'UsersCount',
align: 'center',
fixed: true,
width: 50,
tooltip: 'Количество пользователей приложения',
sortable: true
}, {
header: '<img src="../../Content/img/role.gif" />',
dataIndex: 'RolesCount',
align: 'center',
fixed: true,
width: 50,
tooltip: 'Количество ролей приложения',
sortable: true}]
});
When I use JsonStore without reader it works, but when I try to update any field it uses my 'create' url instead of 'update'.
var applicationsStore = new Ext.data.JsonStore({
root: 'applications',
totalProperty: 'total',
idProperty: 'ApplicationId',
messageProperty: 'message',
fields: [{ name: 'ApplicationId' }, { name: 'ApplicationName', allowBlank: false }, { name: 'UsersCount', allowBlank: false }, { name: 'RolesCount', allowBlank: false}],
id: 'app1234',
proxy: new Ext.data.HttpProxy({
api: {
create: '/api/applications/getapplicationslist1',
read: '/api/applications/getapplicationslist',
update: '/api/applications/getapplicationslist2',
destroy: '/api/applications/getapplicationslist3'
}
}),
autoSave: true,
autoLoad: true,
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
});
I believe that the problem is that I don't use reader, but when I use JsonReader grid stops showing any data at all.
var applicationReader = new Ext.data.JsonReader({
root: 'applications',
totalProperty: 'total',
idProperty: 'ApplicationId',
messageProperty: 'message',
fields: [{ name: 'ApplicationId' }, { name: 'ApplicationName', allowBlank: false }, { name: 'UsersCount', allowBlank: false }, { name: 'RolesCount', allowBlank: false}]
});
var applicationsStore = new Ext.data.JsonStore({
id: 'app1234',
proxy: new Ext.data.HttpProxy({
api: {
create: '/api/applications/getapplicationslist1',
read: '/api/applications/getapplicationslist',
update: '/api/applications/getapplicationslist2',
destroy: '/api/applications/getapplicationslist3'
}
}),
reader: applicationReader,
autoSave: true,
autoLoad: true,
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
});
So, does anyone know what the problem might be and how to solve it. The data returned from my server is Json-formated and seams to be ok
{"message":"test","total":2,"applications":[{"ApplicationId":"f82dc920-17e7-45b5-98ab-03416fdf52b2","ApplicationName":"Archivist","UsersCount":6,"RolesCount":3},{"ApplicationId":"054e2e78-e15f-4609-a9b2-81c04aa570c8","ApplicationName":"Test","UsersCount":1,"RolesCount":0}]}
I had the same problem.. I solved it establishing Success Property in the json store and returning success true in the response from my create Method.. here is my code. Hope it helps
var EStore = new Ext.data.JsonStore
({
api: { read: 'getAssignedJobs',
create: 'createAssignedJobs',
update: 'updateAssignedJobs',
destroy: 'destroyAssignedJobs'},
root: 'jobData',
idProperty: 'Id',
autoSave: false,
autoLoad: true,
batch: true,
successProperty: 'success',
writer: new Ext.data.JsonWriter({ encode: true, writeAllFields: true }),
fields: [
{ name: 'Id', type: 'int', mapping: 'Id' },
{ name: 'ResourceId', type: 'int', mapping: 'fitter_id' },
{ name: 'StartDate', type: 'date', dateFormat: "Y-m-d\\TH:i:s" },
{ name: 'EndDate', type: 'date', dateFormat: "Y-m-d\\TH:i:s" },
{ name: 'status', type: 'int' },
{ name: 'job_id', type: 'int' }
]
});
and this is my Create method from Server Side..
public JsonResult createAssignedJobs(string jobData)
{
var Jsondata = (JobfitterToScheduler)new JavaScriptSerializer().Deserialize<JobfitterToScheduler>(jobData);
JobToFitterRepo jobtofitter = new JobToFitterRepo();
if (Jsondata != null)
{
jobtofitter.insertJobToFitter(13, Jsondata.fitter_id, 0, DateTime.Now, DateTime.Now);
return this.Json(new { success = true, jobData = Jsondata });
}
return null;
}
Looking at the source for Ext.data.Api I would say that the verbs are screwed up:
restActions : {
create : 'POST',
read : 'GET',
update : 'PUT',
destroy : 'DELETE'
},
For me the create should be a PUT and the update should be a POST. But I guess the Sencha guys have a different idea.
Btw, the source is taken from Ext 3.3.1
I guess you could override the restActions object to work as you would expect:
Ext.data.Api.restActions = {
create : 'PUT',
read : 'GET',
update : 'POST',
destroy : 'DELETE' };
As I've managed to know the Store 'id' config option is depricated.
I think the JsonStore keys off the record id on whether to do a POST vs PUT. So if the id is non-user generated the it will issue a POST, and a PUT otherwise. I am referring to record.id not record.data.id.
Not sure about the first part (my stores make the correct calls with similar code) but I can shed light on the 2nd part of your question.
Ext.data.JsonStore does NOT accept a reader object - it only takes fields and always makes its own reader, as you can see from the source
Ext.data.JsonStore = Ext.extend(Ext.data.Store, {
constructor: function(config){
Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new Ext.data.JsonReader(config)
}));
}
});
and is confirmed as being "as per docs" in Ext 2.x
http://www.sencha.com/forum/showthread.php?57189-2.x-Closed-Bug-in-Ext.data.JsonStore-cconstructor
So if you supply your own reader you must, in this case, make an Ext.data.Store instead (this caught me out too)