Is there a way to load different json files on demand(click), somehow changing the URL. Same store, same model, just changing the url and load().
Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: [
'name', 'email', 'phone'
]
});
var myStore =Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
type: 'ajax',
url : 'app/kontaktGrid.json',
reader:{
type:'json',
root: 'items'
}
}
});
buttons: [{
text: 'Load1',
handler:function(){
myStore.load().url('app/kontaktGrid1.json');
}
},{
text: 'Load2',
handler:function(){
myStore.load('app/kontaktGrid2.json');--
returning POST 405 Method not allowed
}
}]
both myStore.load().url('app/kontaktGrid1.json'); or myStore.load('app/kontaktGrid2.json'); do not update the store URL for retriving data.
In order update the url, you need to do the following:
myStore.getProxy().url = "/new-url";
myStore.load();
The first statement modifies the store's proxy url. The load() which is then called, loads the new data to the store.
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.
I am using Json-server to test CURD operations in my extjs grid. I have put some dummy data on json-server and I am able to read, delete, update and edit that data.
But When I create data using my extjs app, I am not able to delete or edit that data cause auto generated Id is "nameOfMyModel + autoIncrementNumber".
My Store is:
Ext.define('ThemeApp.store.peopleStore', {
extend: 'Ext.data.Store',
model: 'ThemeApp.model.peopleModel',
storeId: 'peopleStore',
pageSize: 500,
autoLoad: true,
autoSync: true
});
Model is:
Ext.define('ThemeApp.model.peopleModel', {
extend: 'Ext.data.Model',
fields: [ 'id' ,'title','body'],
proxy: {
type: 'rest',
//format: 'json',
limitParam:"",
filterParam: "",
startParam:'',
pageParam:'',
url:'http://localhost:3000/posts',
api: {
read : 'http://localhost:3000/db',
create: 'http://localhost:3000/posts',
update : 'http://localhost:3000/posts' ,
destroy : 'http://localhost:3000/posts'
},
headers: {'Content-Type': "application/json" },
reader: {
type: 'json',
rootProperty:'posts'
},
writer: {
type: 'json'
}
}
});
And I am Adding user like:
var UserStore = Ext.getStore('peopleStore');
var user = Ext.create('ThemeApp.model.peopleModel',{title: "Test", body: "Testing" });
user.save(); //POST /users
UserStore.load();
And For Deletion:
var grid = button.up('gridpanel');
var selection = grid.getView().getSelectionModel().getSelection()[0];
if (selection) {
UserStore.remove(selection);
UserStore.load();
}
Can anyone tell me why I am not able to delete/update records which I generate via extjs app?
The Id of simple post is like
http://localhost:3000/posts/(number like 1 or 2)
and of app generated record is
http://localhost:3000/posts/ThemeApp.model.peopleModel-1
And I can see app generated record in database.json but browser is saying that this url doesn"t exist.
Kindly point out my mistake
Reason you can't delete them is because they are not created properly. First of all to generate sequential ids use
identifier: 'sequential' in your model, than it will generate numeric id's
You can read it in detail here Model identifier
After doing this generate new objects and see if you can handle them properly.
I am creating an application where i have created a list and populated the data in the list using a data store.
data.js
Ext.regModel('Contact', {
fields: ['firstName', 'lastName', 'DOB', 'group']
});
iPolis.ListStore = new Ext.data.Store({
model: 'Contact',
sorters: 'lastName',
getGroupString : function(record) {
return record.get('group');
},
data: [
{ firstName: "Domino", lastName: "Derval" , DOB: "28May2008", group:"Personalize"},
]
});
This part of the code runs fine where i get the data and display it. Now what i require is a connection to the database and retriving the data in the data.js using a json file.
Any suggestions on how thats possible?
iPolis.ListStore = new Ext.data.Store({
model : 'Contact',
proxy : {
type : 'ajax',
url : 'js/person_list.json',
reader : {
type : 'json',
//root : 'results',
// totalCount : 'total'
}
},
autoLoad : true
});
used this for getting the data but it gives me an error sayin XMLHttprequest cannot load data in file.json
Go through the Ext.data.Proxy in Sencha API and also check the examples of store in API docs.
Just replace the url property of reader to the php file.
return proper JSON
i use extjs and load a json file with the store loader.
I want to load a json file. It will contain "totalRecords" and i want to put this in a var. For example var Records. This way i can display it at some positions of my app and use it for alerts.
thanks to your help i know have this:
total = Ext.create('Ext.data.Store', {
model: 'step1',
proxy: {
type: 'ajax',
url: 'testevents.json',
reader: {
type: 'json',
root: 'slaevents'
}
},
listeners: {
load: function() {
records = total.getRange()
test = records[0].get('event')
alert('1 =' +test)
}
},
autoLoad:true
});
alert('2 =' +test)
This will show alert with "1 =other". That is correct. And "2 =undifined". That is wrong. How can i use the test outside of this store?
Thanks
Realize that your store doesn't load instantly so it has nothing in it when you assign it to a variable immediately afterwards in the js. You need to listen for the store to load and then assign it, or assign it in a callback. For example, this works fine:
// get the countries
var countries = Ext.create('Ext.data.Store', {
fields: ['id','name'],
proxy: {
type: 'ajax',
url: '../getCountries',
reader: 'json'
},
listeners: {
load: function() {
records = countries.getRange()
alert(records[0].get('name'))
}
}
});
This alerts "Argentina".
records becomes an array of Ext.data.Model objects each of which have all the methods that Ext.data.Model has. This is covered here in the API.
I am trying to use a JSON file to populate a grid but the JSON file is complex.
Below is my JavaScript File and below that is link to my JSON file. Note that the fields I am experimenting with in the JSON file are located at the top.
I have tried everything but I can only get 'server_time' if I remove the 'root' and 'record' from the 'reader', so that proves the it works on some level but I can't get anything else no matter which configuration I try.
Please help me solve this issue. Thanks in Advance!
Link to JSON File LINK
ExtJS Code
Ext.onReady(function(){
Ext.define('Jobs', {
extend: 'Ext.data.Model',
fields: [
{name: 'op_comm_status'},
{name: 'job_category_level_two'},
{name: 'op_description'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Jobs',
proxy: {
type: 'ajax',
url : 'results/company_list.json',
reader: {
type: 'json',
root: 'jobs',
record: 'job'
}
}
});
store.load();
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Status',
dataIndex: 'op_comm_status'
},{
header: 'Category Level Two',
dataIndex: 'job_category_level_two'
},{
header: 'Description',
dataIndex: 'op_description'
}]
});
grid.render(Ext.getBody());
})
Not really a solution, I switched to XML instead and had it working within 5 minutes
try below code :
var proxy = new Ext.data.HttpProxy({url: "your url"});
var reader = new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'count',
id: 'id' });
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
remoteSort: true
});
you can include other attribute as required.