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 :)
Related
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
I am using Backbone and Backbone.ModelBinder.
I have a bunch of text fields that are bound via BackboneModelBinder. Everything works as expected however when I make a change to a text field and I don't unfocus the field first (click off the input field) before hitting the SAVE button, I have to hit the Save button twice -- once to unfocus the fields, and then a second time to actually fire the save button handler (which should have fired the first time)
(Save is a standard html button with a backbone event bound to it).
Does anyone have any knowledge of why this might be?
I hope this made sense :|
Thanks for any help or direction
-Kirk
That's because ModelBinder by default set the new value to the model's attributes on "blur" or "change" events (it dependes on the input's type). You can modify this behavior by changing the source code, adding keyup as binding event in those two methods:
_bindViewToModel:function () {
$(this._rootEl).delegate('', 'change keyup', this._onElChanged);
// The change event doesn't work properly for contenteditable elements - but blur does
$(this._rootEl).delegate('[contenteditable]', 'blur keyup', this._onElChanged);
},
_unbindViewToModel: function(){
if(this._rootEl){
$(this._rootEl).undelegate('', 'change keyup', this._onElChanged);
$(this._rootEl).undelegate('[contenteditable]', 'blur keyup', this._onElChanged);
}
},
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 have a window containing a form (formPanel). Users can show this window clicking on a button in an ExtJS environment. I would like that when the user clicks the button to show the window, a specific field inside the form contained by the window will focus (by this I mean that the cursor should move to that field so that the user can insert data without needing to click on the field itself first).
I tried some solutions, but could not get them work. Any hints?
Here is what I tried, using some examples I found... but it does not work as expected. This function() is called by the ExtJS button in my interface:
function openCardForm(IDUser){
//Reset the value of this field which may be still there from the prev. usage
Ext.getCmp('assignFormCARDNUMBER').reset();
formAssignCard.getForm().load({
url: 'gen/jsonUser.php',
params:{IDUser:IDUser},
waitMsg: 'Loading...'
});
//Try to focus the Card field when rendering the form
Ext.getCmp('assignFormCARDNUMBER').on("render",function(){
Ext.getCmp('assignFormCARDNUMBER').focus(true,10);
});
win.show();
}
try on show instead.
Or Use
defaultButton : yourComponentToFocusOn
A bit confusing but the defaultButton can be any component (not necessary to be an actual button)
You can also try setting the tabindex of the field to zero in its config options...that way you wont even need to add a listener to detect the show event.
ie:
tabIndex:0