My greetings !
I am trying to focus on first pagingtoolbar`s button by hot key. For example, when it will be pushed combination CTRL + -->, the focus will be on first enabled button of pagingtoolbar.
At this time I can get fisrt disabled button:
Ext.ComponentQuery.query('pagingtoolbar button{isDisabled()}')[0]
But I need a code like that:
Ext.ComponentQuery.query('pagingtoolbar button{isEnabled()}')[0]
I have thought that there is such method in Ext.button.Button, but I could not find it.
Obviously, I can resolve my problem by another way, for example, I can get all enabled buttons in paging toolbar by this code:
var buttons = Ext.ComponentQuery.query('pagingtoolbar button');
var en_buttons = [];
for(var i=0;i<buttons.length;i++){
if( !buttons[i].isDisabled() )en_buttons.push(buttons[i]);
}
en_buttons[0].focus(false,100);
But I believe that there are no need to write such code, it must be resolved by one line of code.
With regards ,
A
You can use the disabled property.
Disabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=true]')
Enabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=false]')
Related
How can I show programmatically the column PopupMenu in Ag-Grid?
PopupMenu Ag-Grid
With the gridApi you can hide it, but not show it
gridApi.hidePopupMenu()
I try also with the FilterInstance and the columnApi, but I haven't found anything that works
gridApi.getFilterInstance(colKey)
gridColumnApi?.getColumn(colKey) ...
Thanks
you can add a little workaround to open the filter popup:
// find the header menu button for the desired column
const colElement = document.querySelector("div[col-id='" + desiredColumn.getColId() + "'] > .ag-cell-label-container > .ag-header-cell-menu-button");
colElement.dispatchEvent(new Event("click")); // simulate a click on the menu button
// the next part ist to switch to the filter tab:
setTimeout(() => { // give the browser some time to render the menu
const tabElement = document.querySelectorAll("div.ag-tabs-header > .ag-tab")[1]; // select the filter tab
if (!tabElement.classList.contains("ag-tab-selected")) { // if the filter tab is not selected already
tabElement.dispatchEvent(new Event("click")); // click the filter tab
}
}, 10);
Basically, you locate the button in the DOM and execute a virtual click on it. It's not pretty but it works well, maybe we'll get an API for this in the future.
What you're wanting to do is to access getFilterInstance() of the Ag Grid API. Here's the relevant documentation: https://www.ag-grid.com/javascript-grid/filter-api/
Here's one way of accessing, and setting the filter using the getFilterInstance method
var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved') //added the option i wanted
FilterComponent.onFilterChanged();
Here's a related Stackoverflow question: how to pre-set column filter in ag-grid
Instead of manually selecting the check boxes of several pages,
I am using TamperMonkey to select all the check boxes with a small Javascript function.
The checkboxes get selected but the next step (SyncNow)for the procedure is greyed out.
I think it has to do with changing classes.
Is there another way to select the checkboxes with a 'click' via TamperMonkey?
or
How do I add an extra class that will hopefully not grey out the next step?
You can see the code that I have here:
https://codepen.io/Marina_2019/pen/dxXmZL
I tried this, and it did not work:
function selectAll(){
document.getElementById("AllInventorySelected").checked = true;
}
}, false);
This function worked:
checkThem([].slice.call(document.querySelectorAll('input[type="checkbox"]')));
function checkThem(nodes) {
nodes.forEach(function(n) { n.checked = true });
}
The problem is that the next after selecting all the check boxes are greyed out (unless I do it manually).
I noticed that a class gets added if I select the check boxes manually.
Code snippets are here:
https://codepen.io/Marina_2019/pen/dxXmZL
Html code
<button type="button" ng-click="submitPosition($event, true);navigate($event,'/#/project')" class="btn btn-main" name="submit">CREATE POSITION AND AUTOSOURCE</button>
My code.
Two buttons have same class name so am using filter.
element.all(by.css('button.btn.btn-main')).filter(function(button,index){
return index == 1;
}).each(function(button){
button.click();
});
I am getting this error
UnknownError: unknown error: Element is not clickable at point (1049, 162). Other element would receive the click: <ul class="modal-breadcrumb list-unstyled block">...</ul>
(Session info: chrome=43.0.2357.132)
Please help me.
Based on the error, it looks like you've got a modal blocking your click. Not seeing the rest of the code, it's hard to say, but you'll need to get around that. That said, the overall issue could be your locator strategy. Using filter here is overboard, and perhaps trying to clicking the wrong thing?
I would try:
element(by.cssContainingText('button.btn.btn-main', 'CREATE POSITION AND AUTOSOURCE'));
or
$$('button.btn.btn-main').get(1); // assuming index 1 is the button you're after
or if it's the only submit:
$('button[name="submit"]');
This may result due to the following reason ,
The button you want to click on is at the bottom of the page(not visible on the page).
you have to scroll down a bit to expose the button in our browser.Then you can click on it.
You can use mouseMove() to scroll to element first:
browser.actions().mouseMove(btnSave).click();
or
use browser.executeScript() function to do the scrolling:
browser.executeScript('window.scrollTo(0,document.body.scrollHeight);');
you should give a specific id to your button and use the by id to click
element(by.id('buttonId')).click();
I'm not sure if the modal eventually goes away? or if you have to click on something else for the modal to go away but I've found using the expected conditions to be helpful
var button = element.all(by.css('button.btn.btn-main')).first();
var IsClickable = EC.elementToBeClickable(button);
browser.wait(IsClickable, 5000, "Failed to click the button").then(function() {
button.click();
});
I have a div that I want to make draggable or not, depending on the state of some other stuff on my page. I seem to be able to easily make it draggable, but I can't seem to figure out how to best remove the draggability from the div.
I am making it draggable with:
var dd = Ext.create('Ext.dd.DDProxy', mydiv, 'myDDGroup', { isTarget: false });
And I've tried to then remove the draggability by removing the only group it's a member of
dd.removeFromGroup('myDDGroup');
and just destroying the dd object with
delete dd;
Neither of these seem to actually keep me from starting a drag on the element. I suspect I should be able to use the b4Drag override in some way to simply cancel a drag of my div before it even begins, rather than toggling the draggable state of the div at all, but I can't seem to find docs on how I might cancel the drag during the b4Drag call.
So, how can I make a div undraggable after I have already made it draggable?
Seems to be working for me.
Here is the JSFiddle http://jsfiddle.net/01gx33h0/
var dd = Ext.create('Ext.dd.DDProxy', 'test123', 'myDDGroup', { isTarget: false });
Ext.fly('btn123').on('click', function() {
dd.removeFromGroup('myDDGroup');
});
Can you give me the sample code where it is not working. And what version of ExtJs are using?
You have to unreg. Not removeFromGroup.
It just removes from group. But events are not removed on that element.
dd.unreg();
https://fiddle.sencha.com/#fiddle/1eun
When looking at something specific that needs to be dragged, you might consider that allowing dragging is something users expect, for general ease of use you might try the ondragstart="return, this could be appended to your images, or links like so:
<a ondragstart="return false" href="#link">link</a>.
I am new to ExtJs(using EXT js 4 ), I am trying out simple code.
I have a submit button which is set disabled by default
buttons: [{
text: 'Submit',
id:'submit',
disabled:true
}]
I want to enable the button based on certain conditon.Something like
if (validation_status== "success") {
//Enable the submit button
//Ext.get('submit').dom.disabled = false; -- Not working
//Ext.get('submit').enable(); -- Not working
}
I tried above 2 option. Which did not worked for me.
Can anyone help me out?
Use this:
Ext.getCmp('submit').enable();
When you use Ext.getCmp(), it gives you the component which has a number of component methods to use. If you use Ext.get(), it gives you the element with a number of dom element modification functions. So, its always better to test in firebug console for any of these to know what methods are there.
console.log(Ext.getCmp('submit'));
console.log(Ext.get('submit'));