I have a chart with tool tip. What i want is when i move the mouse over certain data the tooltip should hide and if i move it on someother data it should display again. My sample code is:
tips = {
trackMouse : true,
width : 120,
height : 26,
renderer : function(storeItem, item){
if(item.yField == 'temp'){
this.hide();
} else{
this.setTitle(storeItem.get(xFld)+':'+item.value[1]);
}
};
I tried hide();, destroy();, disable(); and visibility(); but nothing worked.
Can anyone give me the proper solution for this.
Thanks
Handle the ToolTip's beforeShow event. Return true if you want the ToolTip to show, false otherwise.
beforeShow: function(item) {
return item.yField !== 'temp';
}
Handle the ToolTip's beforeShow event
Return true if you want the ToolTip to show, false otherwise.
It worked for me and it saved my time . thanks Kevin
Related
https://bootstrap-vue.js.org/docs/components/alert/
I am trying to show an alert on a button click for a second and hide it away, then show it again when button is clicked again,
<b-alert :show="saved" >Default Alert</b-alert>
..
clicked() {
//1 sec delay
this.saved = 1
}
I was hoping this would show the alert and reset the "saved" to 0 or something so when I click the button it would show again, I even tried to set the value to 0 after the click but no avail.
In their other examples they have done similar things with additional methods like 'countDownChanged','showAlert', I just want to know if that can be done without that.
Any help is appreciated.
Please refer the following code. Its working fine for me.
<button #click="test">lalala</button>
<b-alert :show="showvar" >Default Alert</b-alert>
data: {
showvar:false,
sec:1000
},
methods: {
test: function() {
console.log("hi")
let self = this;
self.showvar=true
setTimeout(function(){ self.showvar=false; }, self.sec);
}
}
codepen - https://codepen.io/anon/pen/QoeNro
I have a shop with 2 combinations. Yes and No. I added a customizable text to my products but I would like this text area to appear only when "yes" is selected. Can someone please help me do this?
Thanks!
Edit:
Thank you for replying. My code looks like this now:
//init the serialScroll for thumbs
$('#thumbs_list').serialScroll({
items:'li:visible',
prev:'#view_scroll_left',
next:'#view_scroll_right',
axis:'x',
offset:0,
start:0,
stop:true,
onBefore:serialScrollFixLock,
duration:700,
step: 2,
lazy: true,
lock: false,
force:false,
cycle:false
});
$('#group_22').change(function() {
$('.idTab10').toggle();
});
Sadly it doesn't work. Nothing happens. The (Yes) select ID is 22. Please advise.
I suggest you do that with jQuery.
You just have to modify the file /themes/your_theme/js/product.js
In this file, search for:
$(document).ready(function()
{
...
});
At the end of it, add the following code:
toggleCustomization(); // We launch the function on page load
$('#group_4').change(function() { // We launch the function when select is changed
toggleCustomization();
});
And right after closing $(document).ready(function(), add this function :
function toggleCustomization() { // Hide or Show Customization Form and Tab
if($('#group_4').val() == '23') { // We hide Customization Form and Tab if No is selected
$('#idTab10').hide();
$('a[href="#idTab10"]').hide();
} else { // We show Customization Form and Tab if Yes is selected
$('#idTab10').show();
$('a[href="#idTab10"]').show();
}
};
Where:
group_4 is the id of your Yes-No select
idTab10 is the id of the bloc containing all information about your customization field
23 is the value of 'No' in your select
i am working in extjs4. i have form panel with autoscroll true. I have 20-25 fields with fileUpload field at bottom. When i am uploading file, form's scroll is going to top by default. i want to keep scroll of form as it is on where it was while uploading file. So how to set this scrollBar at bottom of or at upload field section in extjs4
You can try by adding the following method to your form declaration:
scrollToField: function(fieldId) {
var field = Ext.get(fieldId);
field.el.scrollIntoView(this.body.el);
}
Here you have a working sample
IMHO,it will be better, however, to group fields using tabs or something similar to avoid having a long a and hard to read / fill form
I have solve this problem into Ext js 4.2 for Ext.form.panel
See the following code. It will helpful to you.
onRender function call on render event
onRender: function () {
this.callParent(arguments);
if (!this.restoreScrollAfterLayout) {
this.mon(Ext.get(this.getEl().dom.lastElementChild), 'scroll', this.onScroll, this);
this.restoreScrollAfterLayout = true;
}
},
onScroll: function (e ,t, eOpts) {
this.scroll = Ext.get(this.getEl().dom.lastElementChild).getScroll();
},
afterLayout: function () {
this.callParent(arguments);
if (this.restoreScrollAfterLayout && this.scroll) {
var el = Ext.get(this.getEl().dom.lastElementChild),
scroll = this.scroll;
el.scrollTo('left', scroll.left);
el.scrollTo('top', scroll.top);
}
}
I am not able to update label of each Button instance while creating instances from button.
How do I work around it? Or can I not code it as follows?
registry.byId(new Obj_Button({
id:'star'+ i,
label:'Button '+ i, //it will not work, so how to solve it???
}).placeAt(dom.byId('new1')));
Also please see my jsfiddle - http://jsfiddle.net/clementyap/sTxbh/42/
regards
Clement
Your widget needs to be coded to handle label
declare("Obj_Button", [_WidgetBase], {
postMixInProperties: function() {
if(!this.label)
this.label = 'New Button Instance';
},
buildRendering: function () {
// create the DOM for this widget
this.domNode = domConstruct.create("button", {
innerHTML: this.label
});
}
});
Also, you can just instantiate the widget, the registry.byId call is not needed.
The Sencha store is automatically adding a ajax loader mask when populating the store, but I want to hide it since I have made a more generic mask which is shown every time the app does a ajax request.
How can I hide the store load mask? Tried to look in the documentation, but didnt find any appropriate field/method there:
See attachement:
The property exists: loadingText, which you have set to null.
{
xtype: 'list',
store: 'Store',
loadingText: null, // for ST 2.3.0 set it to false
....
}
Cheers, Oleg
Olegtaranenko: Your solution does remove the loadmask, but setting the
loadingText to 'null' also seems to break the "PullToRefresh" plugin
functionality for a list.
By 'break', I mean that after pulling the arrow down to refresh, the
ui remains in this state, and does not hide the PullToRefresh section
at the top.
Is there a way to hide the additional loadmask, while retaining the
ability to pull to refresh?
For anyone that is reading this in future and is trying to achieve what I have described above, I worked around the issue with PullToRefresh by changing the original Sencha touch 1.1.1 code (line 45346 of sencha-touch-debug-with-comments.js). This is not ideal, but provides a quick workaround.
Original (PullToRefresh breaks)
onBeforeLoad: function() {
if (this.isLoading && this.list.store.getCount() > 0) {
this.list.loadMask.disable();
return false;
}
},
Workaround
onBeforeLoad: function() {
if (this.isLoading && this.list.store.getCount() > 0) {
try{ this.list.loadMask.disable(); }
catch(err) { }
return false;
}
},
Just add on your View
viewConfig: {
loadMask: false
}