Morning,
I have created a store in my controller like this:
var storeCompanies = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
type: 'GET',
url: url+'dashboard?Uid='+uid+'&Ude='+ude,
reader: {
type: 'json',
root: 'root',
totalProperty: 'total'
},
headers: {
'Accept' : 'application/json;application/x-www-form-urlencoded',
'Content-Type' : 'application/x-www-form-urlencoded',
},
}),
root: 'd',
type: 'localstorage',
autoLoad : true,
id: 'company_Id',
scope : this,
fields: ['Name']
});
console.log(storeCompanies);
The console log shows that the store is being created and populated properly. I need to retrieve all the values for a dropdown.
I tried this but it returned undefined.
All other info I have found seems to instruct on how to find just one value.
What's the easiest and most effecient way to retrieve all the data?
storeCompanies.on('load', function() {
console.log(storeCompanies.data); //<--- data is a Ext.util.MixedCollection
});
If you need to retrieve all the values in the JSonStore you could use each(). Here's an example: http://docs.sencha.com/touch/2.2.1/#!/api/Ext.data.JsonStore-method-each
Thanks to #Vlad for his input. Here is what I settled on:
storeCompanies.on('load', function() {
numcomps = storeCompanies.data.items.length; //get number of elements in store
for(var ic = 0;ic<numcomps;ic++){
console.log(storeCompanies.data.items[ic].raw);
}
});
Related
I have a combobox declared inside my grid
header: '<b>Reasons</b>',
width : 150,
editor:
{
xtype: 'combobox',
store: 'reasonstore',
displayField: 'displayText',
valueField: 'value',
queryMode: 'local',
}
and my store is
var reasonstore = Ext.create('Ext.data.Store', {
fields: ['displayText', 'value'],
id : 'resonstoreid'
});
I have done a rest call and got my jsondata in controller
successCallback:function(json){
var mydata = json.reason;
Ext.getCmp('resonstoreid').getStore().loadData(json.reason);
but i m getting Ext.getCmp('resonstoreid') is undefined.
my view is only loading first then the controller.
so how to load this json data from controller to view.
You should use Ext.getStore("xxx") to get a reference to your store! This should solve your problem.
var store = Ext.getStore("resonstoreid");
store.loadData(json.reason);
An other advice
Instead of making a AJAX call, and fill the store with loadData(xxx) use load() function of the store. See here: Ext.data.Store.load
Do to that, your store config should look like this
//create File store/Reasons.js
Ext.define('XYZ.store.Reasons', { //XYZ ... you namespace
extend: 'Ext.data.Store',
fields: ['displayText', 'value'],
id : 'Reasons',
autoLoad: true,
proxy: {
type: 'ajax',
actionMethods: {create: 'POST', read: 'GET', update: 'POST', destroy: 'POST'},
url: 'xxx',
method: 'POST',
reader: {
type: 'json',
root: 'data'
}
}
});
After that, you can do this:
var store = Ext.getStore("Reasons");
store.load(
params: {
group: 3,
type: 'user'
},
callback: function(records, operation, success) {
// do something after the load finishes
},
scope: this
});
The advantage would be a better app structure and that load does the ajax request for you. This is exactly what extjs is great for: Split up the code in many small files which are easy to maintain (code reuse, etc...).
I have a grid panel and i want to get data that i embed in store
My json look like (embed is my embed data)
({"total":"20","results":[{...}], "embed": [{...}] })
How to get embed data in my load function. Thanks
var store = Ext.create('Ext.data.Store', {
model: 'MyDataObject',
autoLoad: true,
pageSize:10,
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'json',
totalProperty: 'total', // total data
root: 'results'
}
}
,listeners: {
load: function( store, records, successful, eOpts ){
if (successful) {
alert(store.embed) // ?? how to get it
}
}
}
});
The proxy keeps a reference to the rawData property for the most recent load.
console.log(store.getProxy().getReader().rawData.embed);
The below is my MyStore.js:
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Note',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
/* I want to change the following two filepaths */
read: 'data/notesMar2013.json',
update: 'data/notesMar2013.json'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
I am trying to change the read and update values in api of MyStore through controller as follows:
var notesStore = Ext.getStore('MyStore');
notesStore.on('load',function(notesStore){
var proxy = notesStore.getProxy();
Ext.apply(proxy.api,{
/* Changing the file paths here */
read: 'data/notesApr2013.json',
update: 'data/notesApr2013.json'
})
notesStore.load();
},this,{single:false});
//
console.log(notesStore);
By using the above function, I am trying to update MyStore but it is not happening. When I checked in chrome console the values are changed successfully but not updating or overriding the store even I used notesStore.load(). What could be the problem?
I referred the below links
link1
link2
Answer: The code was working fine. Let me explain my problem: I was showing the contents from the store on a container and initially, the container was filled with some content and the height was fixed. If I even add any content to the container then it will become hidden as the container is with fixed height. Till now, the content was being appended to the default content instead of removing the default content and then adding. That was the actual problem.
That should work without any problem, hence you have a error at any other point. Please take a look at the console in this JSFiddle. In here's the test-code I used
Ext.define('MyApp.model.Note',{extend:'Ext.data.Model'});
Ext.define('MyApp.store.MyStore', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Note',
proxy: {
type: 'ajax',
getUrl: function(request) {
console.log('fetched request url');
console.log(this.api[request.action]);
return request.url || this.api[request.action] || this.url;
},
api: {
/* I want to change the following two filepaths */
read: 'data/notesMar2013.json',
update: 'data/notesMar2013.json'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
}
});
var store = Ext.create('MyApp.store.MyStore');
console.log('The origin API');
console.log(store.getProxy().api);
store.load();
var proxy = store.getProxy();
var newApi = {read: 'data/2013.json', update: 'data/2013.json' };
Ext.apply(proxy.api,newApi);
console.log('The changed API');
console.log(store.getProxy().api);
store.load();
I have a store APP.store.Posts that I want to instantiate 3 different times. They will all hold the same type of data, but will be using different parameters when reloading, paging, etc. In a controller, I do this in the onLaunch function.
onLaunch: function() {
Ext.create('APP.store.Posts',{
storeId: 'unclassifiedPosts'
});
Ext.create('APP.store.Posts',{
storeId: 'positivePosts'
});
Ext.create('APP.store.Posts',{
storeId: 'negativePosts'
});
},
Then later, in the beforerender listener methods I created on the controller, I do this:
beforeRenderPostsGrid: function(grid) {
var store = Ext.getStore('unclassifiedPosts');
store.load();
},
beforeRenderPositivePostsGrid: function(grid) {
var store = Ext.getStore('positivePosts');
store.getProxy().extraParams = {'some_param' : 'some_value'};
store.load();
var checkOtherStore = Ext.getStore('unclassifiedPosts'); //THIS STORE NOW HAS SAME PARAMS AS positivePosts STORE
},
The problem is, whichever beforerrender grid is called last, all 3 stores have those parameters. So the initial load is fine, but if I do any refresh, paging, etc. They all show the same data b/c the proxies for each store have identical extraParams somehow.
From what I understood, the storeId parameter was supposed to make my store unique, so am I missing a step?
I ran into this same problem. My store instances were unique, they each got the same proxy for some reason though. The only way I found to solve this was to include the proxy config when I created the store. The full proxy config had to be included though, here was the actual code:
missingStore = Ext.create('ST.store.Attendance', {
storeId: 'Missing_Attendance',
proxy: {
type: 'ajax',
url: 'query',
extraParams: {
resource: 'Attendance',
parameters: '6'
},
writer: 'pipe'
}
}),
partialStore = Ext.create('ST.store.Attendance', {
storeId: 'Partial_Attendance',
proxy: {
type: 'ajax',
url: 'query',
extraParams: {
resource: 'Attendance',
parameters: '5'
},
writer: 'pipe'
}
}),
attendedStore = Ext.create('ST.store.Attendance', {
storeId: 'Attended_Attendance',
proxy: {
type: 'ajax',
url: 'query',
extraParams: {
resource: 'Attendance',
parameters: '4'
},
writer: 'pipe'
}
}),
I am using following code:
var genres1 = new Ext.data.Store({
reader: new Ext.data.JsonReader({
fields: ['pincode','place_name'],
root: 'rows'
}),
proxy: new Ext.data.HttpProxy({
url: 'pointalong.php',
method: 'GET'
})
});
but i want to pass 3 parameters to my php file. how should i proccess? and also how would i get at php file.
There are two possibilities. The first one is to use store baseParams config:
var genres1 = new Ext.data.Store({
baseParams: {
param1: 'value1',
param2: 'value2'
},
// ...
The second one is to send them when you are using load method:
genres1.load({params: {param2: 'anotherValue'}});
Note: params will override any baseParams of the same name
So if you setup store with baseParams like in example above and then use load with params the store will request ...?param1=value1¶m2=anotherValue.
... and also how would i get at php file
As usual variable passed via the URL parameters - using $_GET:
$param1 = $_GET['param1'];
I use this and it works perfectly
Ext.define('store.odon.DiagnosticoStore', {
extend : 'Ext.data.Store',
model : 'model.odont.DiagnosticoModel',
proxy: {
type: 'ajax',
api: {
create: CONTEXT_PATH + '/mvc/odona/crear',
read: CONTEXT_PATH + '/mvc/odon/lista',
update: CONTEXT_PATH + '/mvc/odon/update',
destroy: CONTEXT_PATH + '/mvc/odon/delete'
},
reader: {
type: 'json',
root: 'diagnosticos',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
root: 'diagnosticos'
}
}
});
the parameter is assigned to load the store
var storeDiagnostico= getStore(); // Ext.create('store.odon.DiagnosticoStore');
storeDiagnostico.getProxy().setExtraParam("idOdontologia", value);
storeDiagnostico.load();
If the value of the parameter may change (for example, if it comes from another form field), then the most reliable way is to apply the proxy parameter before the load event each time the store loads, as follows:
Ext.create('Ext.data.Store', {
...
listeners:{
beforeload: function(store){
var filterText = Ext.getCmp('filterText').value;
store.getProxy().setExtraParam("filterText", filterText);
}
},