I have an ExtJS TreeGrid which I'm attempting to add a ContextMenu onto when a user right clicks. The right click is working fine, but there's one little niggle; the menu doesn't show in the exact position where the user right clicks. Rather, it anchors to the beginning of the node - so if a user right clicks half way across the node they need to travel across the screen to click on a menu item - quite annoying.
This seems a little odd as I have this exact feature working perfectly for the ExtJS Tree. Perhaps it's an ExtJS TreeGrid bug?
Why isn't the contextMenu showing exactly where the user right-clicks in the Tree Grid?
Here's the listener:
listeners: {
contextmenu: function(node,event){
node.select();
myContextMenu.show(node.ui.getAnchor());
}
}
Thanks!
EDIT:
On further inspection, the same thing is happening within the ExtJS Tree - perhaps this can't be avoided?
Apologies for answering my own question, but this sorts it:
listeners: {
contextmenu: function(node,event){
node.select();
myContextMenu.showAt(event.xy);
}
}
Related
I have a popup opening next to the textbox. When I click on the tab key from the textbox it should be navigated to the close icon of the popup (top right corner) and when I click on the close button from the popup, focus should be set to the next control in the form and popup should be closed.
Here is the fiddle
So in fiddle, when I click on the tab from business structure drop down, focus should be set to the close icon(top right corner) and on each next tab it should be move to the next control inside the popup and from close button it focus should be on type dropdown
Its all about the method how to grab a component, which seems to have no connection to another component.
Here the solution is, that you set an alignTarget by using showBy.
Focus:
focus: function(field){
field.popup= Ext.create('tooltip' );
field.popup.showBy(field.el, 'l-r',[10,0]);
},
Listener:
listeners: {
'destroy' : function(win,ev) {
const field = win.alignTargetFly,
next = field.next().component;
next.focus();
}
},
By the pure number of questions you are asking here for the same component (3 or 4 so far), it might be better to grab professional help. Just ask someone to build a component by an image and a short description. This description could be instantly part of your documentation too. This might cost a one day of work.
From what I see so far I would do a custom component, that includes a field.base with the popup. This can be added as a single component to your library and be included instead of your field.
At the end this will be way cleaner in your codebase than what you are currently doing. Just for an example: Always keep the same order for components. After the extend line should be the xtype ... At the end it is easer to read for everyone.
Using material-ui/lab 4.0.0-alpha.27 - TreeView Component
I have a treeview with a couple of hundred nodes. I have added a textfield before the treview that the user can use to search/filter the tree. As they type I add/remove classes from the TreeItems to hide and show TreeItems. It works fine BUT we want all of the nodes to be expanded once they enter something into the search/filter textfield.
I have tried feeding the "defaultExpanded" prop a new list that has all of the nodes in it but it doesn't seem to cause the nodes to expand as I had expected. The defaultExpanded prop only seems to be respected when the tree initially draws.
I am currently working around this by looking for collapsed nodes and firing click events for them to force them to open but that is causing issues (the textfield looses focus and the keyboard hides and the treeview jumps around). I need something a bit smoother.
You need to use the expanded prop, instead of defaultExpanded.
I have a tree panel which has multiselect enabled (selModel:{MODE:MULTI}). If multiple nodes are selected then you right click to activate context menu, all selected nodes except for node that was right clicked on get deselected.
The outcome im looking for is the nodes stay selected, so I can click a menu item and get IDs of all selected Nodes.
There was a bug created for this issue couple years ago and Sencha introduced a new config, ignoreRightMouseSelection, which if set to true, doesnt treat a right click as a selection. But this config is for RowModel. I am using a tree Panel.
The event I'm listening for is treepanels "itemcontextmenu", to show contextmenu
any help appreciated, thanks
I fixed this problem by adding one more parameter to selModel.
selModel: (
{
mode: 'MULTI', ignoreRightMouseSelection:true
})
Try it.
I've created a Google like SearchBox control in Silverlight. That means, as I type in the box, a DropDownListBox appears just below the SearchBox, showing all the items that match with the text I've typed in searchbox so far (i.e AutoComplete feature), exactly like this:
Now, I want to add a functionality to it : I want to make the DropDownListBox to disappear, as soon as user clicks outside it, or anywhere on the screen. I cannot handle MouseLeftButtonDown (or any such event) in other controls, to accomplish this, because users can click anywhere, including non-silverlight region. Can anybody suggest me what should I do to achieve this?
So my question basically is:
How to know if user has just clicked and the click event occurred outside a particular control?
Please note that AutoCompleteBox doesn't serve my purpose. So I cannot use it.
I have a feeling that working with LostFocus event can solve your problem.
I guess this question is a bit old, but i just stumble upon trying to do the same and finding a solution. This is what i did
Created a Border with All Margins -500, this will cover the full screen essentially.
On Click Behaviour of this Border, the dropdown section of SearchBox
is collapsed.
Adjust z-Index of Border just below the SearchBox and DropDown
section, so clicking on SearchBox or DropDown wouldn't close it.
Set Border Visibility Collapsed, and make it visible when DropDown is Visible.
I hope it helps someone who is looking for the similar problem.
I have implemented tree within combobox using idea from this thread
but when [+] or arrow on tree is clicked, the combobox collapses
Is there any way to stop this????????
Please help me....Thanks alot.......
Regards
Same problem here -- my workaround is to show the tree expanded by default.
Yet that doesn't solve the issue with the arrows...
Basically the combobox sees a "blur" event when clicking on the tree and thus collapses.
But I don't know how to prevent that.
By the way, if someone had a fully working "combobox + tree" solution for ExtJS, that would be very helpful.
Because the solution provided on the Sencha forums is quite limited:
Display and value of the combobox has to be the same (whereas I'd like its value to be the tree's node ID)
There's no way to "restore" the value/display of the combobox when it's part of a form (e.g. using "form.loadRecord()")
Thanks for Pepijn who answered my question. Here is the solution:
you can use the tree beforecollapsenode and beforeexpandnode events to find if they are pressed. See the code below:
tree1.on('click',function(node){
combo.setValue(node.text);
nodeAction=0;
combo.collapse();
});
tree1.on('beforeexpandnode',function(node,deep,anim){
nodeAction=1;
});
tree1.on('beforecollapsenode',function(node,deep,anim){
nodeAction=1;
});
combo.on('collapse',function(){
if(nodeAction==1){
this.expand();
nodeAction=0;
}
});