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();
Related
I am using ExtJS 6 (although from what I can tell it applies up to version 7.4 as well) and I have a grid with a booleancolumn xtype. For that boolean column I wanted to use the filter list option. Yes I know there is a boolean filter option however I don't like how it works using a radio button. I wanted to be able to select the Yes or No with checkboxes, however I found that only the option with true as the value worked. Here is my column config:
{
header: 'Active'
, dataIndex: 'inactive'
, xtype: 'booleancolumn'
, trueText: 'No'
, falseText: 'Yes'
, filter:{
type: 'list',
options: [[true,"No"],[false, "Yes"]]
}
}
This didn't work when excluding the 'options' property and letting it get the data from the store either by the way. After looking through the code I discovered that it takes the 'options' config and creates its own Ext.Data.Store using that as the data. See here as a simple example that can be run that will get the same issue:
var teststore = new Ext.data.Store({
fields: [
'id',
'text'
],
data: [[true,"No"],[false, "Yes"]]
});
The problem is that the 'false' boolean value is changed and is replaced with a dynamically created generic id. I discovered the issue lays in the constructor for 'Ext.data.Model' for the following line:
if (!(me.id = id = data[idProperty]) && id !== 0) {
If that line evaluates to true it will replace the id with the generated one. To fix this I just added ' && id !== false' to the end of the if statement and this fixed the issue.
I have not tested this fully, however the logic seems sound and it looks like the same type of issue occurred with the value of '0' hence the ' && id !==0'. Since we are directed here from the sencha forums I wanted to bring this up in case it helps someone.
Since my post already has the answer I will post a better way to do it other than directly changing the Ext code file (whether this is the proper way I may be wrong). Instead, you can create a new js file that will need to be included in your application (you can name it ext-overrides.js). In the new js file you need only type:
Ext.override(Ext.data.Model, {
constructor: function(data, session) {
.....
}
}
You would then copy the constructor function code from your version of the ExtJS code in where the '.....' is (if perchance the constructor function arguments are different you would have to update those as well) and just add the suggested change I made above in the 'question'. A search of the Extjs code for Ext.define('Ext.data.Model' should get you there easily and then just scroll to the constructor function.
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 :)
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.
I want a price field to be displayed as '$'+ 'PRICE' but nothing shows when I use the included code. Can someone please tell me how to concatenate so that the view displays price as $123('PRICE')?
{
xtype : 'textfield',
label : 'Price',
name : 'PRICE'(this comes from store data),
readOnly : true
}
You are asking for the textfield to have a read only value of $XXX, $XXX('PRICE') and 'PRICE'(XXXX) all in the same question. However I think your mistake is just that you are using the name config instead of value. Give the following a shot an see if you can make that work.
{
xtype : 'textfield',
label : 'Price',
value : '$' + 'Price',
readOnly : true
}
If it turns out that you are instead having trouble getting the actual numeric value for price into the field that is a different issue just post the code involved with loading that data and I'll do my best to help.
Good luck, Brad
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
}
})