How to pass parameter to Ext.data.Store? - extjs

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&param2=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);
}
},

Related

How to pass json data from controller to view in EXTJS 4.0

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...).

How do I retrieve all data from jsonstore in sencha

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);
}
});

Change the store api from controller in extjs

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();

Using storeId on a Ext.data.Store isn't making unique instances

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'
}
}),

Can't load json(p) cross-domain with Sencha Touch

I'm having a heck of a time trying to load external json into a Sencha Touch app. I can define my data within the app, or with an external json file and all's fine. Then I move my json file to a remove server, change my proxy to type: 'scripttag' to take care of jsonp issues, and then I have issues. When I look at my page resources I see that the json file DID load, but it doesn't populate my list as it does with my local json file.
Using local json file (this works)
var jsonStore = new Ext.data.Store({
model: "Person",
proxy: {
type: 'ajax',
url: 'http://dev.liftstudios.ca/data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
var jsonPanel = {
title: "json",
items: [
{
xtype: 'list',
store: jsonStore,
itemTpl:itemTemplate,
singleSelect: true
}
]
};
Using the same json file, loaded from a remote host.
This loads the file, but doesn't populate the list.
var jsonStore = new Ext.data.Store({
model: "Person",
proxy: {
type: 'scripttag',
url: 'http://www.server.com/data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
var jsonPanel = {
title: "json",
items: [
{
xtype: 'list',
store: jsonStore,
itemTpl:itemTemplate,
singleSelect: true
}
]
};
There's probably something embarrassingly simple that I'm missing here, but I'm not sure what that something is. Any help will be greatly appreciated.
Changing the proxy type to scripttag does not make any sense . If you want to load a scripttag store, you have to implement a callback function as well. If you want do make cross platform ajax calls with the existing json proxy , you can test it on the browser by disabling the web security on chrome.
The cross-domain problem can be solved by starting google chrome from the terminal by this command google-chrome --args --disable-web-security
Check out this link for more information
http://www.senchatouchbits.com/7/cross-domain-ajax-requests.html
Hope it will help...
Use type jsonp for proxy type in the store
var jsonStore = new Ext.data.Store({
model: "Person",
proxy: {
type: 'jsonp',
url: 'http://www.server.com/data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
And Implementing on the server side:
The remote server side needs to be configured to return data in this format. Here are suggestions for how you might achieve this using Java, PHP and ASP.net:
Java:
boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
jsonP = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (jsonP) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (jsonP) {
out.write(");");
}
PHP:
$callback = $_REQUEST['callback'];
// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');
//start output
if ($callback) {
header('Content-Type: text/javascript');
echo $callback . '(' . json_encode($output) . ');';
} else {
header('Content-Type: application/x-json');
echo json_encode($output);
}
ASP.net:
String jsonString = "{success: true}";
String cb = Request.Params.Get("callback");
String responseString = "";
if (!String.IsNullOrEmpty(cb)) {
responseString = cb + "(" + jsonString + ")";
} else {
responseString = jsonString;
}
Response.Write(responseString);
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.JsonP
var jsonStore = new Ext.data.Store({
model: "Person",
proxy: {
type: 'jsonp',
url: 'http://www.server.com/data.json',
reader: {
type: 'json'
}
},
autoLoad: true,
crossDomain: true,
});
crossDomain: true,try this

Resources