Good day. I am creating a web application which displays a Message Box from time to time. I have a message box that asks the user for a password and I want that field type to be password. So far I've tried several things but none of them seem to work, they still show the text as plain text and not as dots or asterisks.
Here's my code:
var mb = Ext.MessageBox.prompt({
title: 'Enter Override Password.',
msg: 'Please Enter the Override Password to Reprint:',
password: true, //this does not work
width: 300,
height: 125,
multiline: 1,
inputType: 'password', //this does not work
value: '',
buttons: Ext.MessageBox.YESNO,
fn: myCallback,
cls: 'msgbox',
baseCls: 'msgbox',
icon: Ext.MessageBox.WARNING
});
mb.textField.inputType = 'password'; //this does not work
Does anyone know how to specify the input field as password type? It seems that ExtJS 4.2 does not support it. Thanks in advance.
Here's what I tried and it's worked thus far. The only problem I have now is styling and that's for another question.
var myMsgBox = new Ext.window.MessageBox({
cls: 'msgbox',
bodyCls: 'popWindow'
});
myMsgBox.textField.inputType = 'password';
myMsgBox.textField.width = 240;
myMsgBox.textField.center();
myMsgBox.prompt(title, msg, myCallback);
I believe that goes a little bit beyond the scope of what the Ext.MessageBox was designed for. In looking at the source code the only things that passed into the input are the value, and height if the multiline is set.
What you could do instead, is to create your own component that extends Ext.Window and sets modal to true. This allows you to customize the window as you see fit.
Instead of Ext.MessageBox.prompt try with creating a custom window that extends Ext.Window, pop up when clicked on the button and sets modal to true and align to center.
Related
I would like AgGrid to look like this Google Spreadsheet, where the editor shows all of the textarea content, and when in read-mode (non-edit mode), the cell stretches to show all the text. Here is the Google sheet.
Here is what I have by default with my AgGrid:
Notice how (a) it is showing it the same height as the rest of the "input" one-liner cells (in non-edit mode), and (b) edit mode it is still condensing it. It should expand to fill the area. This is basically what I have to create my dynamic columns:
const editableColumns: Array<ColumnType> =
data?.nodes.map(node => ({
suppressMenu: true,
sortable: false,
headerName: node.title,
field: node.id,
editable: true,
cellEditor: 'agLargeTextCellEditor',
})) ?? [];
I used agLargeTextCellEditor to try and get the texteditor, which preserves new lines for example, so that's good. But do I need to implement my own editor, or can I use some sort of default behavior to make it more like the Google sheet above?
I have an editable combo like this:
xtype : 'combo',
value : '',
queryMode : 'local',
displayField : 'label',
valueField : 'value',
store : someStore,
allowBlank : false,
disabled : true,
typeAhead : true,
listeners : {
beforequery : function(record) {
record.query = new RegExp(record.query, 'i');
record.forceAll = true;
}
}
This combo is part of a form, and the strange behaviour is this:
If I type some text, the combo filters the results perfect, and I can select any result after type filtering. And when I press a button to submit the form, in some point in a controller I use combo.findRecord to get extra data of the selected item in the combo, process that extra data and submit the form with no problem.
Same case than first, I type some text, the combo filters and I select an option, but if I select a part/all text(click and move mouse/double click mouse on text) and press the key combination ctrl+c (copy), and press the submit button, the combo.findRecord returns false, and the only difference between case 1 and 2 is that I copied (not cut) some part of the text of the selected item.
Any idea why this happens? I have googled it but haven´t find any clue about this.
You can try by adding forceSelection config to the combo and share your results.
Regards,
Sandeep R
The problem was with new RegExp(record.query, 'i'), because when you do ctrl+c on an editable combo, it goes through the listener before query, and sometimes, the value of the combo contains characters that are used in regular expressions configurations like (,) or ..
So the solution is to scape the string to do the search:
var string= record.query;
string = string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');//This line scapes all special characters
record.query = new RegExp(string,'gi')
record.forceAll = true;
I've implemented the angular-advanced-searchbox (with AngularJS 1.5.8, ui-bootstrap, JQuery) like the demo-page:
html
<nit-advanced-searchbox ng-model="searchParams" parameters="availableSearchParams" placeholder="Search..."></nit-advanced-searchbox>
script
$scope.availableSearchParams = [
{...},
{
key: "city",
name: "City",
placeholder: "City...",
restrictToSuggestedValues: true,
suggestedValues: ['Berlin', 'London', 'Paris'] },
{...}
];
};
Here is a Plunker of this implementation too. I'll refer to this example to picture my problem.
If I type 'city' in the searchfield and select it by hitting enter, then I'll see the suggested Value-List (Berlin, London, Paris) for about a second and then the focus 'll lost and the selected key-value (city) is automatically removed. It seems this won't happen, if the mouse pointer is rested over the search-input field (without any action).
With this issue, I can't use this module on my site - but I really want to :) Are any suggestions out there?
OK, this (low-level) fix worked for me - i've just commented line 107 ():
angular-advanced-searchbox-tpls.js [#107]
$scope.searchQueryChanged = function (query) {
// updateModel('change', 'query', 0, query);
};
This line is used to build 'pre-queries'. If you start typing 'city', the scope of searchParams generate a temporary query on the fly and would be changed to the selected key - g.E.:
{"query":"ci"}
This will then lead to a timeout after 'city' is selected. I don't know this 'query' is used for - all things 'll do their job furthermore. But by time I'll looking to a real fix for this problem :)
I'm getting
Uncaught TypeError: Cannot call method 'focus' of undefined
happens when
Ext.Msg.prompt with #myinput closed and then opened **again**.
Ext.getCmp('myinput').focus(); works fine for the first time only. How to set the cursor into `myinput` always?
It works for the first time message box opened only.
Update: below is my core code.
Ext.Msg.prompt('',
'Some text description',
function(btn, text) {
},
this,
false,
null,
{ placeHolder: 'Please enter some text here', xtype: 'numberfield', id: 'myinput' }
);
Ext.getCmp('myinput').focus();
That means that Ext.getCmp('myinput') doesn't find your field. So maybe the field is not created yet at the time you call the function, or maybe you've got a type in the id, or probably, given your description, that the second time you call it the field has been destroyed... Impossible to say for sure without the surrounding code.
Try a component query.
Ext.ComponentQuery.query("#myinput").focus();
In my application a text field is there where only regex: /[A-Z0-9_]/ should be allowed.
its working fine when we enter values from key board with the code i pasted below.
Problem is when i paste some value other than regex is being accepted using ctrl+v and rightclick paste.
NoteI disabled right click and ctrl+v events on key down which is not good solution for my problem please help me in solving this..
please tell me how to validate the value of text field after pasting some text .
Mycode: {
xtype: 'textfield',
flex: 1,
allowBlank: false,
maskRe: /[A-Z0-9_]/,
maxLength: 50,
regex: /[A-Z0-9_]/,
ref: '../refField',
enableKeyEvents:true,
listeners: {
keydown: function(field, e){
if((e.getKey() ==86) && e.ctrlKey){
e.stopEvent();
}
}
}
}
Regards,
raj
You could try call validate method on the keyup event, as suggested here:
http://www.sencha.com/forum/showthread.php?27147-Trying-to-get-extjs-to-react-to-text-changing-on-a-text-field
But as they say, it wont guarantee that this will work in all browsers. In my view 100% solution is to call validate() on field in the blur event.
something like:
combo.on('blur', funciton(field){
!if(field.isValid()){
//do what you need, for example clean the value in the field
}
})