I have a UI with several grid components. For some reason, even after it's populated with rows, one of the grid's Load Mask stays visible.
I have to work out why the mask stays after load, but first I was trying to determine the code that would hide the mask.
Here's what I've tried:
Ext.getCmp('callClassAvailableGrid').setLoading(false)
Ext.getCmp('callClassAvailableGrid').unmask()
Ext.getCmp('callClassAvailableGrid').view.unmask()
Ext.getCmp('callClassAvailableGrid').viewConfig.unmask()
None of which hide the mask.
Also of note:
Ext.getCmp('callClassAvailableGrid').store.loading
returns false
How can I hide the Mask on this Grid?
I believe you need to be calling unmask() on the Ext.Element instance for the grid.
mygrid.getEl().unmask()
Found the answer:
Ext.getCmp('callClassAvailableGrid').view.loadMask.hide();
Related
I have a table which contains many rows. Only the nth-oldest rows are visible. The newer rows are hidden and one has got to use a scrollbar to move them into sight.
I have written the following Cypress-statement:
cy.get("span.class1.class2").last().click();
It returns the last row, which is visible, when the view becomes shown. Marked red in the screenshot.
But what I like to have is the very last row in the table. Marked blue.
Is that possible with a simple Cypress-statement?
Or do I have to move the scrollbar down first?
If so: How can I scroll downwards using Cypress?
Get the parent class of that table and you could try using scrollTo()option.
cypress documentation:
https://docs.cypress.io/api/commands/scrollto.html#Syntax
Examples:
cy.scrollTo(0, 500) // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom') // Scroll 'sidebar' to its bottom
There is another option called .scrollIntoView(), but I think in your cases the scrollTo() might help.
From the Flotcharts example: https://www.flotcharts.org/flot/examples/series-toggle/index.html
I'd like to toggle on/off all flot series at once (i.e. Select All / Select None).
Toggling the checkboxes themselves is easy enough:
$('input:checkbox').addAttr('checked'); // Select All
$('input:checkbox').removeAttr('checked'); // Select None
But how can I also trigger the dimensions to change?
Here's a jsfiddle of the flotcharts example:
https://jsfiddle.net/uzc5rqow/
I understand that "dimensions" refers to the axes. In your code, it is simple, you just need to call plotAccordingToChoices. I have forked your fiddle to show how to add all ticks with a button ( https://jsfiddle.net/Lk4oqvm5/ ). In the opposite case, when you uncheck every box, you need to decide which behavior you want. With no data, the graph cannot calculate the dimensions (if you manually uncheck every box, you will see that the last line does not disappear).
I have a formpanel with various fields. The panel has autoScroll.
CompositeField has a SuperBoxSelect based element ( ux - multiple selected tags in form etc) - and a button at the end.
Now the problem is that the compositefield does not resize to fit the increased size of its contents.
It keeps the default size it had on render.
Form is populated from selected grid rows. So data amount can change.
It will fix itself when i resize the whoel formpanel ( split bars on left/top).
I added autoResize to almost everywhere when testing, still nothing.
Is there a way to force the formpanel to reload or render when i add data to it, so it? ( since apparently the height/width change works).
this seemed to do the trick:
this.fields.tags.on('autosize', function(tags){
tags.ownerCt.doLayout();
});
I'm making a prototype in HTML and I want to make a table, which will display more table rows when a user clicks on a button. I want to use the slideToggle function or something smooth.
It works, showing the content, but there is some lag or something strange going on. I have applied somewhat the same function on other objects (not in tables) and there it have worked out nicely.
This is my script:
$(document).ready(function() {
$('#show-more-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
$('#show-less-rows').click(function() {
$('#tr-button').slideToggle();
$('.hidden-row').slideToggle();
});
);
Here is a jsFiddle for my table.
Any help and tips will be appreciated!
jQuery's slide animation doesn't support table rows. Just split up the table in two tables (the one visible and the one that will be expanded) and wrap the second one in a div. Now you can slideToggle() this div.
Here's your fix: http://jsfiddle.net/5SYBe/12/
The problem is that you are using it on tr elements, which cannot be re-sized to less than their contents.. (that is the way tables work)
So the animation tries to animate their height from 0 to full but it fails so you see them at full size from the start.
The same goes on with the hiding. While the animation lasts (which does nothing visually) you see it and at the end where the elements gets hidden you get the final state..
If users manually resize jqGrid columns, how can you reset the column width back to whatever the original values were?
I don't believe that there are any built in methods for reseting the widths, leaving the option of recording them at creation and restoring them at a later point. Unfortunately, this functionality is the same as it was 10 months ago with column width being one of the few options that cannot be changed once the grid has been created. I even tried the newest version of the grid just to be sure (3.8.2) and it does not allow you to change the column sizes.
$('#jqGrid').getColProp(colName).width; //Properly retrieves value of column width
$('#jqGrid').setColProp(colName, {width: newWidth}); //Does nothing visually
$('#jqGrid').getColProp(colName).width; //Returns newWidth, although it doesn't show it on page
I don't know if it would be worth it, but you could try Oleg's solution here of destroying the current grid and creating a new one in its place. The practicality of this solution I suppose would be dependent upon how you are getting the data and how long it would take to re-bind the data to a new grid.