I am using owlCarousel inside an accordion. Every thing is fine until i resize the window.
After resizing if the accordion was already opened it looks perfect but if it was closed during resize the carousel height goes to 0.
I have tried to use .refres() method of owl carousel but it didn't worked.
I found the solution here.
The solution was given by ses & improvised by tofumedia
As ses quoted:
OWL start for the JS Accordion, and need a resize refresh
JS:
$('.owl-carousel').owlCarousel({
margin: 0,
responsiveClass: true,
nav: false,
dots: true,
items: 1,
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1
}
}
});
$("#accordion").accordion({
heightStyle: "content",
header: ".accordionHeadline",
collapsible: true,
active: 0,
beforeActivate: function (event, ui) {
window.dispatchEvent(new Event('resize'));
}
});
Or a more reliable solution which supports IE:
$("a[data-toggle='tab']").on('shown', function () {
var evt = document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false,window,0);
window.dispatchEvent(evt);
});
Related
I am trying to prevent fancybox 4 from closing when clicking outside of the fancybox container.
Existing answers mentioned clickSlide : false from fancybox 3 upwards.
But it does not seem to work. I am creating dynamic fancy boxes with data coming from an ajax call.
success: function (response) {
if (response.error === true) {
alert(response.errMsg);
} else {
const fancybox = new Fancybox([
{
src: response.form,
type: "html",
clickSlide: false, // disable close on outside click
touch: false, // disable close on swipe
},
], {
mainClass: 'ratingFormContainer',
fullscreen: {
autoStart: true
},
clickSlide: false,
clickOutside: false,
}
);
console.log(response.id);
}
}
I tried inserting the options under touch:false as well but that did not seem to work either.
Also: Someone with enough reputation should create a fancybox-4 tag, so that future questions can be tagged appropriately.
I'm using ag-Grid Enterprise Vue.
I see in the docs how to enable a "context menu" that is available by right-clicking any individual cell.
I instead would love to have a special column (pinned to the right) that has a button (maybe looking like ⚙ or ...) that opens a menu upon left-click.
How could I go about enabling this? I have found no examples in the docs.
Ag-grid Cell containing menu button is a similar question but has no answer.
From this comment on this ag-grid-enterprise issue, I was able to fork the example, and I think it will work for my situation.
The relevant code is:
var gridOptions = {
columnDefs: columnDefs,
enableRangeSelection: true,
getContextMenuItems: getContextMenuItems,
allowContextMenuWithControlKey: true,
onCellClicked: params => {
console.log(params);
if(params.column.colDef.field === '...'){
params.api.contextMenuFactory.showMenu(params.node, params.column, params.value, params.event)
}
},
onCellContextMenu: params => {
params.api.contextMenuFactory.hideActiveMenu()
}
};
function getContextMenuItems(params) {
console.log('getContextMenuItems', params);
const node = params.node;
console.log('node.id, node.rowIndex, node.data', node.id, node.rowIndex, node.data);
var result = [
{
name: `Alert 'Row ${node.rowIndex + 1}'`,
action: function() {
window.alert(`Row ${node.rowIndex + 1}`);
},
cssClasses: ['redFont', 'bold']
},
'separator',
{
name: 'Checked',
checked: true,
action: function() {
console.log('Checked Selected');
},
icon: '<img src="../images/skills/mac.png"/>'
},
'copy' // built in copy item
];
return result;
}
I want to highlight ExtJS Form Panel itself after a specific event. I have been trying the code added below but it just highlights the container panel which is hardly seen.
Code Snippet
myForm.getEl().highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fij
Your code is working correct. You are selecting the container element by using getEl() method on your formpanel. The textarea is covering your panel, so you see the easing effect at the bottom. If you want to highlight your fields, you have to iterate through the form fields by using the each method:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
title: 'My Form',
id: 'myform',
renderTo: Ext.getBody(),
width: 500,
height: 250,
items: [{
xtype: 'textarea',
width: '100%',
hideLabel: true,
value: 'Some text'
},
{
xtype: 'textfield',
width: '100%',
hideLabel: true,
value: 'Some other text'
}],
buttons: [{
text: 'Highlight',
handler: function() {
Ext.getCmp('myform').getForm().getFields().each(function(field) {
field.inputEl.highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
});
}
}]
});
}
});
In this working example, you are changing the background color. The standard css class contains a background image for input fields, so you have to remove it temporarily during the effect. This can be made with a custom css class to override the background-image property.
Hope it helps
....or even Better just get the form's Targeted EL.
App.myFormPanel.getTargetEl().highlight();
You won't have to manually iterate through each elements within the form.
I am having difficulties implementing the destroy method on my popup. Everything works fine, the below code works for having one popup that changes its contents depending what is clicked on. But I notice that my content (media) still plays when hiding the popup. I'd like to destroy it completely, and re-create on click. I've not really found anything in the forums that helps me achieve this, so I think it will help others too :-)
There are a couple of things confusing me, as there is already a click listener on the markers, which initiates the popup, where should I put the destroy code? Should I be declaring it as a separate function outside the popup, then calling it on beforehide somehow?
function addMarker(country)
{
if (true)
{
var image = new google.maps.MarkerImage(country.image48Path);
var marker = new google.maps.Marker({
map: map.map,
title: country.title,
position: country.position,
//draggable: true,
icon:image
});
var goToCountryWrapper = function (button, event)
{
goToCountry(country, this.popup);
};
google.maps.event.addListener(marker, 'click', function()
{
if (!this.popup)
{ ---> Should I be placing destroy code here?
this.popup = new Ext.Panel(
{
floating: true,
modal: true,
centered: true,
width: 800,
height: 600,
styleHtmlContent: true,
scroll: 'vertical',
items:[(new countryOverlay(country)).overlayPanel,
{
xtype:'button',
margin: 20,
ui:'action-round',
text:'Click here to view more promo videos',
handler:goToCountryWrapper,
scope : this
},],
layout: {
type: 'auto',
padding: '55',
align: 'left'
},
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: country.title
}],
---> Should I be placing a listener here for beforehide, destroying here?
});
};
this.popup.show('pop');
});
}
};
---> Should I be placing the destroy code after, as a seperate function?
Thanks,
Digeridoopoo
I presume you want to destroy it when you hide the popup? If so, you should listen tot he hide event and then destroy it then.
this.popup.on('hide', function() {
this.popup.destroy();
}, this);
Check this
hideOnMaskTap:true,
listeners : {
hide: function() {
this.destroy();
}
},
I have an html form in which the fields are extremely scattered. The page has been created using html table - rowspan and colspan combinations.
I need to convert this form to ExtJS and display it in a window.
After carrying out some research, I feel that table layout could be best choice for positioning the fields. But there are few issues which I have been facing as following:
If I give rowspan or colspan as 2 or more, then also the fields don't increase in size to occupy the availabe space and remain confined to single column.
If I resize the window, then the table doesn't resize (though, the form does as the tbar present at the top expand to occupy the complete space).
I have used the layout as 'fit' for window and layout as 'table' for the form.
I have also tried using 'anchor' layout for form and then having a fieldset with table layout, but the positioning didn't work.
Could someone please throw some light on this. Following is a basic code snippet I am using:
var form = Ext.create('Ext.form.Panel', {
url:'voyage_berth_monitoring.php',
fieldDefaults: {
labelAlign: 'right'
},
layout:{
type:'table',
columns:3
},
defaults:{
anchor:'100%'
},
tbar:[
{
xtype:'button',
text:'Clear'
},
{
xtype:'button',
text:'Delete'
},
{
xtype:'tbfill'
},
{
xtype:'button',
text:'Save'
},
{
xtype:'button',
text:'Exit'
}
],
items: [
{
fieldLabel:'item',
xtype:'textfield'
},
{
fieldLabel:'item',
xtype:'textfield',
colspan:2
},
{
fieldLabel:'item',
xtype:'textfield'
},
{
fieldLabel:'item',
xtype:'textfield'
},
{
fieldLabel:'item',
xtype:'textfield'
}
]
});
var win = Ext.create('Ext.window.Window', {
title: 'Window',
closable: true,
closeAction:'hide',
minimizable:true,
maximizable:true,
height:350,
width:750,
layout:'fit',
autoScroll:true,
items: form
});
win.show();
Basicly i had the same problem with the layout table, couldn't find any way to span my displayfields to the length of the td, and also the same issue with the 2 columns field.
The solution i prefered was to extend the table layout and give it that flexibility
Ext.define('Extended.TableLayout', {
alias:'layout.extendedTable',
extend: 'Ext.layout.container.Table',
type: 'extendedTable',
columns: 2,
rightMargin: 20,
tableAttrs:{
width: '100%'
},
tdAttrs:{
width:'50%'
},
itemCls:'x-table-cell',
renderItems: function(items) {
var totalWidth = this.getLayoutTargetSize().width,
len = items.length,
i, item, colNr;
for (i = 0; i < len; i++) {
item = items[i];
colNr = this.columns;
if ((colNr > 1) && Ext.isNumber(item.colspan)) {
colNr = colNr - item.colspan + 1;
}
item.width = Math.floor(totalWidth/colNr) - this.rightMargin;
}
this.callParent(arguments);
}
});
Using the extendedTable layout i get the desired look
One alternative it to serialize your HTML form data as JSON and load it into an EXT store. Once it's in a store, EXT will happily do whatever you want with it.