I have a sap.m.Input with a regex binding. When my input is "A", "B" or "C" my text is black, otherwise it becomes red through CSS.
oComponent.attachValidationError(function(oEvent) {
oEvent.getParameter("element").addStyleClass("become-red");
});
oComponent.attachValidationSuccess(function(oEvent) {
oEvent.getParameter("element").removeStyleClass("become-red");
});
var oInput = new sap.m.Input( {
value: {
path: "Qux>/foo/0/bar/0/baz",
type: new sap.ui.model.type.String(null, {
search: new RegExp("^[ABC]$")
})
}
});
When the value is "A" and I change it to "B", this works properly.
Then, if I do
oModelQux.setProperty("/foo/0/bar", [{
"baz" : "A"}]);
This works properly, the value becomes "A" again. My problem is that when I change the value of the input to a value which is not alllowed (e.g. "D"), and then I try my code
oModelQux.setProperty("/foo/0/bar", [{
"baz" : "A"}]);
nothing happens. The input does automatically update to "A", it just leaves the string "D" in red.
The binding should avoid that wrong values are stored in the model. If you change the value from "A" to "D" the value is never stored in the model, i.e. the model holds still "A". Thus your call to setProperty has no effect, as the internal value of the binding has never changed and setProperty does not force bindings to update in case of unchanged data.
I suggest that you obtain the binding of the input field if the button is clicked and call refresh(true). This should work (not tested).
Beside that I would suggest to use a Select control as it looks like that the available values are fixed. This would make the special logic obsolete.
Based on matbtt's answer, the following solution works without sacrifing performance:
undo for a single entry ('foo' level) triggers the following event:
oEventBus.publish("undo", "undoAll", oContext.getPath());
undo for all lines triggers the following event:
oEventBus.publish("undo", "undoAll");
attaching the following change function to each input:
var oInput = new sap.m.Input( {
value: {
path: "Qux>/foo/0/bar/0/baz",
type: new sap.ui.model.type.String(null, {
search: new RegExp("^[ABC]$")
}),
change: function(oEvent){
var that = this;
var oRegex = new RegExp("^[ABC]$");
var bTest = oRegex.test(oEvent.getParameters().newValue);
if (!bTest) {
var fnSubscribe = function(sChannelId, sEventId, oData) {
if (!oData || oData === oContext.getPath()) {
that.mBindingInfos.value.binding.refresh(true);
that.removeStyleClass("invalid-value");
oComponent.getEventBus().unsubscribe("undo", "undoAll", fnSubscribe);
}
};
oComponent.getEventBus().subscribe("undo", "undoAll", fnSubscribe);
}
}
}
});
Related
I have created this JS object from an array.
var rv = {};
$( ".part-name:visible" ).each(function( index ) {
//rv[$(this).text()] = arrayPartsName[$(this).text()];
rv[$(this).text()] = arrayPartsName[$(this).text()];
console.log(rv);
})
4GN: "4GN"
4GNTS: "4GNTS"
042645-00: "042645-00"
503711-03: "503711-03"
573699-05: "573699-05"
I have to use this object with Materialize Autocomplete and I have to edit it. The correct object must be, for example, like this
4GN: null
4GNTS: null
042645-00: null
503711-03: null
573699-05: null
How can do this?
Picking up from my comment. You can just set it to null ;) JavaScript is quite a cool language... you can pretty much set any object's properties to anything you want, null, a specific value, or even a function... see some more on the topic
But to focus on your specific question:
Change this line
rv[$(this).text()] = arrayPartsName[$(this).text()];
to
rv[$(this).text()] = null;
Something to be aware of
If you have property or key values in the JSON object with a dash in the name, you have to wrap it in quotes ", otherwise it wont be seen as valid. Although this might not be as evident, or an issue in your example as your keys are being added via the following function $(this).text().
var fruit = {
"pear": null, // something null
"talk": function() { console.log('WOOHOO!'); } // function
}
var apple = "app-le";
fruit[apple.toString()] = 'with a dash';
fruit["bana-na"] = 'with a dash';
// below is not allowed, the values will be evaluated as
// properties that dont exist, and then your js will fail
// fruit[pe-ar] = 'with a dash';
fruit.talk();
console.log(fruit);
I would like the autocomplete to show the entire list when the input box gets focused (no input is given). Would also like the auto complete to match substrings without having to fiddle with private variables.
At the moment the code is:
autocomplete = goog.ui.ac.createSimpleAutoComplete(
gsa.Game.gameData.teams, team2, false);
matcher=autocomplete.getMatcher();
matcher.useSimilar_=true
autocomplete.setMatcher(matcher);
Similar matches work but have to set a private variable for that (no getter or setter available).
The other one I have not been able to find out; how to show all data when no input is given (like a smart select input). So when the textbox receives focus it'll show all data since there is no filter text given. These are basic things that one would like to configure but can't find it in the API documentation.
You need to create descendants of goog.ui.ac.AutoComplete, goog.ui.ac.ArrayMatcher and goog.ui.ac.InputHandler. Also you will directly create the instance of auto complete object instead of calling goog.ui.ac.createSimpleAutoComplete.
In goog.ui.ac.AutoComplete descendant you assign custom input handler and matcher.
goog.provide('my.ui.ac.AutoComplete');
goog.require('goog.ui.ac.Renderer');
goog.require('my.ui.ac.ArrayMatcher');
goog.require('my.ui.ac.InputHandler');
my.ui.ac.AutoComplete = function(data, input, opt_multi, opt_useSimilar) {
var renderer = new goog.ui.ac.Renderer();
var matcher = new my.ui.ac.ArrayMatcher(data, !opt_useSimilar);
var inputhandler = new my.ui.ac.InputHandler(null, null, !!opt_multi, 300);
goog.ui.ac.AutoComplete.call(this, matcher, renderer, inputhandler);
inputhandler.attachAutoComplete(this);
inputhandler.attachInputs(input);
};
goog.inherits(my.ui.ac.AutoComplete, goog.ui.ac.AutoComplete);
In goog.ui.ac.ArrayMatcher descendant you need to override getPrefixMatches() method, since the default behaviour discards empty strings. So if there is an empty string, we just return the first x rows from the data.
goog.provide('my.ui.ac.ArrayMatcher');
goog.require('goog.ui.ac.ArrayMatcher');
my.ui.ac.ArrayMatcher = function(rows, opt_noSimilar) {
goog.ui.ac.ArrayMatcher.call(this, rows, opt_noSimilar);
};
goog.inherits(my.ui.ac.ArrayMatcher, goog.ui.ac.ArrayMatcher);
my.ui.ac.ArrayMatcher.prototype.getPrefixMatches = function(token, maxMatches) {
if (token == '')
{
// for empty search string, return first maxMatches rows
return this.rows_.slice(0, maxMatches);
}
else
{
return goog.base(this, 'getPrefixMatches', token, maxMatches);
}
};
In goog.ui.ac.InputHandler descendant you need to override processFocus() method, and force to show the autocomplete popup. This can be done by calling update() method with first parameter set to true.
goog.provide('my.ui.ac.InputHandler');
goog.require('goog.ui.ac.InputHandler');
my.ui.ac.InputHandler = function(opt_separators, opt_literals, opt_multi, opt_throttleTime) {
goog.ui.ac.InputHandler.call(this, opt_separators, opt_literals, opt_multi, opt_throttleTime);
};
goog.inherits(my.ui.ac.InputHandler, goog.ui.ac.InputHandler);
my.ui.ac.InputHandler.prototype.processFocus = function(target) {
goog.base(this, 'processFocus', target);
// force the autocomplete popup to show
this.update(true);
};
I did successfully add a row double click event listener to my grid by:
listeners : {
itemdblclick: function(dv, record, item, index, e) {
alert('working');
}
},
Now, I need to get the exact value in third column at the selected row, how can I do that ?
EDIT
Okay found it:
listeners: {
itemclick: function(dv, record, item, index, e) {
alert(record.get('name'));
}
}
but seems like the result of record.get('name') is not a text! its an object but I cannot handle it as if it a text. any body has any idea ?
EDIT
For example, if I pass the name to search function: Search(record.get('name')); this won't work. but if I pass it this way: Search('Mike'); it works !
Ensure that
Your property name is really lowercase 'name' and not 'Name'
Print the value of the field into the console with console.log(record.get('name')) or use the direct access by typing console.log(record.data.name) or console.log(record.data['name']). Basically all should return the same.
To cast a value to string apply '' on the fly like var myVar = 2; myVar = myVar + ''; // now print 20 as string
Try with,
listeners: {
itemclick: function(dv, record, item, index, e) {
var selectedRec = dv.getSelectionModel().getSelected();
alert(selectedRec.get('name')); //Will display text of name column of selected record
}
Let us explain the question with an example. I have a text box. The textbox (every textbox) has a property called 'value'. I want to over ride that textbox.value and comeup with and
new thing. When the text in textbox is 'ranjan' then the textbox.VALUE property returns 'ranjan'. Now I want to thus overwrite this so that when you type textbox.VALUE you get a different thing say for example, RaNjAn or say, Mr. Ranjan or whatever.
We can over ride methods using Object.PROTOTYPE property. But how can we do it for non-function objects inside object for example the 'value' property in this case.
If i need to make the question more clear, please mention.
Regards - Ranjan.
You can define custom properties for your element using Object.defineProperty
If you have a case where you need to get the value of an element as Mr. <value> for example, then this approach will be useful. Overriding standard properties may not be such a good idea.
Demo: http://jsfiddle.net/zvCGw/2/
Code:
var foo = document.getElementById('foo');
Object.defineProperty(foo, "xvalue", {
get: function() {
return 'Mr. ' + foo.value;
},
set: function(_newValue) {
foo.value = _newValue;
}
});
foo.xvalue = 'Hello';
alert(foo.xvalue);
What you are trying to do is called type augmentation. In javscript there are types of things, such as the object type, array type, etc.
You can use the prototype to augment these built in types, for example, adding a new method that can be called on any object that is of the type array:
Array.prototype.myNewMethod = function() {
//the method logic
}
Then you can call your method on any array:
[0,1,2].myNewMethod();
There is no INPUT type in JavaScript, DOM elements are classed as Objects. But you could jerry-rig something together that kind of does what you need, like this
Object.prototype.changeValue = function(el) {
if (el.tagName === "INPUT") {
return "Mr " + el.value;
}
}
var testEl = document.getElementById("test");
document.write(testEl.changeValue(testEl))
Used in conjunction with this textbox:
<input id="test" value="Dan" />
You would then get the output 'Mr Dan'
However, this is not great, it's just to illustrate the point and is just something to get you started...
I made a fiddle so you can play around with it
You can redeclare value but it will do no good ;)
This example would do that if test is a textbox
var input = document.getElementById("test");
Object.defineProperty(input, "value", {
get : function () {
return "'" + this["value"] + "'";
},
set : function (val) {
this["value"] = val;
}
});
input.value = "Hello World";
alert(input.value);
Unfortunately, "this.value" will reference the getter causing infinite recursion.
Once redefined, the original value will no longer exist so you will have crippled the element object.
At least as far as I have been able to test.
If the property you're trying to override can also be represented by an HTML attribute (e.g. an input's value), then you can use getAttribute and setAttribute.
Object.defineProperty(myInputElement, 'value', {
get: function () {
return myInputElement.getAttribute('value');
},
set: function (value) {
myInputElement.setAttribute('value', value);
}
});
Note, however, that this override itself cannot be overridden without re-implementing it.
I'm using ExtJs 3.4 and have the following code to create a hidden field:
box.hidden = this.el.insertSibling({
tag: 'input',
type: 'hidden',
value: itemVal,
name: (this.hiddenName || this.name)
}, 'before');
However, when itemVal is a json-string (or a string with quotation characters) it creates an element that looks like:
<input type="hidden" value="[" 635f7ede-7add-415f-8461-548d17027cac.group","bbe2x:101"]"="" name="selector_account_ef8e33ca71e749dca21997f51b404e23" id="ext-gen1766">
The problem is that it cocatenates the html for performance. So I want to, in this case, create the element by setting Ext.DomHelper.useDom to true. Should be an easy fix, right? But the inner code that checks the useDom variable checks against the private object that is passed to Ext.apply function instead of using Ext.DomHelper.useDom. So it doesn't matter if i set Ext.DomHelper.useDom to true inside the function that checks it, it is never true. Se the ExtJs code here:
http://docs.sencha.com/ext-js/3-4/source/DomHelper-more.html
// private
function doInsert(el, o, returnElement, pos, sibling, append){
el = Ext.getDom(el);
var newNode;
if (pub.useDom) {
...
} else {
...
}
return returnElement ? Ext.get(newNode, true) : newNode;
}
I found an old bug report for this that was closed, (http://www.sencha.com/forum/showthread.php?76966-CLOSED-3.0.0-DomHelper-s-useDom-bug) but I don't understand why and HOW I can set useDom to true.
Of course it's simple to fix it by replacing " to " but I want to understand it.