I m trying to set value to combobox in extjs, this is working in chrome but not in firefox. I used the following code:
function callFromController(comboitemid,itemvalue) {
Ext.ComponentQuery.query(comboitemid)[0].setValue(itemvalue);
};
AS a general guidence I would use:
function callFromController(comboitemid,itemvalue) {
// make sure you add a # to your Id string or use Ext.getCmp insted.
var foundComponents = comboitemid && Ext.ComponentQuery.query(comboitemid);
if (foundComponents.length) {
// I would add to see in your console.log('foundComponents[0]=%o',foundComponents[0])
// to check the value of the found component
foundComponents[0].setValue(itemvalue);
}
};
Related
I am using Reactjs. In react how to use document.createRange and window.getSelection as well as document.execCommand('copy') in React ?
I want to copy the contents of my html table . So I used the code
copyTable(e){
let elTable = this.tableElement.current.localName\\ elTable= "table"
this.copyData(elTable)
}
copyData(elToBeCopied){
let range, sel;
// Ensure that range and selection are supported by the browsers
if (document.createRange && window.getSelection) {
range = document.createRange();
sel = window.getSelection();
// unselect any element in the page
sel.removeAllRanges();
try {
range.selectNodeContents(elToBeCopied);
sel.addRange(range);
} catch (e) {
range.selectNode(elToBeCopied);
sel.addRange(range);
}
document.execCommand('copy');
}
sel.removeAllRanges();
console.log('Element Copied! Paste it in a file')
}
I got the value of elTable by creating a ref in my html table.
When debugged the debugger is entering into the function copyData .
But can't copy data from table. Why?
I am using react js.
Using the following in App.js render() method:
console.log(window.getSelection());
console.log(document.createRange());
Gives results in the console:
Have you tried using them at all? Might be helpful if you show your code where this isn't working and we can go from there.
I got a json response like this. It is dynamic and I want to add the details in range slider. The slider max value must dynamically increases when there will be new element in array.
"time": [
"2018-05-24T06:30:00",
"2018-05-24T07:00:00",
"2018-05-24T07:30:00"
]
I have never worked on slider before . Any suggestion how to achieve this ?
You can use angularjs-slider library (which has ui-bootstrap as dependency). It offers lot customization in sliders & very handy with angularjs.
For your case after every new value added to array you can reload the slider by 1st deleting it & then loading it again. Or you can use their rzSliderForceRender custom event for that. Using this
Your HTML will look like:
<rzslider rz-slider-model="slider_dates.value"
rz-slider-options="slider_dates.options"></rzslider>
And in controller slider config code as:
$scope.dates = ["2018-05-24T06:30:00",
"2018-05-24T07:00:00"];
var datesObjests = [];
for (var i = 0; i < $scope.dates.length; i++) {
datesObjests.push(new Date($scope.dates[i]));
}
$scope.slider_dates = {
value: datesObjests[0],
options: {
stepsArray: datesObjests,
translate: function(date) {
if (date !== null) return date.toLocaleString();
return '';
},
},
};
Working Plunker Example for your requirement.
I am using polymer v1.9.1 and testing on Chrome.
I have a custom element containing a <paper-input>, and I want its text color to depend on some other property. This color is determined by the custom properties --paper-input-container-input-color or --primary-text-color, so I set a class-dependent value for those:
#input { --primary-text-color: red; }
#input.green { --primary-text-color: green; }
<paper-input id='input' class$='[[_getClasses(checked)]]'></paper-input>
_getClasses: function(checked) { return checked ? '':'green'; }
The text is always red, I guess because of this limitation in the shim (which I guess my browser must be using). So I add a call to updateStyles:
_getClasses: function(checked) {
this.async(function() {
this.$.input.updateStyles();
});
return checked ? '':'green'; }
}
Now it works correctly after checked first changes, but the initial state is incorrect (ie if checked is initially false, it is initially red but should be green). I tried adding another async(updateStyles()) to ready but no luck (yet if I call input.updateStyles() from the javascript console it corrects itself). How can I work around this?
Complete example: http://embed.plnkr.co/VC1ZMw9iyUO3K2SQq5Oy/
I've updated the plunk with the fix.
I've updated styles in attached callback instead of ready.
_getClasses: function(checked) {
return checked ? '' : 'green';
},
attached: function() {
this.updateStyles();
}
A very stripped down example here.
Code:
function changeBackground() {
var testDiv = Ext.get("test");
var allStyleDivs = testDiv.select("*[style*='background-color'], *[style*='BACKGROUND-COLOR']");
allStyleDivs.each(replaceBackground);
}
function replaceBackground(element) {
element.setStyle('background-color','blue');
}
In FF, IE8, Chrome this page works fine. IE7 says Object doesn't support this property or method. What's the dealy yo?
See this post on the ExtJs Forum
I have been following:
http://www.sencha.com/learn/Tutorial:Introduction_to_Ext_2.0
And using the following example:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
I am using something very similar:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).addClass('product-selected');
}
Ext.select('.product').on('click', paragraphClicked);
});
However it does not appear to work correctly. e.target appears to return the ext viewport object.
I am actually using Ext 3 not 2 so I guess there must be differences.
I never used e.target, always e.getTarget().
Maybe you can try e.getTarget(".product") ?
Or maybe you can play with the delegate options of addListener in Ext.Element.