I have multiple store on my page to load data in extjs grid. I am using a js function to load these store. Based on the search button click event I attach the respective store to the grid. Its working fine. In the load function I have lots of params that I need to send to the backend to fetch the results and show in the grid. Now with pagination in place. Is there anyway that I can add that js function call inside the paging so I can pass those params. Because right now if I click next button in paging nothing is getting returned. since the required parameters are missing to fetch the results. I tried all the given sample on internet but nothing is working.
It would be great if somebody can actually post an example on paging passing parameters or calling js function on next button event.
Any help will be really appreciated. Thank you.
below is the load store function that I want to call on my next event on pagination.
function loadStore(prodId, productsName, doctype, criteria, filename, titlename) {
store.removeAll();
store.load({
params: {
// specify params for the first page load if using paging
start: 0,
limit: g_perPage,
ajax: "true",
productId: prodId,
ProductsNameArr: productsName,
assetsname: doctype,
criterianame: criteria,
newfilename: filename,
newtitlename: titlename
}
});
}
http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.Store-property-baseParams
As Nigel said above the beforeload event is what you are after, see below for an example:
store.on('beforeload',function(store,opts) {
store.baseParams = { param1: 'foo', param2: 'bar', ... }
});
baseParams does not seem particularly useful because it sends static values, not the latest search criteria. Getting the dynamic search criteria is tricky too because the grid (i.e. the form fields) may not exist yet.
The Ext JS devs seem to have consistently mistaken docstring fragments for real documentation making for quite a hellish learning curve with their product. A few real examples here would go a long way.
Related
Trying to figure out how to pass a value in service from one direction to another? I'm building a small search app using Elasticsearch and AngularJS. It has 2 pages, home and results. On home, only functionality is autocomplete (using AngularJS UI Bootstrap Typeahead), on results page, display results and search box. I'm trying to use a custom directive to do this.
I basically have everything working EXCEPT, that when on the homepage, pressing the search button just goes to the results page, no search processing is done. AND everything works on the results page, autocomplete and search functions...
I recently put the ng-model(searchTerms) into its own service, but I DI that service into both my controllers. The only thing I can think of is that somehow my ng-model ISN'T getting passed to the directive? I'm stumped... still learning AngularJS directives.
Basically all the service does for searchTerms is
this.searchTerms = null;
Any ideas?
UPDATE I'm on v1.47 and using ngRoute for now.
UPDATE 2 I have 2 way data binding working now. So when a query is submitted on the home page, the searchTerms variable now displays on the results page. However, there is still no results being displayed and no processing being performed. So just 2 way data binding is working.
UPDATE 3
'use strict';
angular.module('searchengine.query-service', [])
.service('queryService', function() {
var searchTerms;
this.searchTerms = null;
});
You can consider these 2 pages 'components', in the more update to date Angular jargon, and you want to navigate between them, passing your search term as a variable.
In your search page, you will need some code along the lines of
$router.navigate(['ResultsPage', {searchTerm: yourSearchTermGoesHere}]);
When the results component activates, it should check for the existence of a search term and perform whatever search processing is done when the search term subsequently changes.
Router docs - https://docs.angularjs.org/guide/component-router. Have a look specifically at the 'Extra Parameters' and 'Lifecycle hooks' section
I'm using the kendo MultiSelect with odata paging and using the angularJS integration. Populating the data from scratch works great. When I want to re-populate the data from initial data then I seem to have a problem.
Cause of the problem:
The data only gets populate from the initial or previous dataset. So, if I the paging size is 10 then only products that exist in the first page will be displayed as normal. All product that don't fall within the first page will just not be displayed.
Possible workarounds:
Increase the page size. I have used this on other pages where the results are quite small. However this is not a realistic work around as we are expecting much bigger datasets in the future ( hence using odata in the first place)
Was thinking we could possibly do some sort of initial sorting. However this could also be slow and could still be a problem if there were more items selected than exist in the first page.
Ideal solution
Is there a way to tell kendo component to load all data based on current value? This will then build the required odata call and populate the component.
Example of the current issue:
http://dojo.telerik.com/ODaLe/2
I worked 2-4 hours to find a solution for this. Dunno if yall would like it, but it might help somebody, so I'd type it here. Following are the steps:
Step 1: Create the data source
First, setup the dataSource object which you would be using for reading remote data (for offline data, improvise by reading the API).
var dataSource = new kendo.data.DataSource({
dataType: "jsonp",
transport: {
read: {
url: options.source,
type: 'POST'
},
},
serverFiltering: true
});
Step 2: Load the selected items
This can be tricky as you need to have the selected item IDs on the client side. For me, I did it by adding a data-options-selected="1;3;9" attribute to my select element. Later, in my JavaScript, I split this attribute by ";" and retrieve an array of selected IDs. Lets say these values are in var valuesArray;
Once we have an array of selected IDs, we need to read them from the data-source. In my case, it was remote, so I ran a dataSource.read() with filters as under:
dataSource.read({
filter: {
logic: 'and',
filters: [
{
field: options.dataValueField,
operator: 'equals',
value: options.value
}
]
}
});
On the server side, this should return an array containing the items having the given identifiers. Thus, we now have those items on the client-side as well.
Step 3: Set values for the widget
Now that the value related data is loaded, we can set the values for the widget using the values() method. Here, $el is the jQuery object representing the select element which I was using for multiSelect.
var oWidget = $el.data('kendoMultiSelect');
oWidget.value(valuesArray);
That's it! One multiselect widget pre-loaded with values, ready to rock and roll. Served my purpose. Dunno if any short-cuts exist.
When using Kendo with Angular, you want to use the k-rebind attribute to refresh the pulldown options + update the picker with the values in your $scope.countries object when it changes.
If you want like the picker to update when $scope.products changes as well, you can initialize the picker using a k-options attr pointed to an object in your controller, and set the k-rebind to that object.
This kendo tutorial provides a useful example, also using odata paging.
http://docs.telerik.com/kendo-ui/web/multiselect/how-to/AngularJS/pre-select-items
For some reason when getData uses angular resource to bring the data it is being called twice, causing the resource to do it REST request twice too <--- bad...
Any idea why and how to solve it?
Here a working testcase/plunker example that recreates this scenario (look at the browser console - "getData being called...." displayed twice ) b.t.w as you can see I'm not really using the resource to bring real data, just to demonstrate the scenario, In my real app I do use the resource to bring real data and its being called twice just like in this example,
Thanks ahead
After looking into the src of the ng-table I noticed the following
$scope.$watch('params.$params', function(params) {
$scope.params.settings().$scope = $scope;
$scope.params.reload();
}, true);
Which means that the tables calls it 'getData' on count/filter/group/groupBy/page/sorting
which explains the behavior I was seeing.
When you call params.count(...) you ask ng-table to refresh data as you change page size. That's why you have two get-data calls.
If you don't want to have paging, then remove calls params.count and params.total.
If you need paging, then set page size and do not change it in getData.
This happened to me with a weird reason. getData get called twice on init (first load) only. changing page or sorting didn't call getData twice. The reason was that at init the ng-table directive was hidden in the template file.
Thank #Alexander Vasilyev. I understood my problem as you said. I want to explain a litte more here. In fact, the object "params" is the object configuration the table ng-table, then if "params" changed (ex: count or a property of the object), ng-table will invoke function getData() to refresh table.
In my case, I want to get information in the object "params" and change it but I dont want to refresh ng-table. I did it by cloning object "params" et work his object copied. Clone the object in JS with jQuery :
var resultParams = jQuery.extend(true, {}, params.$params);
And then, I will work on the object resultParams instead of "params" original.
In Extjs 3.4 I have a fairly large form that is being populated from an ajax call via someForm.getForm().load({url: someplace, etc}) which is working flawlessly. The problem I can't seem to get around though, is that there are several comboboxes and checkboxes that determine if another field is visible and allowBlank.
As per the answer on a similar question I have tried using the actioncomplete event on the form but the fields do not have values at that point. I've also tried using the success event of the load() call but get the same issue.
Is there any other ways of getting this functionality from the form.load() call?
Edit - here is my load call:
var panel = Ext.getCmp('someFormID');
panel.getForm().load({
method: 'GET',
url: 'ajax_get_request.aspx?id=' + id,
success: function (form) {
// This will error: object is null or undefined
alert(form.findField('fieldID').getValue());
}
});
I'm relatively new to Extjs so maybe I'm just missing something here...
Not sure why hooking into success callback of Ext.form.BasicForm.load() fails for you, but I can propose an alternative approach.
I usually use explicit Ext.Ajax.request() call to load data into Ext.data.Record. Then in request()'s success callback I load data into form using Ext.form.BasicForm.loadRecord(). If you need to act upon loaded values, you can do it in the same callback.
I do it this way, because I like to have original values from the server stored somewhere aside.
I wanted to implement an ajax based autocomplete feature for my searchbox, and i came across, implementing autocomplete in my website.
Now what i wanted to know was that i attach a datasource to the control, but so far i have seen that the datasource requires a textbase schema, can't i like it to a query, where it control calls the query and it returns the records on which the filter of the control must apply.
Hope my question is clear
How do you think you can link it to a query on client-side??
You can link it to an AJAX call to the server, which returns the option-list.
The control's filter will do the rest filtering on that option-list.
The best practice would be, to fire an AJAX on page load, to a server function, which will query to the database (MySQL in your case) and fetch the options-list in json format. Assign the option-list to as an input for autocomplete. (Its obviously better than to fire a ajax-request everytime user starts to type-in the search box.)
If you use jquery it can be something like this.
$(function(){ //runs on page load
$.ajax({
type: "POST",
url: "/searchlist/", //server function that returns the search list
data: '',
dataType: "json",
success: function(json){
search_choices = json.list; // search option list
$("input#searchbox").autocomplete(search_choices, {
max: 4,
scroll: false,
autoFill: true,
multiple: true,
matchContains: true,
multipleSeparator: " ",
width: 180
});
}
});
});
I can provide you with example in libraries other than jquery, but i hope this can make you find your way.
Edit: No, your database needn't to have sorted choices. It is your server function, that should be doing all the sorting. Use,
autocomplete( url_to_server_function, options)
and your server function will get search term (keyword user types in search-box), as get request. Filter your database there, and this is the place where you can hook related words along with the results. Just make a list of everything you want to show as suggestion, and return in serialize json format and let autocomplete to take care of matching and sorting the data.