For example I have two classes A and B, I need that when I hover over the change which is the amount, color, etc. B. I do not know if I can do this using CSS and onmouseover.
I'm putting a piece of code that handle the creation of the table and the definition of the class C.
What I need here is that when the User delecione or hover over the table activate this class C
jQuery(grid_selector).jqGrid({
url:urllst,
datatype: 'json',
height: 'auto',,
ignoreCase: true,
colNames:['UF','NAME','CITY' ],
colModel:[
{name:"uf",index:"uf", width:100, sorttype:'text', viewable: true, frozen: true, focus: true,
stype:'text',
formoptions:{elmprefix:'*', label: 'UF:', rowpos:1, colpos:1},
editable:true,
editrules: {required: true},
edittype: 'custom',
classes: 'c',
editoptions: {style: "text-transform: uppercase",
'custom_element' : macro_uf_element,
'custom_value' : macro_uf_value,
},
I believe you need to use javascript, but I could be wrong.
//grab all of the item images and make sure their popup description shows
var $contentWrapper = $("#contentWrapper");
//and bind the events that allow us to have a popup window follow the cursor
$contentWrapper.on("mouseover", className, function(event) {
var $itemDescription = $(this).parent("").find(".description");
//when the users cursor enters the item ensure that it enables vision of the popup and initialize the coordinates
updatePosition(event.clientX, event.clientY, $itemDescription);
$itemDescription.show();
});
that's a little snippet of code I use for showing a div when a user hovers over an image, I believe this is similar to what you're looking for.
Hy guys, I resolved as follows.
I declared the function mouseenter and mouseleave because only hover was setting the color and not returned to normal.
When you position the mouse over the table row selection will occur in class C.
$("#tabDados").mouseenter(function(){
$(".c").css("background-color","#eff3f8");
});
$("#tabDados").mouseleave(function(){
$(".c").css("background-color","#fff");
});
Related
I am building a webpage which includes a Gridstack grid. I initialise it like this:
<script type="text/javascript">
var grid = GridStack.init({
acceptWidgets: false, // Accept widgets from other grids or from outside.
alwaysShowResizeHandle: true, // Should resize handle be visible at all times or only at hover.
animate: false, // ???
auto: true, // Should Gridstack automaticaly initialize it's items?
cellHeight: "155px", // One cell height.
column: 48, // Number of columns to which to snap to.
disableDrag: false, // Eanble or disable dragging.
disableOneColumnMode: true, // Disable "one-column" mode when width equals minimal width.
disableResize: false, // Enable or disable resizing.
draggable: true, // ???
dragOut: true, // Prevent dragging items outside of their parent element.
float: true, // Enable floating tiles.
handle: '.grid-stack-item-content', // Select draggable handle class.
handleClass: 'grid-stack-item-content', // Select draggable handle class (override).
itemClass: 'grid-stack-item', // Choose class, which will be treated as a tile.
maxRow: 12, // Maximum rows where zero means unlimited.
minRow: 1, // Minimum rows to prevent empty grid from colapsing.
minWidth: 768, // Constant width which determines, when "one-column" mode is triggered.
oneColumnDomSort: false, // ???
placeholderClass: 'grid-stack-placeholder', // Select placeholder class.
placeholderText: '', // Text inside a placeholder.
resizable: { // Should resize handle be visible at all times or only at hover (override).
autoHide: false,
handles: 'n, nw, w, sw, s, se, e, ne'
},
removeable: false, // Enables removing of tiles if they are dragged outside of the grid.
removeTimeout: 2000, // Time in "ms" before tiles dragged out of the grid are removed.
row: 48, // Fixed number of rows where zero means unlimited.
rtl: false, // Right to left mode.
staticGrid: false, // Prevent any kind of resizing or drag & drop functionalities.
verticalMargin: 20, // Vertical gap between tiles.
});
</script>
And then I dynamicaly create a widget i.e. tile, using:
<!-- Gridstack: Example of adding a tile i.e. widget -->
<script>
grid.addWidget(`
<div>
<div class="grid-stack-item-content">
<p>...</p>
</div>
</div>`,
0,0,1,1,true,1,48,1,48,"ID");
</script>
This creates the widget in Chromium, Firefox, Edge. But not in IE11. Does anyone know what could I be doing wrong? It looks like I am doing all by the manual...
This is the console log in IE11:
And if I click on the error I get this line, where there seems to be no weird characters:
I am using tagfield and after selecting two or three values my curser moving to down. I want my cursor in same line even if a bit of space is there and after type or select any value then it move to down. Can anybody help me how to get this.
I have specify the specific width also.
My Code :
{ xtype: Tagfield,
growMax : 10,
valueField: 'title',
displayField: 'title',
parentGrid : me,
queryMode: 'local',
autoLoadOnValue:true,
multiSelect: true,
isFilterDataLoaded: false,
disabled: true,
triggers: {
clear: {
weight: -30,
cls: 'button-cross',
handler: function(){
this.clearValue();
}
}
},
}
Here is my fiddler: TagfieldFiddle.
Step to reproduce :
1. Select three tags.
2. For fourth tag cursor is going to next line. I want cursoer should be in first line.
You have to resize the input field according to the text that has been entered. Since the input field is an Ext.dom.Element, you will have to check that this works in all browsers:
listeners:{
afterrender: function(tagfield) {
var minWidth = 10, // modify here for adjustable text field width
el = Ext.getBody().createChild(),
measurer = new Ext.util.TextMetrics(el);
tagfield.inputEl.setWidth(minWidth);
tagfield.inputEl.on('keyup', function() {
var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
tagfield.inputEl.setWidth(requiredWidth+minWidth);
});
tagfield.on('change', function() {
var requiredWidth = measurer.getWidth(tagfield.inputEl.dom.value);
tagfield.inputEl.setWidth(requiredWidth+minWidth);
});
}
}
Try it here: https://fiddle.sencha.com/#view/editor&fiddle/20cb
I have changed the ExtJS version because there seems to be a bug in tag field in ExtJS 6.0 - if you enter through keyboard, the content of the input is not removed after selection.
In my project, I am trying to add the tip text (config) dynamically to a slider. How to do that?
I need to add it dynamically because I am generating the array of variables in a "Controller", which holds the text for each value of the slider (for tip text).
var slider = Ext.getCmp('slider')
slider.setTipText(arrayOfVariables) //What should I do here instead?
There is no such method like setTipText in docs. What should I use then?
EDIT:
{
xtype:'slider',
animate: false,
//plugins: [Ext.create('App.view.SliderOverride')],
cls: 'sliderStyle',
width: "80%",
id: 'slider',
value: 36/2, //must be current month
//increment: 10,
minValue: 1,
maxValue: 36,
useTips: true,
tipText: function(thumb){
alert("hello");
App.getController('TaskController')._arrMonthView[thumb.value].month;
},
},
tipText requires a function config so you can add a function that will use your variables from controller;
Ext.create('Ext.slider.Multi', {
....
tipText: function(){
return App.getController('your controller').yourVariable
},
.....
});
This is added on the creation of the slider so you don't need to modify it , just your variables in controller. So you don't need to re set the tip text function.
I solved this issue by using getText method of Ext.slider.Tip.
Used to create the text that appears in the Tip's body. By default this just returns the value of the Slider Thumb that the Tip is attached to. Override to customize.
For example in which situation it can be used, you have a look at this link
i have a cube when u click the cube a light box opens up.....
right now i need to to click outside to close the cube....
i am planning to implement a cross icon to close the cube....
can u tell me how to include the cross icon to close the cube......
providing my code below....
http://jsfiddle.net/rajkumart08/wWaKs/1/
$(window).bind('resize', function() {
location.reload();
Gallery.setOptions({
size: 78,
lightbox: false,
//animation: 'drop'
//speed: 500,
//closeOnEsc: true,
//slideshow: false,
//slideshow_speed: 3000,
//cube_speed: 1000
});
})
if you would like to use a 'close button', like the 'X' graphic in the examples above, specify its location at the top of the lightbox.js file.
var closeButton = 'close.gif';
http://lokeshdhakar.com/projects/lightbox/
how can I expand an ExtJS (version 3.3.1) Component, e.g. a Ext.Panel nested somewhere in the document hierarchy to "fullscreen" so that it takes up the whole browser window region? I guess I need to create an Ext.Viewport dynamically and reparent the component being "expanded", but I've had no success so far. Could someone provide a working sample?
Also, I'd like to be able to restore the component to its original place at some point later, if that's at all possible.
I tried the following:
new Ext.Button({ text: 'Fullscreen', renderTo : Ext.getBody(), onClick: function(){
var viewPort = new Ext.Viewport({
renderTo: Ext.getBody(),
layout: "fit",
items: [ panelToBeExpanded ]
});
viewPort.doLayout();
}});
which does not work very well. Upon clicking the button, the panel panelToBeExpanded seems to take up the viewport region, but only if there is no HTML in the BODY section, otherwise viewport is not fully expanded. Also, working with the reparented panel afterwards causes weird flicker in most browsers.
Is there a reliable way to universally (ideally temporarily) expand a component to the whole browser window?
UPDATE
Thanks to a suggestion in the comments, creating a new maximized Ext.Window seems to be a good solution. The second part is a bit tricky though - how to move the reparented component back to its original place in DOM (and ExtJS component hierarchy) once the window is closed?
Thanks for your help!
You could use Ext.Window.toggleMaximize method. I created a simple working example, check it out here
Pay attention that Ext.Window is maximized inside its rendering container, so if you use "renderTo" attribute and set it to some div inside your page Window will only be as big as div that contains it. That is why I used document body to render myWindow. Of course you could also use Ext.Window.x and Ext.Window.y configuration attributes to locate your window in wanted place.
This is a little late but stumbled upon this only now and remembered I had to do something similar and ended up overriding the text-area component which would automatically expand to full-screen on doubleclick by creating a copy of the component in a full-size window. On closing the values are automatically updated in the instantiating component which was hidden behind the full-screen window and hence never was taken out of the dom in the first place.
Here's my code I think it's fairly self-explanatory.
Hope it helps someone!
Rob.
/**
* Override for default Ext.form.TextArea. Growing to near full-screen/full-window on double-click.
*
* #author Rob Schmuecker (Ext forum name rob1308)
* #date September 13, 2010
*
* Makes all text areas enlargable by default on double-click - to prevent this behaviour set "popout:false" in the config
* By default the fieldLabel of the enhanced field is the fieldLabel of the popout - this can be set separately with "popoutLabel:'some string'" this will also inherit the same labelSeparator config value as that of the enhanced parent.
* The close text for the button defaults to "Close" but can be overriden by setting the "popoutClose:'some other text'" config
*/
Ext.override(Ext.form.TextArea, {
popout: true,
onRender: function(ct, position) {
if (!this.el) {
this.defaultAutoCreate = {
tag: "textarea",
style: "width:100px;height:60px;",
autocomplete: "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
if (this.grow) {
this.textSizeEl = Ext.DomHelper.append(document.body, {
tag: "pre",
cls: "x-form-grow-sizer"
});
if (this.preventScrollbars) {
this.el.setStyle("overflow", "hidden");
}
this.el.setHeight(this.growMin);
}
if (this.popout && !this.readOnly) {
if (!this.popoutLabel) {
this.popoutLabel = this.fieldLabel;
}
this.popoutClose = 'Close';
var field = this;
this.getEl().on('dblclick',
function() {
field.popoutTextArea(this.id);
});
};
},
popoutTextArea: function(elId) {
var field = this;
tBox = new Ext.form.TextArea({
popout: false,
anchor: '100% 100%',
labelStyle: 'font-weight:bold; font-size:14px;',
value: Ext.getCmp(elId).getValue(),
fieldLabel: field.popoutLabel,
labelSeparator: field.labelSeparator
});
viewSize = Ext.getBody().getViewSize();
textAreaWin = new Ext.Window({
width: viewSize.width - 50,
height: viewSize.height - 50,
closable: false,
draggable: false,
border: false,
bodyStyle: 'background-color:#badffd;',
//bodyBorder:false,
modal: true,
layout: 'form',
// explicitly set layout manager: override the default (layout:'auto')
labelAlign: 'top',
items: [tBox],
buttons: [{
text: field.popoutClose,
handler: function() {
Ext.getCmp(elId).setValue(tBox.getValue());
textAreaWin.hide(Ext.getCmp(elId).getEl(),
function(win) {
win.close();
});
}
}]
}).show(Ext.getCmp(elId).getEl());
}
});