The code is like below
the problem is that sometimes the contentPane with html content cannot close when the mouse move out of the cell filled with name field of the grid.
var myContentPane;
grid.on("CellMouseOver",function(evt){
var cell=evt.cell;
rowData=grid.getItem(evt.rowIndex);
if(cell.field=="name"){
require([
"dojox/layout/ContentPane",
"dijit/popup"
], function(ContentPane, popup){
if(myContentPane){
popup.close(myContentPane);
}
myContentPane = new ContentPane({
style: "width:300px;background:#dddddd",
content:"html content string has some links in it",
onMouseLeave:function(){
popup.close(myContentPane);
}
});
popup.open({
popup: myContentPane,
around: dom.byId(rowData.name),
});
});
}
});
Hi try to connect the OnMouseOut like this.
First setup your Contentpane :
myContentPane = new ContentPane({
id:"myContentPane",
style: "width:300px;background:#dddddd",
content:"<p style='text-align:center;'>"....
}, "MyContentPaneDiv");
The connect the onMouseOut:
myContentPane.on("MouseOut",function(){
//do what you want to do;
});
Think this should help u out.
Regards
Related
I have my fancybox close button diplay:none; when an iframe opens, I want the close button appears in a delay of x time. exactly like this DEMO.
Though it is solved in earlier version of fancy box in here, but in fancybox-3 It works for the first time and thereafter the close button doesn't appear until I refresh the page.
I use the following JS Code for delay:
$(document).ready(function() {
setTimeout(function() {
$(".fancybox-button--close").show();
}, 5000);
});
Any ideas? Thanks.
This is how you can access the toolbar and make it visible, if needed:
$('[data-fancybox="images"]').fancybox({
afterShow : function(instance, slide) {
setTimeout(function() {
instance.$refs.toolbar.show();
}, 3000);
}
});
Demo - https://codepen.io/anon/pen/oeWqrJ
But, if you want to toggle that small close button, here is an example:
$('[data-fancybox]').fancybox({
toolbar : false,
smallBtn : true,
afterShow : function(instance, slide) {
setTimeout(function() {
slide.$slide.find('.fancybox-close-small').show();
}, 3000);
}
});
Demo - https://codepen.io/anon/pen/oeWqRJ
Basically, you can access any element either from instance.$refs (collection of references to interface elements) or from slide.$slide (parent element of the content).
I have a container and I want to scroll to the bottom of it on trigger of an event. I have tried everything on Google but nothing seems to work.. These are the things that I have tried so far so that you dont waste any time:
1.
Ext.get('detailsViewId').scrollTo("top", -Ext.get('detailsViewId').getHeight());
2.
var mainContainer=this.getDetailContainer();
//I get the container here, so no error in the above line
mainContainer.scrollTo..................
mainContainer.element.scrollTo..................
and many more things from the "Developer Tools" of Chrome.
So nothing has worked yet so I am hoping that I can get something from Stackoverflow users.
Thanks in advance.
Sencha Touches uses a non-native ScrollableView to make containers scrollable.
You can get the ScrollableView by calling the getScrollable() method on a scrollable container. This ScrollableView uses a Ext.scroll.Scroller to apply the scrolling logic.
var scrollableView,
scroller,
containerList
containerList = Ext.Viewport.add({
scrollable: true,
// creating a few items to make the container overflow.
defaults: {
style: 'background-color: hsl(180, 45%, 85%);',
padding: 30,
margin: 20
},
items: function(){
var ar = [];
for(var i = 0; i < 30; i++) {
ar.push({ html: 'item ' + i});
}
return ar;
}()
});
scrollableView = containerList.getScrollable();
scroller = scrollableView.getScroller();
scroller.scrollBy(0,99999);
The example is runnable here: https://fiddle.sencha.com/#fiddle/5pm
note: the scroller has an method called scrollToEnd, but somehow this didn't work as expected, which is why I'm using 99999 as an scrollBy y argument.
Here's how it works for me:
var mainContainer=this.getDetailContainer();
var scroller = mainContainer.getScrollable().getScroller();
scroller.scrollToEnd(true);
I would like to customize the shape of Kendo Tooltips for a grid.
I saw the example on kendo site, it has the arrow outside the box, and the box has a nice rounded shape.
Working on css, using .k-tooltip I can change width, height, background. But I get a square box with the arrow inside which sometimes overrides part of the text content.
I thought that callout would help but I was not able to get anything.
How can I change shape, image and position of the arrows, shape of the box ?
Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible ?
Thanks a lot for any hint
regards
Marco
I think "arrow" you mean callout. You can turn off callout by:
$(document).ready(function() {
$("#target").kendoTooltip({
callout: false
});
});
About your question "Moreover, how can I trigger the tooltip only when part of the text in a grid cell is visible?"
If I understand you correctly you would like to show tooltip only when there is text with ellipsis (partially visible in the cell), but you don't want to show a tooltip if there is a full text is visible or if there is no text in the cell. If that is the case, you can do this way:
function initializeTooltip(element, filter) {
return element.kendoTooltip({
autoHide: true,
filter: filter,
callout: false,
content: function (e) {
var target = e.target,
tooltip = e.sender,
tooltipText = "";
if (isEllipsisActive(target[0])) {
tooltipText = $(target).text();
}
tooltip.popup.unbind("open");
tooltip.popup.bind("open", function (arg) {
tooltip.refreshTooltip = false;
if (!isEllipsisActive(target[0])) {
arg.preventDefault();
} else if (tooltipText !== $(target).text()) {
tooltip.refreshTooltip = true;
}
});
return tooltipText;
},
show: function () {
if (this.refreshTooltip) {
this.refresh();
}
}
}).data("kendoTooltip");
};
// determanes if text has ellipsis
function isEllipsisActive(e) {
return e.offsetWidth < e.scrollWidth;
}
$(function () {
initializeTooltip($("#yourGridId"), ".tooltip");
});
tooltip in this case is class name of the column that you would like to use tooltip for, but you can call that class anyway you wish. In case if you are using Kendo ASP.NET MVC it will look something like this
c.Bound(p => p.ClientName)
.Title("Client")
.HtmlAttributes(new {#class = "tooltip"});
Is there a way to make only part of a Packery/Draggabilly container draggable? Say, only making the .chartHeader in the below example draggable - yet having the overall .chartContainer move as one piece? Currently, only the .chartHeader is draggable and everything else stays behind. I'd like to have everything move at once like one big happy family.
Here's a fiddle: http://jsfiddle.net/uD5rG/
Thanks in advance!
<div class="chartContainer">
<div class="chartHeader">HEADER</div>
<div class="chartContent">CONTENT</div>
</div>
Here's my packery/draggabilly config:
var container = document.querySelector("#packeryContainer");
var pckry = new Packery( container, {
itemSelector: '.chartContainer',
columnWidth: 350,
rowHeight: 255,
gutter: 15
});
// make packery items draggable
var itemElems = pckry.getItemElements();
// for each item...
for ( var i=0, len = itemElems.length; i < len; i++ ) {
var elem = itemElems[i];
// get the .chartHeader element
var headerElem = elem.querySelector(".chartHeader");
// make element draggable with Draggabilly
var draggie = new Draggabilly( headerElem );
// bind Draggabilly events to Packery
pckry.bindDraggabillyEvents( draggie );
}
Fixed # http://jsfiddle.net/uD5rG/1/
I added draggabilly's handle option, as seen below
// make element draggable with Draggabilly
var draggie = new Draggabilly( elem , {
handle: '.handle'
});
Use the binding to jquery UI Draggable. It works fine for me with the jquery UI attribute handle.
http://packery.metafizzy.co/draggable.html#jquery-ui-draggable
Your solution, that you posted on jsfiddle does not work for me.
Just use the handle option like Cole mentioned.
$(function () {
var $container = $('.packery');
$container.packery({
columnWidth: 80,
rowHeight: 82 /* +2 for the bottom margin on .item */
});
// bind draggabilly events to item elements
$container.find('.item').each(makeEachDraggable);
function makeEachDraggable(i, itemElem) {
// make element draggable with Draggabilly
var draggie = new Draggabilly(itemElem, {
handle: '.header'
});
// bind Draggabilly events to Packery
$container.packery('bindDraggabillyEvents', draggie);
}
});
Here's a simple fiddle: http://jsfiddle.net/ex5TJ/
Also, have a look at this link for more details: http://draggabilly.desandro.com/
using jquery:
var draggie = $grid.find('.grid-item').draggable({
handle: '.ui-sortable-handle'
});
$grid.packery('bindUIDraggableEvents', draggie);
I try to add a text filed and a button to the grid panel in extjs with following code:
var shopIdInput = new Ext.form.TextField({
emptyText: "请输入商户Id",
width: 200
});
var deleteOneShopCacheBtn = new Ext.Button({
text : '删除商户缓存',
handler: deleteOneShopCache,
minWidth : 100,
cls: "delBtn"
});
......
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
bbar: [shopIdInput, deleteOneShopCacheBtn],
buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
items: [commandForm],
buttonAlign: 'center',
stripeRows: true,
autoExpandColumn: 'serverUrl',
//title: '批量执行指令',
sm: checkboxSelect,
frame: true,
autoHeight: true,
enableColumnHide: false,
renderTo : 'serverInfoList'
});
But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?
I usually just add an icon to the button which helps it stand out. so just set a value for
iconCls: 'mybuttonicon'
and in your css
.mybuttonicon { background-image: url(../path/to/icon) !important;}
the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.
What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.
Also see following example:
Button click event Ext JS
}