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

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.

Related

Unique AngularFire calls in Angular template functions

I'm using AngularFire and have an ng-repeat list with items that contain data specific to the "author" of that item (multiple users can add to the list), such as name, location, etc. I'm not writing that data into the array being iterated over by ng-repeat since it could change in the future. Instead, that author-specific data is store in a different location so the goal is that if the author changes their information, all of it is reflected in the list.
For a contrived example, imagine I'm iterating over a list of books from different authors. That list will contain the book-specific data (such as title, publish date, etc.) but I will also want to display the author's information in the list. Instead of including the author's information directly within the book data, I want to simply reference that author ID, and pull in whatever data is in their profile so if they change their name, it'll reflect the changes in all of their book listings.
That means I'm left to make async calls to Firebase to retrieve that information for each list item via a template function, such as {{getAuthorName(authorId)}}. The only problem is that they're async calls and the template function evaluates before the data is available.
I've looked into how to accomplish but have yet to find a solution that accommodates what I need. The answers here seem close, but they appear to no longer work in Angular >= 1.2.0 and they don't account for having to return different data for each template function call.
Update
Here is a JSFiddle with what I have now. I've made some progress, but all that's being returned now is the promise object as expected. I'm not sure how to implement .then in this scenario to get the actual value.
Any help would be great.
You can make use of $firebaseObject and then store that in an object to make sure it doesn't get hit again. like so:
var authors = {};
$scope.getAuthorName = function(authorId){
if(!authors[authorId]){
var authorRef = new Firebase(fburl + "/authors/" + authorId);
authors[authorId] = $firebaseObject(authorRef);
}
return authors[authorId];
};
You can see the working fiddle here: http://jsfiddle.net/0rcdpq47/

ExtJs select component by id starting with a string

i need to create a component dynamically by a button click. My restrictions are:
It's going to has an Id starts with a fixed string like 'myComp_' and followed by a random number
At any time there will be only one component that has an id starts with 'myComp_xxx'
So before creating the component i have to check if there's any created before and remove it... My problem starts here. Ext.getCmp() wants the specific id. But i only have that fixed string : myComp_...
Is there any way to get the component created before???
Thanks in advance and sorry about my English.
For ExtJs 4.X use Ext.ComponentQuery.query('*[id^=myComp_xxx]');
For ExtJs 3.X you can either use the following
var el = Ext.query('*[id^=myComp_xxx]');
var cmp = Ext.getCmp(el.id);
Or (this one i haven't tried personally, but i think it should work) if the component is a child of a component that you can access, then:
var el = parentComp.find("action","btn");
and set a property called action : btn in the button config.
I think what you are looking for is DomQuery.
Ex:
Ext.query("*[id^=myComp_xxx]")
You need to use this: Ext.getCmp(id)
Ext.getCmp("myComp_xxx");
Sounds like you should be using the normal component query stuff - in general it is not a good idea to use id. You can query by xtype and by itemId (which you can assign manually).
The following
Ext.ComponentQuery.query('grid form');
would find all things with xtype grid that have forms inside them somewhere.
Ext.ComponentQuery.query('grid #okButton');
whereas the # here is saying look for grids that have something with itemId 'okButton' in them.
You can nest this to whatever level you need and use other operators to be more specific and as someone else has rightly pointed out you can use up and down on components to do this relative to the current component. Its worth noting that rather than getting an array back with all the results you just get the first one when you use up and down.
See the documentation for more information this.
Also see point 6 on this list of bad practices to avoid for more of the why
Another alternative if you know 'where' your component is going to be created is to use the up()/down() methods.
E.g. if you have a button and want to get the form it's contained within inside a click handler you can do something like this:
function myClickHandler(btn) {
var form = btn.up('form');
//do something with form
}

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/

ExtJS Store/Grid reset

I have a button that when clicked, will create a JSONstore using a url provided. The store is then loaded into a grid. If the button is clicked again, it adds all the information again (so it is listed twice). I want it so that when the user clicks the button, it clears the store/grid and then adds everything.
Any ideas on how to accomplish this?
Thanks,
EDIT
ExtJS 3
datasetStore.removeAll();
datasetStore.loadData(datasetsArray);
It will be useful to see some code examples (and extjs version), but you can simply use loadRecords method (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.JsonStore-method-loadRecords):
grid.store.loadRecords([array of your new records here], {addRecords: false});
{addRecords: false} indicates that existing records will be removed first.
for ExtJs4: simply doe store.loadRecords([ array ]). In version 4.2.2 the store.proxy has NO clear() method so that doesn't work (was proposed in other examples elsewhere...)
If you want to to totally clear store and proxy, pass an empty array. This is handy because in some cases you want to clear the store and removeAll only moves the data to an array managed internally in the store so when later doing a sync on a gridStore which shows only 1 record, you may see your controller flooded with a bunch of records marked for removal!!

Ext JS ComboBox Dynamic Behaviour

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!!

Resources