How I'll get all the parameters that will be send when store.load() is run? I mean, I will not run store.load() but I want to get all request parameters. How I'll do it? (This is a grid's store)
Building off how the source code produces the params, here is a function that will produce the desired results, just know that if you were to updated Extjs beyond 4.1 that it may stop working by the nature of the background code changing:
function getParamsObject(store){
var options = {
groupers: store.groupers.items,
page: store.currentPage,
start: (store.currentPage - 1) * store.pageSize,
limit: store.pageSize,
addRecords: false,
action: 'read',
filters: store.filters.items,
sorters: store.getSorters()
};
var operation = new Ext.data.Operation(options);
var fakeRequest = store.getProxy().buildRequest(operation);
var params = fakeRequest.params;
return params;
}
Once you have loaded your store you can find parameters as below:
store.proxy.extraParams
Related
Extjs 4.2.2
I have a store with an ajax proxy that I don't autoload. It's attached to a grid and the grid has a paging toolbar.
I allow the user to choose some options in a form then I call store.load( { params:{some params} } );. I get the results back correctly from the server.
If the user uses the paging toolbar a new request is made, without the params that were used to make the previous request.
Is there a way to make the store load data as expected?
I know I could manually set the extraParams on the proxy and then call store.load() with no params. And then when Paging Toolbar makes a request it will use those extraParams.
I have also overridden store.loadPage() to rebuild the request/params, and set the correct start size.
What's the correct way to do this? To me the expected functionality is if I've changed the query and I want the next page of those results, I should get the next page of those results. Not get the next page of some other query/result.
Example store:
Ext.create( 'Ext.data.Store',{
storeId:'some id',
model:'some model',
autoLoad:false,
proxy:{
type:'ajax',
url:'some url',
//extraParams: {sticky params},
limitParam:'rows',
pageParam:undefined,
startParam:'start'
},
loadPage:function( page, options ){
//Build the current query
var o = /*biuld params object*/;
//Update the page size
o.start = (page - 1) * this.pageSize;
if( options ){
options.params = o;
}else{
options = {
params:o
};
}
//Pass it along to the parent loadPage.
this.callParent( [page, options] );
}
});
Actually I guess I was wrong, I can't just set extraParams manually and have the paging work.
They use Ext.applyif, which doesn't overwrite properties if they are already exist. So from the source
ext-all-debug.js
buildRequest: function(operation) {
var me = this,
params = operation.params = Ext.apply({}, operation.params, me.extraParams),
request;
Ext.applyIf(params, me.getParams(operation));
if (operation.id !== undefined && params[me.idParam] === undefined) {
params[me.idParam] = operation.id;
}
...
This gets the paging information.
me.getParams(operation)
And my params object has the paging information on it. So I guess what I have to do is not set the initial paging information myself, and let Ext handle it.
So I can't set the initial paging information manually. I would have to use the store to set the page.
I want to fire fetch method on Backbone Collection which would pass an Id parameter similar to what happens in Model.fetch(id)
E.g.
var someFoo= new Foo({id: '1234'});// Where Foo is a Backbone Model
someFoo.fetch();
My Backbone collection:-
var tasks = backbone.Collection.extend({
model: taskModel,
url: '/MyController/GetTasks',
initialize: function () {
return this;
}
});
In my View when I try to fetch data:-
var _dummyId = 10; //
// Tried approach 1 && It calls an api without any `id` parameter, so I get 500 (Internal Server Error).
this.collection.fetch(_dummyId);
// Tried approach 2 && which fires API call passing Id, but just after that
// I am getting error as below:- Uncaught TypeError: object is not a function
this.collection.fetch({
data: {
id: _dummyId
}
});
Found it very late : To cut short the above story I want something like Get /collection/id in backbone.
Thank you for your answers, finally I got the solution from Backbone.js collection options.
Apologies that I couldn't explain the question properly while for same requirement others have done brilliantly and smartly.
Solution : I can have something like :-
var Messages = Backbone.Collection.extend({
initialize: function(models, options) {
this.id = options.id;
},
url: function() {
return '/messages/' + this.id;
},
model: Message,
});
var collection = new Messages([], { id: 2 });
collection.fetch();
Thanks to nrabinowitz. Link to the Answer
As mentioned by Matt Ball, the question doesn't make sense: either you call fetch() on a Collection to retrieve all the Models from the Server, or you call fetch() on a Model with an ID to retrieve only this one.
Now, if for some reason you'd need to pass extra parameters to a Collection.fetch() (such as paging information), you could always add a 'data' key in your options object, and it may happen that one of this key be an id (+add option to add this fetched model rather than replace the collection with just one model)... but that would be a very round-about way of fetching a model. The expected way is to create a new Model with the id and fetch it:
this.collection = new taskCollection();
newTask = this.collection.add({id: 15002});
newTask.fetch();
In your code however, I don't see where the ID is coming from, so I am wondering what did you expect to be in the 'ID' parameter that you wanted the collection.fetch() to send?
I need to make a json string for grid table field list.and need to send them java back end.
I have to send
id,
name,
listOfProjects,
listOfProjects contains following list,this list may contains number of items.
prjId,
prjName
Please tell me how to create a json string ?
I tried with following code sample
var dataStr = new Object();
dataStr.id=myId;
dataStr.name="myName";
dataStr.plist = new Array();
dataStr.plist[0].prjId=1stId;
dataStr.plist[0].prjName="1stName";
dataStr.plist[1].prjId=2ndId;
dataStr.plist[1].prjName="2ndName";
dataStr.plist[2].prjId=3rdId;
dataStr.plist[2].prjName="3rdName";
var data = Ext.JSON.encode(dataStr);
Ext.Ajax.request({
url : '/E2EAT/authentication/userdetails.json',
method : "GET",
headers: {
'Content-Type': 'application/json'
},
params : 'data=' + data ,
useDefaultXhrHeader : false,
withCredentials: true,
});
I can use the code above, but I need to iterate grid
1 . Please let me know how can I iterate a grid with sencha?
2 . What's the best method to make json string and send back end?
Ext gives you two loop functions: Ext.each, and Ext.iterate for objects.
To iterate over columns of a grid, you can use the Ext.grid.Panel#columns array property, containing Columns instances. For example, in order to build a list of visible columns, you can do:
var visibleColumns = [];
Ext.each(grid.columns, function(column) {
// Only columns bound to a field (exludes actions colutions, etc.)
if (!Ext.isEmpty(column.dataIndex)) {
if (column.isVisible()) {
visibleColumns.push({
field: column.dataIndex
,label: column.text
});
}
}
});
A grid doesn't necessarily have a column for every field of the underlying store, and it can have extra columns for custom rendering, actions, numbering, selection, etc. So, you may want to iterate over the fields of the store, instead of the grid columns. In this case, we'd be working we've Ext.data.Field objects:
// Get a ref to the store's model. Stores always have models; even
// if none is specified explicitly, one is created implicitly.
var model = grid.getStore().model;
var fieldNames = [];
Ext.each(model.getFields(), function(field) {
fieldNames.push(field.name);
});
Finally, you turn your data into JSON using Ext.encode. Also, you don't have to build the URL query (params) yourself, which would give more flexibility to other parts of your code that may need to add some params:
Ext.Ajax.request({
...
params: {
data: Ext.encode(rawData)
}
});
For a POST request, you can also use the jsonData property, to save yourself the json encoding:
Ext.Ajax.request({
...
jsonData: {
data: rawData
}
});
In many cases, though, it will be preferable to use a store with an appropriately configured data proxy and writer rather than a direct AJAX request.
I have some data that I'm getting from the server that depending on the situation may bring different fields, so what I have is this:
//This is the way i'm attaching the newly created template to the view
//Still no success
function processDataMethod(response){
//some processing here...
var details = Ext.widget('details');
details.config.itemTpl = new Ext.XTemplate(tplFields);
}
Ext.Ajax.request({
url: '...',
...,
success: function (response, request) {
var combinedData = processDataMethod(response);
operation.setResultSet(Ext.create('Ext.data.ResultSet', {
records: combinedData,
total: combinedData.length
}));
operation.setSuccessful();
operation.setCompleted();
if (typeof callback == "function") {
callback.call(scope || that, operation);
currentList.up().push(Ext.widget('details'));
}
}
});
Any help is appreciated, thanks!!
You have to make a distinction between a number of things:
currentList.up() returns a DOM element (Ext.dom.Element). This has no method push().
With Ext.widget('details', config); you can pass a config like {itemTpl: yourTemplate, data: yourData} to create an instance with a custom template and custom data.
To update your component after creation you can always do someWidget.update(data);.
A component can be rendered to an HTML element with the renderTo option.
A component can be appended to existing components in different ways and you can update the whole layout or parts of it in different ways. This is unnecessary if you are rendering to an HTML element.
Does that help you find your problem?
I'm using ExtJS 4 MVC.
Is there a way to reload Store every X seconds?
I'd like to put code somewhere to Controller.
setInterval(function(){
// Use Ext.getStore to reference your store from the controller
var myStore = Ext.getStore('YourStore');
// Pass in an object of the changes you want to be made to the store
myStore.proxy.extraParams = { key:'sencha'}; // replace with your own object
myStore.load();
},3000);
FYI in Extjs this is possible to implement via Ext.util.TaskRunner.
A sample code:
var runner = new Ext.util.TaskRunner(),
clock, updateClock, task;
clock = Ext.getBody().appendChild({
id: 'clock'
});
// Start a simple clock task that updates a div once per second
updateClock = function() {
clock.setHtml(Ext.Date.format(new Date(), 'g:i:s A'));
};
task = runner.start({
run: updateClock,
interval: 1000
});