I have a toolbar which is created like this -
toolbar = new Ext.Toolbar({
docked: 'bottom',
scrollable: {direction: 'horizontal', directionLock: true},
hidden: true,
items: thumbItems
});
I am using the following code to scroll it -
toolbar.getScrollable()
.getScroller()
.scrollTo(scrollUnit * scrollAmount,
0, {type: 'slide', duration: '1000', easing: 'linear'});
It's working fine when the toolbar is visible. If this code is executed while the toolbar is hidden, the scroller simply doesn't scroll. I can see in the console that this code is being executed, but the scroller is simply not moving from it's position.
What is wrong here?
This probably happens because the way you create your toolbar is deprecated in Sencha Touch 2
You should do it like so :
Ext.create('Ext.toolbar',{
docked: 'bottom',
scrollable: {direction: 'horizontal', directionLock: true},
hidden: true,
items: thumbItems
});
Hope this helped.
Related
As I stated here, I'm having trouble in disabling gestures totally on lower resolutions.
By using breakpoints in conjunction with as said "dedicated API touch options" such as touchRatio, shortSwipes/longSwipes, allowTouchMove, allowSlidePrev/next don't produce the expected results. This is the current implementation:
swiperProject = new Swiper('.headline__container', {
direction: 'vertical',
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
speed: 500,
lazy: true,
preloadImages: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
// I tried with allowTouchMove: false, allowSlidePrev/next: false too, but nothing
touchRatio: 0,
shortSwipes: false,
longSwipes: false
},
992: {
touchRatio: 1,
shortSwipes: true,
longSwipes: true
}
}
});
Basically, my goal is to deactivate gestures on mobile in order to prevent the scrolling blocking of the body itself - these slides are currently set on vertical mode.
Anyone know how to achieve this? I read the above tries on other questions, but they don't helped me.
Thanks in advance for any help.
For now I forced pointer-events: none on mobile. Hope in the next future the team will fix these API options soon.
Thanks everyone for the attention.
Using Sencha 6.5.3, how may I configure a panel such that hideOnMaskTap is true and transparent is true?
I found this for a transparent mask:
modal: {
transparent: true
}
This is how I create the panel:
Ext.create({
xtype: 'panel',
cls: 'o-searcher-results',
hideOnMaskTap: true,
modal: {
transparent: true
},
minHeight: '30%',
maxHeight: '500px',
scrollable: true,
hidden: true
}));
but it doesn't work.
This is the sencha fiddle.
I'm using Sencha 6.5.3 modern and Sencha Cmd 6.5.3.6
Here is a way you could do it, first create a class for your mask:
.modal_mask{
background: transparent !important;
}
Then add those listeners to the panel to modify temporarily the mask class
var mymask;
var panel = Ext.create({
xtype: 'panel',
title: 'Floated',
html: 'context panel text',
anchor: true,
modal: true,
hideOnMaskTap: true,
listeners: {
show: function(win) {
//Find the mask
var dom = Ext.dom.Query.select('.x-mask');
//store it (search again on hide event doesn't work, don't know why)
mymask = Ext.get(dom[0]);
//add a new class
mymask.addCls('modal_mask');
},
hide: function(win) {
//Remove the class you just add
mymask.removeCls('modal_mask');
}
}
});
Hope that helps!
I have inherited a web page that has a slide show on it and I can't figure out how to change the width of the <article> containing the slide show. I think it is getting size via JavaScript, but I have searched and can't figure out where.
If you view source on the page you will not see a width in the article tag, but if you use firebug to look at the styles you will see:
element.style {
width: 565px;
}
I've posted a sample version here: http://208.112.58.198/help/index_new.htm.
Your element's CSS width is being applied by the jquery plugin.
/help/wp-content/themes/Cobalt3/cobalt/js/main68b3.js this file line number #339 has the following code.
$('#part-slideshow').carouFredSel({
height: 300,
width: '100%',
circular: true,
items: {
visible: 1,
height: 300,
},
scroll: {
items: 1,
fx: "crossfade",
duration: 1000,
easing: "swing"
},
auto: {
timeoutDuration: 5000,
delay: 5000,
pauseOnHover: true
},
pagination: '#pagination',
swipe: {
onTouch: true,
onMouse: true
},
responsive: true
});
The plugin binds a resize event function to the carousel elements, which sets the element width responsive to the screen size because responsive: true option is added in the call.
My image displays fine but the view can only be moved over the view until you let go of you hold. Then it pops back into it's default position.
The default position can be changed by clicking in the scrollbar (not dragging the block).
Adding a spacer didn't help.
Using layout: 'fit', just causes the image to shrink to the container size, while the container should scroll over the image.
This code should work in fiddle.sencha with framework: Sencha Touch 2.4.1 Sencha Touch
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.Viewport.add(Ext.create('Ext.Container',
{
layout: 'fit',
height: 400,
scrollable: {
direction: 'vertical',
directionLock: true
},
items: [{
xtype: 'image',
mode: 'image',
height: 1600,
src: 'http://upload.wikimedia.org/wikipedia/commons/4/46/HK-towerblock-sj.jpg'
}, {
xtype: 'spacer',
height: 50
}]
}));
}
});
So how can I get real scrolling over an image?
I'm using EXT JS 2.3 and looking at an issue that occurs with Internet Explorer 8. If you take a look at the company column in an example on this page, It is cutting off the lines that are too long such as E.I. du Pont de Nemours and Co... (just an example, not using a simple array grid; just a normal GridPanel)
That is the correct behavior I would like, which is what happens in Firefox, and later versions of Internet Explorer.
However, in Internet Explorer 8 the row is actually wrapping to take up two rows, with the last bit in the second row.
I looked in documentation for 2.3, but not finding any config options that seem to help. I tried setting autoHeight to false, but no effect. Most other questions I find are the reverse, where they want it to wrap but it doesn't.
How can I keep Internet Explorer 8 from wrapping?
Here is the javascript...
Column Model
var columnModel = new Ext.grid.ColumnModel([
{
dataIndex: 'Name',
id: 'fieldLabel',
width: parseInt(width)/4
},
{
dataIndex: 'Description',
id: 'fieldDataGrey',
width: parseInt(width)/4
}
]);
Grid Panel 1
var Grid1 = new Ext.grid.GridPanel({
id: 'Grid1',
name: 'Grid1',
store: DataStore1,
cm: columnModel,
width: parseInt(width)/2,
autoHeight: false,
collapsible: false,
frame: false,
stripeRows: false,
columnLines: true,
hideHeaders: true,
enableColumnHide: false,
disableSelection: true,
overCls: '',
loadMask: true
});
Grid Panel 2
var Grid2 = new Ext.grid.GridPanel({
id: 'Grid2',
name: 'Grid2',
store: DataStore2,
cm: columnModel,
width: parseInt(width)/2,
autoHeight: false,
collapsible: false,
frame: false,
stripeRows: false,
columnLines: true,
hideHeaders: true,
enableColumnHide: false,
disableSelection: true,
overCls: '',
loadMask: true
});
Field Set
var FieldSet = new Ext.form.FieldSet({
id: 'FieldSet',
name: 'FieldSet',
title: 'Title',
border: true,
width: width,
autoHeight: false,
labelWidth: 125,
bodyStyle: 'padding:2px; margin:0px',
style: 'padding:2px; margin:0px',
layout: 'tableform',
layoutConfig: {
columns: 2,
columnWidths:[.5, .5]
},
items: [
Grid1,
Grid2,
{
labelWidth: 125,
layout: 'form',
bodyStyle:'padding:2px 0px 0',
items: Label,//Didn't include label with posted code
colspan: 2
}
]
});
Try to use 2.2.1 ExtJs version, or 3.x. The problem I think lays in the Ext.js module in the Ext distribution, where browser versions are detected.
Ext.grid.ColumnModel has a config option called "renderer." I have used this function often for styling or DOM manipulation that Ext did not provide in the config options. You might try using the renderer function and returning an HTML string with custom styling that forces no wrapping on the data.
For instance,
renderer: function(value, metadata, record, rowIndex, colIndex, store) {
var style = 'overflow:hidden; white-space: nowrap; width: 100px;',
html = '<span style="' + style + '">' + value + '</span>';
return html;
}
Where "width" (100px in this case) is the width you defined in your column.
After further testing I did not find the solution I hoped for, but I did partially fix it by using a renderer rather than the fieldDataGrey id and using a column layout rather than the tableform layout.