The following form is nearly completely editable without mouse:
https://fiddle.sencha.com/#view/editor&fiddle/2gsi
The only thing that is not accessible is the trigger of the textareafield.
Since the textareafield is typeable, I would like to make the trigger of the textareafield tabbable. Tab is the only thing I think I can use without hindering general ability to type.
How can I do this? I have not found anything in the trigger documentation
Not quite a complete answer, but too long to be a comment, and it might be helpful to you. Here is one possible solution: https://fiddle.sencha.com/#view/editor&fiddle/2gt8
I have overridden the trigger's renderTpl config by making the top level element a button (by default it is a div), and I've added some styling to it.
You can make the div tabable with tabindex, but the issue will be that when you press enter on the focused trigger, it will not execute the handler.
With the current approach, the single issue is that the textarea's focused styling gets messed up. When you press press tab after being focused on the trigger, the textarea will still keep the focused class.
You could set a keyboard shortcut for it, like that:
xtype: 'textareafield',
fieldLabel: 'Name',
enableKeyEvents: true, //important
listeners: {
keydown: function (a,e){
if ((e.altKey)&&(e.keyCode==73)){ //in that case Alt+i , but you could use any other combination
a.getTriggers().book.el.dom.click();
}
}
}
Hope that helps
Related
I have multiselect component in our application, we have 2 different views of the same form.
View 1 - All the components would be editable and selectable
View 2 - Whereas in this view, user can only see the selection that he made in View1(disable all the form components). Using the below code i disabled all the form components. But the problem here with the multiselect component, even though i disabled the editing capability from the user, still i want to allow them for scrolling through the list.
this.getView().query('form displayfield,textfield,radiogroup,multiselect').forEach(function(item) {
item.setDisabled(true);
});
I tried to the disable the Selection using the listConfig property, this works. But dynamically i couldn't able to apply this property.
{
xtype:'multiselect',
fieldLabel: 'Employee Names',
valueField: 'enameCode',
displayField: 'enameValue',
listConfig : {
disableSelection: true
}
}
How can i achieve this? Please provide your valuable inputs, thanks in advance.
Thanks!
Given that disableSelection: true works for you, you should be able to achieve the same effect dynamically by calling:
YourMultiselectComponent.boundList.getSelectionModel().setLocked(true)
You should be able to call the functions disable and enable on the BoundList associated with the multiselect to achieve this dynamically.
Like follows...
Ext.ComponentQuery.query('boundlist').forEach(function(item) {
item.disable();
});
EDIT:
So I just realised that this doesn't entirely solve your problem as scrolling will still be disabled after calling the disable function. This is because ExtJS applies a mask to the entire element (including the scrollbar) that is disabled to prevent user interaction.
One thing you could do is to modify the style (width in this case) of the mask DOM element. It may not be the most elegant solution but it would fix your problem.
Ext.ComponentQuery.query('boundlist').forEach(function(boundlist) {
boundlist.disable();
var boundlistDOM = boundlist.el.dom;
var maskDOM = boundlistDOM.getElementsByClassName('x-mask')[0];
mask.style.width = "94%"; // or value so that the mask does not cover scrollbar
});
This is related to ExtJs 4.2 Charts.
I am stuck where i need to make selection of multiple columns in a column chart only when a user press ctrl key + column selection with mouse click. So, i couldn't find how to capture control key press event in itemclick event of chart.
Please send in your suggestions...
This is a shot at a direction you might take and not a definitive answer.
You might look at adding a couple listeners to the Panel or Viewport you are working with, add a keydown event and the keyup event, not sure if that will work, you might go so far as to add it to the DOM models window too. You see the problem I am seeing here is that you have to have focus first on something, and you will probably at least have the focus of the window, where if you, put this listener on the actual chart you have to focus there by clicking on the chart first and then selecting the key and then clicking again, kind of a lot of actions I would think and not intuitive.
Then set a global variable to true on the key press down and back to false on the key press up.
Then in the itemmousedown event that you also create on the charts Series so you can read the variable and use it as you intend.
here is what the listener should look like
series: [{
type: 'column',
...
listeners: {
itemmousedown: function(item, eOpts) {
.... // get your global variable here.
console.log(item);
console.log(eOpts);
}
},
I found a solution it is working fine but its a kind of workaround.
Here is the code snippet...
var bIsControlkeyPressed=false;
function setCtrlKey(event){
if (event.ctrlKey) {
bIsControlkeyPressed=true;
}else{
bIsControlkeyPressed=false;
}
alert(bIsControlkeyPressed)
}
<body onmousedown = "setCtrlKey(event)">hello</body>
When you click anywhere on page (body part i.e. 'hello' in this case), this code will set the global flag to true if ctrl key is also pressed else false is set. I know there are other ways this can be done but this approach works with IE8 also :)
I'm working on an "old" application in ExtJS 2.2 and the method expand of Ext.form.ComboBox doesn't work in my case.
I just do
Ext.getCmp('adresse_field_ville').expand();
But nothing happends, even not a trace in console.
I'm sure to use the good object, because juste before I do
Ext.getCmp('adresse_field_ville').setValue('');
And it works.
By googling I found the method onTriggerClick. This method expands the combo and focuses it but i need to keep the focus on an other field.
Thanks
Try focus do the expanding, add focus event in the listener
listeners: {
focus: function(fld) {
this.onTriggerClick();
}
}
Execute the focus event:
Ext.getCmp('adresse_field_ville').focus(false,100);
my grid allowing to select multiple row selection that is once i click on cell and press shift+arrow down button it allows me to select next set of records i wanted to disable this functionality how it can be done,on grid level how to catch keypress events and return false once shift+arrow down button is pressed
For ExtJS 3.x add this to the grid properties:
selModel: new Ext.grid.rowSelectionModel({singleSelect:true})
Grids behave as you want by default. Make sure you have NOT set multiSelect or simpleSelect to true.
Firstly, it's hard to understand your question without any punctuation. Secondly, without any code example, it's even harder to understand a question without any punctuations.
Here's my guess answer of your question:
editorgridpanel.on('keypress', function (e) {
if (e.shiftKey === true && e.getKey() === e.DOWN) {
e.stopEvent(); //this will stop the shift+down keypress event from proceeding.
}
});
The accepted answer seems to be a bit out of date. For version ExtJS4.x use this solution :
selModel: new Ext.selection.Model({mode: 'SINGLE'})
Or just use this :
selModel: {mode: 'SINGLE'}
I don't know if this is a browser general issue or if it is related to my code but here is my issue :
Lets say my page contains a link and a menu. I click the link and a popup opens [it contains a textfield or datefield]. When the popup is loaded, the textfield receives focus and the caret appears in the textfield : I can write. Now If i push my cursor on the side and it hovers on the menu, the focus changes and I can't continue writing in the textfield.
Is there a way to fix that ? I've googled it a bit but to no success.
Since you are using an Ext.Window, the browser doesn't know that things behind the window aren't invalid to hover or otherwise interact with. Indeed, someone actually might want their users to be able to interact with the main page behind the window. However, if you don't want this behavior, and the window is supposed to be the only thing the user interacts with, you are looking for modal: true. This will put a mask over the rest of the page, and no hovers or clicks will be applied to anything on the main page.
Example:
new Ext.Window({
modal: true
width: 400,
height: 600,
layout: 'fit',
items: ...
});
I do face the same issue with the following setup
1. using Ext.widget(widg) to create and open (show) a popup window
2. the widg is defined with modal: true configuration
3. one of widg's items is a form with several fields (fields are dynamically created and each time the form might contain different number of fields)
the issue: when I move the mouse out of the form's area (the mouse even stays inside the popup are), the filed that was on focus looses the focus. Happens 100% of the times.
Thanks, Charlie