In extjs form, how to neglect the horizontal scroll bar eventhough the autoscroll property is true?
try:
autoScroll: false,
overflowX: 'hidden',
overflowY: 'auto'
autoScroll: true is equivalent to:
overflowX: 'auto',
overflowY: 'auto'
So, if you just want the vertical scrollbar to be displayed, simply use the following instead of autoScroll: true:
overflowX: 'hidden',
overflowY: 'auto'
Take a look at the documentation if you want more info:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Component-cfg-autoScroll
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Component-cfg-overflowX
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Component-cfg-overflowY
Related
I'm use carouFredSel plugin for responsive carousel.
When scroll bottom (on mobile), browser address bar pannel will hide, slider update height and jump to top. And when scroll to top, browser address bar pannel will show and slider update sizes and jump to top too. How fix it?
I call callback 'updateSizes' some times and carousel calculate mobile browser url bar height) only when scroll top, and only when scroll bottom after this bar hide
$('.container').carouFredSel({
auto: false,
circular: false,
infinite: false,
responsive: true,
width: '100%',
height: 'variable',
items: {
visible: 1,
start: 1,
height: 'variable',
},
});
Here is a solution:
$(window).scroll(function () {
$("body").attr("height",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("height"))
});
ExtJS 4.1.1.
I have a panel with layout: { type: 'vbox', align: 'stretch' }. Inside it is a container with layout of {type: 'anchor', anchor: '100% 100%'} and flex: 3. Inside the container is a plain panel (containing HTML) with autoScroll: true.
Scrolling from the UI works fine. However, a call to scrollIntoView passing in the Element for the div that results has no effect.
I note that the div does has overflow-x/y: auto. However, it has a height attribute of a giant number (2241px), which I suspect is at the root of this issue.
What's going on?
//Here i am creating overlay on button tap event and loading another view using ContentEl:''. Overlay working fine with animation but i need to hide this overlay with animation when user select a particular item in that overlay.
if (!this.overlay)
{
this.overlay = Ext.Viewport.add({
xtype: 'panel',
id:'menuOverlayView',
modal: true,
hideOnMaskTap: true,
centered: true,
scroll: 'vertical',
autoDestroy:false,
floating: true,
showAnimation: {
type: 'slide',
duration: 4000,
direction:'down'
},
hideAnimation: {
type: 'slide',
duration: 4000,
direction:'up'
},
contentEl:'menuViewid',
top: Ext.os.deviceType == 'Phone' ? '20%' : '20%',
width: Ext.os.deviceType == 'Phone' ? 260 : 700,
height: Ext.os.deviceType == 'Phone' ? 220 : 600
});
}
this.overlay.show();
// And my code to hide this overlay in controller is below .I am accessing panel id and hiding the panel but panel should hide with animation like as i mentioned above hideAnimation
var overlayView=Ext.getCmp('menuOverlayView');
overlayView.setHidden(true);
//so what i should do to hide panel with with smooth scrolling up.. i am writingng below sentence but not working giving error
overlayView.hideAnimation({type: 'slide', direction: 'up', duration:1000});
To hide an overlay panel, you need to call panel's hide() method.
Ext.getCmp('menuOverlayView').hide();
and then try your hideAnimation code.
I'm getting a scrollbar in the Viewport, how can I remove it.
I know that is a strange situation because in the documentation we have this :
The Viewport does not provide scrolling, so child Panels within the Viewport
should provide for scrolling if needed using the autoScroll config.
from viewport sencha doc
My Viewport :
Ext.define('MyViewport', {
extend : 'Ext.container.Viewport',
layout : 'border',
padding : '5 5 5 5',
defaults: {
split: true,
autoScroll : false
},
initComponent : function() {
this.items = [{
region: 'north',
height: 70,
width : '100%',
split : false,
padding : '0 0 5 0',
items:[{
//here some items
}]
},{
region:'west',
collapsible: true,
width: 210,
maxWidth : 210,
autoScroll : false,
items:[{
//here some items
}]
},{
region:'center',
id : 'workspace',
//here I add panels dynamically
}];
this.callParent(arguments);
}
});
am I missing somthing ?!
Like the docs say, a viewport will never get a scrollbar applied directly on to it automatically.
But each of your regions are Ext.panel.Panel components by default which automatically get a scrollbar on overflow.
Try adding a layout: fit config to your viewport.
If that doesn't handle it, add the same config to the panel component that has the scroll bars.
I am new to sencha touch. I have a button with a compose icon. The icon appears in the right bottom corner of my button as per the given size of the button. Can anyone help me in aligning it? iconAlign attribute is not working for me.
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
action:'landedInfo'
}
You have to set the padding property to 0 because the width and height you provide are too small and therefore are messing with the 'center' value you provide for 'iconAlign':
{
xtype: 'button',
ui: 'action',
iconMask: true,
iconCls: 'compose',
iconAlign:'center',
width:35,
height: 25,
padding:0,
action:'landedInfo'
}
One way to see it is to increase to width and height to, say 100x50, then you will get a centered icon without touching the padding property...
I admit this might be tricky to spot at first.
Hope this helps
Setting the margin in css helped me put the icon in the center:
.x-tab .x-button-icon.compose,.x-button .x-button-icon.x-icon-mask.compose
{
margin-left:-5px;
margin-top:-5px;
margin-right:-7px;
margin-bottom:-5px;
}
I tries this and works for me:
{
xtype: 'button',
ui: 'normal',
text:'LOGOUT',
iconMask: true,
iconCls: 'user',
iconAlign:'center',
padding:0,
cls: 'x-iconalign-top',
}
if you use icon-font, you can do it with css.
.x-button-icon {
/*Icon centering*/
position:absolute;
width:1em;//set width of icon relative(icon is font)
top:50%;
margin-top:-0.5em;//half of icon height shift back
left:50%;
margin-left:-0.5em;//half of icon width shift back
}
You can also absolutey position a component in Sencha Touch using the top, right, bottom and left configurations of any component. This works like the position: absolute CSS code.