I am trying to add a listener to a Ext.grid.panel
listeners: {
itemclick:function( grid, record, item, index, event){
alert(index);
var record = grid.getStore().getAt(index);
alert("Edit " + record.get('data'));
alert("Type " + record.get('type'));
}
I suppose to get the index value of the row I clicked. So when I click the row for the first time I get : [object Object] in the alert box with index in it. The second two alerts don't appear at all.
So when I again click the same row. it shows the correct index and then "data" and then " type" in an alert box.
How can I get the right values on the first click only?
When I add your listener to a grid panel of my own, I get the same behavior every time. For example:
4/"Edit undefined"/"Type undefined".
That you are seeing different behaviors depending on if it is the first time you click an item or not likely has something to do with how the grid is created/rendered.
The content of the Object passed as "index" to your listener function might give you a clue. If you log it to the console you'll be able to inspect it. (At least that's how Chrome handles logging of objects).
While this is not a solution to your problem, I hope it helps in your debugging.
Related
I want to be able to change the title of my Side menu command based on the size of a ListProperty which is dynamically updated. I have tried to do this via a changeListener, but i can not get this to work.
Command cmdWishlist = tb.addMaterialCommandToRightSideMenu("Wishlist(" + Shop.getInstance().wishList.size() + ")", FontImage.MATERIAL_FAVORITE, e -> {
....
});
Shop.getInstance().wishList.addChangeListener(pl -> {
tb.revalidate();
});
If however, I open another form, and check the sidemenu, the change that I need is reflecting. How can I get this to work? By the way, I get the desired behavior if i put, say a label on the toolbar and setText("Wishlist(" + Shop.getInstance().wishList.size() + ") in the change listener.
Please point me in right direction
When we add a command to the side menu or a button we extract its values but don't automatically reflect updates as that can cause a potential memory leak by binding commands to components. The workaround is to modify the original underlying component too e.g.:
Button ui = tb.findCommandComponent(cmd);
ui.setText(newLabelForCommand);
it('it should click each of the title elements to reveal its content', function(){
element(by.css('.cardtitle')).click();
});
I have the above lines which work properly and click the first item in the series of 3 with this class. I need to click all 3 items with this class using protractor, how do I do this? (the are all on the same page, very straightforward)
for whats its worth there will be upcoming instances where there may be 2 or 5 items to click all sharing the same class.
thanks!
Loop through the elements and click them one after the other using each() function available in protractor. Here's how -
element.all(by.css('.cardtitle')).each(function(elem){
elem.click();
});
If at all you want to click the elements serially then you need to wait until click is completed resolving its promise. Here's a sample -
element.all(by.css('.cardtitle')).each(function(elem){
elem.click().then(function(){
//If you want perform some operation after click, you can do it here.
browser.sleep(1000);
});
});
Hope this helps.
You can get a collection of items and click them individually.
eg.
var cards = element.all(by.css('.cardtitle'));
expect(cards.length).toBe(3);
cards.get(0).click();
cards.get(1).click();
cards.get(2).click();
I have a table of rows where are dynamically added, but for some reason the on() event doesn't seem to fire when I change the value of a select.
For simplicity, I wrote the following jsFiddle. This is a VERY simplistic example of what I am doing. I do have to note that I was unable to verify if the jsFiddle failed the same way in IE7 because jsFiddle does not seem to work in IE7 at all.
The basics of my code are this...
First, the page loads with 1 or more of these rows, which represent a complex "subform" to be posted to Spring MVC. The subform has a group of 5 SELECT tags that have an event handler attached at the top TABLE as such:
$('#parentTable').on('change', 'div.additional div[class^="additional"] select', function() {
// ...enable/disable siblings according to value
}
At the bottom of the table is an Add button. When the user clicks it, I take the last visible row, clone it, use regex to fix the index on the name/id, and set all the fields blank and disables except one field, which is used to do a lookup. This all has the appearance of working.
The user enters a value in the lookup field, clicks Lookup, which performs an AJAX call, filling in the subform then calling the change on the selects to set their default state like so:
$subTable.find(':input:not(:button)').change();
This fires the above on() as expected. However, if I physically click on the resulting SELECTs and change their values the on() event handler is not called.
I have verified that the resulting cloned table row looks/smells/feels correct, at least from using IE8's Developer Tools (I have IE8 in IE7 compatibility mode for testing, because IE7 has VERY limited testing and the problem seems to be present there too). When I run this in Chrome it works perfectly fine, however I am aware the clone is technically working differently.
Any help would be appreciated.
Update
I tried swapping the selector to drop the class attr as suggested below:
$('#parentTable').on('change', 'div.additional div select', function() {
// ...enable/disable siblings according to value
}
And I tried all caps like the referenced post:
$('#parentTable').on('change', 'div.additional div[class^="ADDITIONAL"] select', function() {
// ...enable/disable siblings according to value
}
The first worked the same way, the second did nothing at all (disabled all on() change handling).
Will continue to play with this until I get it working. There has to be something simple going wrong here.
Update 2
I tried adding a class to all the `SELECT`s, and added the following two:
$('select.addedClass').on('change', function() {
alert("Select change:" + $(this).val());
});
$('#parentTable').on('change', 'select.addedClass', function() {
alert("Select change 2:" + $(this).val());
});
Here is the process I performed:
Reloaded page, both alerts fire for the single row there
Added a row
Performed AJAX lookup, which calls $addedTable.find(':input:not(:button)').change(); as described above, both events fire
Change the value of one of the selects, neither alert fires.
I would expect the first to fail, since the event listener is connected directly to the SELECT and not a higher level parent, but the second one fails the same way. So, in the Developer Tools, I tried to run the following:
$('#order.itemList1.additionalLine1').change()
Which is the ID of one of the selects I added, and still nothing fired. It's as if the event handler is ignoring all added SELECTs.
To make sure the select was working on the on(), I did this in the console after I added the new row:
$('#parentTable').find('div.additional div[class^="additional"] select').each(function() {
alert($(this).attr('name') + '(' + $(this).prop('id') + ')' + ' : ' + $(this).val());
});
Update 3
I ended up putting in a horrible hack that, for IE7 only, drops and re-adds the change handler directly on the SELECTs. It's ugly, but I have to support IE7, so...
I am leaving this open to see if anyone has a better solution, or might know why it's not working.
The problem isn't the change event, or the delegation on select elements.
It's the attribute selector:
div[class^="additional"]
IE7 and below don't do attribute selectors.
I've done a bit of searching and a few people seem to think this can be solved using case-specific syntax.
Guys, I'm quite new to extJS and I would like your help.
I have this Grid.Panel with listeners, I don't know if i got it right. Anyway, I got it to print out its properties but I cant get the data. Here is what the console printed out.
Object { internalId=, raw={...}, data={...}, more...}
after clicking it:
The "data" encircled in red. How do get those information? I believe inside "data" are the information to when I clicked the certain row.
You can add a load listener on the grid store as suggested by #sra and iterate over records to perform another operation.
gridStore().load({
callback : function(records, operation, success) {
//Iterate over each record and get data from record
var name = records[0].get('name');
}});
I have a view that creates a sub-view per item in the list. Generically let's call them ListView and ListItemView. I have attached an event as follows on ListItemView:
events: {
"click .remove": "removeItem"
}
I have template-generated html for ListItemView that is approximately like the following (swapped lb/rb for {/} so you can see the "illegal" html):
{div class="entry" data-id="this_list_item_id"}
SOME STUFF HERE
{div class="meta"}
{a class="remove" href="javascript:;"}[x]{/a}
{/div}
{/div}
The problem is, when the click on any of the [x]'s, ALL of the ListItemViews trigger their removeItem function. If I have it go off of this model's id, then I drop all the items on the page. If I have it go off the clicked item's parent's parent element to grab the data-id, I get a delete for EACH ListItemView instance. Is there a way to create an instance-specific event that would only trigger a single removeItem?
If I have ListView hold a single instance of ListItemView and reassign the ListItem model and render for each item in the list it works. I only end up with one action (removeItem) being triggered. The problem is, I have to find the click target's parent's parent to find the data-id attr. Personally, I think the below snippet is rather ugly and want a better way.
var that = $($(el.target).parent()).parent();
Any help anyone gives will be greatly appreciated.
It seems like your events hash is on your ListView.
If it is, then you can move the events hash to ListItemView and your removeItem function can be the following
removeItem: function() {
this.model.collection.remove(this.model);
}
If this isn't the case, can you provide your ListView and ListItemView code so I can look at it.
A wild guess but possible; check that your rendered html is valid. It might be possible that the dom is getting in a tiz due to malformed html