Ext JS ComboBox Dynamic Behaviour - combobox

I am trying to load/show completely different set of values in a combobox(this one resides as a editor within an EditorGridPanel) based on the valueField of another combobox(this one resides outside the grid in top bar). I have already seen a tutorial(http://www.extjs.com/learn/Tutorial%3ALinked%5FCombos%5FTutorial%5Ffor%5FExt%5F2) wherein ALL the values for the secondary object are stored locally and then filtered however, I have already created a link which will supply me with json data based on the valuefield, so I would like to use this url to keep the code efficient.
I have also tried to refresh the datastore but its simply not being reflected on the combobox.
Please advise
Thanks

Found the solution, loading values from a url is straightforward.. if you want to manipulate the query(like I wanted), you would have to strip url off the dynamic parameters and assign them to baseParams of the store and then call store.load()
It worked for me!!

Related

$scope.gridOptions.api.SelectIndex doesn't work with datasource

I'm using the server side pagination and filtering example with angularjs.
On loading the data in grid, I would like to programmatically set the first row.
However below method does not work if the grid data has been set using data source.
$scope.gridOptions.api.selectIndex
doesn't work with datasource.
It only works after using the $scope.gridOptions.api.setDataSource
I've also opened an issue in github. Below is the link:
https://github.com/ceolter/ag-grid/issues/601
Please help in resolving this issue.
This is to be expected.
The datasource is the object that will provide your server's data.
As long the datasource is not loaded and did not load the 1st datas you can't use selectIndex method since there is nothing to select.
As a workaround i add myself a custom option in gridOptions where you can provide what you want to select at the 1st loading and select them once my data are loaded the 1st time in my datasource. I add another callback to be able to compare datas and another when the data is not found.
If you want something simplier you can pass to your datasource a promise that will be resolved once the 1st data get loaded (resolve it after call params.successCallback(data) !)
Note : the callback params.successCallback(data) to send the new data to the grid from the datasource must be called before using selectIndex whatever the solution you use.

How can I bind a directive to a column cell in angular-ui-grid?

First, this is what I'm trying to do: I am using ngResource to grab an array of data from an API and setting the ui-grid's data to the array. One of the columns is an ID that has no meaning to the user. I would like to use another API to look up the meaning of that ID and get the human-friendly result of that. Before using ui-grid, I was simply using a directive that took that ID and set the element's text as the return result from the secondary API.
I know that it's possible to bind a column dynamically to data in that row's object, having looked at: http://ui-grid.info/docs/#/tutorial/106_binding, but it appears that this is limited to binding to the data in $scope or in the grid's data (such as in the example). I also see that there is a cellClass options method which allows conditional setting of the cell's class. However, I do not see any good options for intercepting the element in the cell and replacing it with a result of my choosing.
I am wondering what the best way to do this is. I've tried using ngResource's transformResponse but the array is too large to make a blocking event. As well, I've tried to inject the html for the directive into the field's return function, i.e. field: transformToHtml() but only the raw string shows, not the rendered html.

Is there a way I can Pass xml ,start,limit in store.load?

Im new to extjs,I need to pass a xml(xml data thats loading grid),and start value,and limit.How can I do this in 'store.load'???
I actually need to display data in grid,with current pagenumber,and with limit.
Is there a way???plz help
You just need to setup a page size and then use store.loadPage() method.
Bear in mind there is a nice paging toolbar for data grid integrated in ExtJS

Can extjs Control/toggle groupField data?

here is the example edited by crop grid:
1st i view like a normal grid like this image
http://imageshack.us/f/836/groupcontrollingb4.png/
then i create a check box name as "Cuisine:American" and check it to reload become image like this
http://imageshack.us/f/803/gridcontrollingafter.png/
the group data "Cuisine:American" can be group it and expand
then other data still remain the normal grid view
Does any one know a example or possibility for controlling the groupView like in the example i've shown ?
Hope u all can understand my question
thankz.
It's harder than it should be, because ext is not calling Ext.util.Grouper.getGroupString method. I've managed to bypass this. Here is working sample: http://jsfiddle.net/bP7Y2/
I am basing on Grouped Grid Example from Ext JS site. I've created CuisineGrouper which is extending Ext.util.Grouper. There are 2 important methods: getGroupString which returns gruping string and sorterFn which sorts in that way that grupped elements are on the top. For example when there is grouping by 'Cuisine:American' getGroupString returns 'American' or '' depending on cuisine value.
Another important bit is overriden getGroupString method on Restaurants store, so now it calls Ext.util.Grouper.getGroupString.
Last thing I've modified is groupHeaderTpl of groupingFeature.
(Update) It's possible to hide Others grouping header with some hacks. Example: http://jsfiddle.net/bP7Y2/1/

How to get a value from a combobox in a form after the field is populated by the database

I have a formPanel with two of the form items as comboboxes with their stores populated by the database. The value from comboBoxA needs to be used to get the value for comboBoxB however comboBoxA.getValue() (as well as getRawValue()) are returning undefined.
storeA.load();
var comboBoxA = Ext.getCmp(comboBoxAID);
storeB.baseParams.UserID = comboBoxA.getValue();
storeB.load();
As noted in the docs, store loading is asynchronous, so you have to do your additional processing within the appropriate callback:
storeA.on('load', function(){
var comboBoxA = Ext.getCmp(comboBoxAID);
storeB.baseParams.UserID = comboBoxA.getValue();
storeB.load();
});
storeA.load();
Loading a ComboBoxes store does not actually select a value. Try making a selection first (or loading a record into the form, etc). It sounds like your trying to link the 2 combos. If thats the case, search around for a tutorial, there are few out there. This should get you started, Linked Combos.
You might want to try this. It might be exactly what you are looking for. It also has a demo on the same page. The page is in german but the demo is predictable and the code is in english so test this.

Resources