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?
Related
I am using ExtJS 6.0.1. I have my view port with center and east region configured with Ext.tab.Panel. I use a button to show and hide the center and north region. I could do that perfectly with show() and hide() methods. Is there a way to animate the view by sliding in any direction
xtype : 'app-main',
controller : 'main',
viewModel : {
type: 'main'
},
layout : {
type: 'border'
},
initComponent: function(){
var me = this;
Ext.applyIf(me,{
items : [{
region : 'center',
xtype : 'layoutP1',
split : true,
flex : 1
},{
region : 'east',
xtype : 'layoutP2',
layout : 'fit',
split : true,
hidden : true,
flex : 1
}]
});
I use a button at the footer to show/hide the panel in center and east region
onClickP1: function() {
this.getP2layout().flex = 2000;
this.getP1layout().show();
this.getP2.hide();
},
onClickP2View: function() {
this.getP2layout().flex = 2000;
this.getP1layout().flex = 2000;
this.getP1layout().hide();
this.getP2layout().show();
}
With this I can able to show and hide the panel but i need to animate sliding from left to right /right to left based on the region.
And is there a way to do the same using Splitters?. I can see Panel by default it comes with splitter to collapse and expand the panel.
For this you need to use slideIn on dom element (panel/veiw).
slideIn slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide effect. This function automatically handles wrapping the element with a fixed-size container if needed. See the Ext.fx.Anim class overview for valid anchor point options.
Usage:
// default: slide the element in from the top
el.slideIn();
// custom: slide the element in from the left with a 2-second duration
el.slideIn('l', { duration: 2000 });
// common config options shown with default values
el.slideIn('r', {
easing: 'easeOut',
duration: 500
});
In this FIDDLE, I have created a demo. I hope this will guide you to achieve your requirement.
Code Snippet
Ext.create('Ext.tab.Panel', {
height: window.innerHeight,
renderTo: document.body,
items: [{
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
itemId: 'p1',
layout: 'fit',
split: true
}, {
// xtype: 'panel' implied by default
title: 'East Region is collapsible',
layout: 'fit',
region: 'east',
itemId: 'p2',
xtype: 'panel',
split: true,
hidden: true
}],
buttons: [{
text: 'P1',
disabled: true,
handler: function () {
this.up('tabpanel').doHideShow(this)
}
}, {
text: 'P2',
handler: function () {
this.up('tabpanel').doHideShow(this)
}
}]
}],
//For hide/show view on basis of button click P1/P2
doHideShow: function (btn) {
btn.setDisabled(true);
if (btn.getText() == 'P1') {
this.down('#p1').show().setWidth('100%').getEl().slideIn('l');
this.down('#p2').hide();
this.down('[text=P2]').setDisabled(false);
} else {
this.down('#p2').show().setWidth('100%').getEl().slideIn('r');
this.down('#p1').hide();
this.down('[text=P1]').setDisabled(false);
}
}
});
Ext JS : ver 6.5.2.463 theme-classic (6.2.1.167)
Browser : Chrome Version 62.0.3202.94 (64-bit)
OS : Window 10 (64bit)
Few days ago I start my application as usual but encounter an awkward behavior when I opened already collapsed panel in Chrome its title bar text was blank. I tried in on another browser it was working fine there.
I tried it on another machine it was working fine there. but when the Chrome of other machine get updated the same problem is there too.
we updated our Ext JS version from 6.2.1.167(Classic) to 6.5.2.463(Classic) but the problem is still there.
we create the similar UI on the fiddle and link is attached. so you can verify it.
https://fiddle.sencha.com/#fiddle/2acg&view/editor
is there anyone else facing the same issue ?
To reproduce the issue:
1. Open the link to a fiddle.
2. Click on the expand button the title bar content will be shown.
3. Now click on the collapse then expand now content will disappear.
Screenshots are also attached.
title bar is blank there
You need to go though with this config collapseMode and also with code file of collapseMode.
In this FIDDLE, I have used your code and made some change as per your requirement. Hope this will help you or guide you to solve your problem.
Ext.create('Ext.panel.Panel', {
plugins: 'viewport',
title: 'ViewPort Title',
layout: 'fit',
tbar: [{
xtype: 'button',
text: 'Expand',
handler: function () {
var panel = this.up('panel').down('#bottomPanel');
panel.collapseMode = undefined;
panel.expand();
}
}, {
xtype: 'button',
text: 'Collapse',
handler: function () {
this.up('panel').down('#bottomPanel').collapse();
}
}],
items: [{
xtype: 'container',
layout: 'border',
items: [{
xtype: 'panel',
title: 'Center Panel Title',
region: 'center',
html: 'Sample center panel text'
}, {
xtype: 'panel',
itemId: 'bottomPanel',
title: 'Bottom Panel Title',
region: 'south',
height: 150,
collapsible: true,
collapseMode: 'mini',
collapsed: true,
layout: 'fit',
items: [{
xtype: 'panel',
html: 'Sample bottom inner panel text'
}]
}]
}]
});
I am not getting the grid row index, so i am not able to use the buffered rendering plugin method of scrollto() .On using scroll position, the grid data is not fetched since the buffered rendering plugin doesn't get information that the grids scroll position has been changed, So my grid becomes blank and on physically scrolling the grid fetches data.
Please suggest some way to load the grid data using scroll position.
Here is the code:
/*Created a grid with buffered rendering*/
var LPanel = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody(),
plugins: {
ptype: 'bufferedrenderer',
trailingBufferZone: 10,
leadingBufferZone: 10
},
});
Ext.create('Ext.button.Button', {
text: 'Click to scroll to specified scroll position',
renderTo: Ext.getBody(),
listeners: {
click: function () {
/*On clicking the button, we will scroll the grid to a specified position*/
var LProcessGGridView = LPanel.getView();
var LPGGRidViewEle = LProcessGGridView.getEl();
var LScrollbarPos = LPGGRidViewEle.getScrollTop();
/*The actual position for scrolling will be calculated on the basis of an id*/
LPGGRidViewEle.scroll('top', LScrollbarPos );
}
}
})
On scrolling, the grid becomes blank and after scrolling manually, proper data is loaded.
I have some trouble using an Ext.Panel in Sencha Touch 2.2. It works at first, but after building it can't be closed though hideOnMaskTap is true.
Here's my code:
MinPanel.js
Ext.define('MinimalPanelExample.view.MinPanel', {
extend: 'Ext.Panel',
requires: [
'Ext.dataview.List'
],
config: {
id: 'minPanel',
width: '320px',
height: '480px',
modal: true,
hideOnMaskTap: true,
html: 'minimal panel',
items: [
{
xtype: 'list',
width: '100%',
height: '100%'
}
]
}
});
Adding it in Main.js:
var minPanel = Ext.create('MinimalPanelExample.view.MinPanel');
[...]
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2',
items: [
{
xtype: 'button',
text: 'Button',
listeners: {
tap: function(button) {
minPanel.showBy(button);
}
}
}
],
},
What's curious is that the list inside the panel isn't even shown if I run the built package, it just shows the html: 'minimal panel'. There's no warnings in the Javascript console, though.
Any ideas about why that happens?
Also, feel free to tell me if my way of creating / accessing the panel in the first place is wrong.
Figured it out. You can't just Ext.create on top of the Main view file, it has to be somewhere in the Ext.define block. It works if I create the MinPanel in an initialize listener, and then get it via Ext.getCmp('minPanel') when the user presses the button.
I have a border layout in which I have to expand and collapse the east region for some views,
The screen works fine at the start, but when you click on the refresh button of the browser and if the east region is collapsed, then you got the east region as collapsed which according to my understanding should not happen because the extJS code is executed from the start every time you hit a refresh, and therefore the east region must be visible after doing a refresh.
To make the east region expanded every time a user hits a refresh
I tried to to the following
Ext.getCmp('center_panel').add({
id: 'center_panel_container',
layout: 'border',
defaults: {
'border': true
},
items:[{
id : 'header_panel',
layout: 'fit',
region: 'north',
height: 30,
items: [tbar]
},{
id: 'master_panel',
layout: 'fit',
region: 'center',
width: '60%',
bodyStyle:{"background-color":"white"},
autoScroll: true,
items: [panelLeft,panelLeftSchd,panelLeftStartUp]
}, {
id: 'report_panel',
layout: 'fit',
region: 'east',
width : '40%',
split:true,
autoScroll: true,
items: [panelRight, panelRightStartUp]
}]
});
Ext.getCmp('report_panel').expand(true);
But I am getting the following error this.el is null or not an object .
How to make the east region expanded whenever a user hits a refresh each time
Thanks,
This is happening because Ext.getCmp('report_panel') is not rendered at the time you're trying to call its expand method. That is because Ext-JS sometimes uses a setTimeout when laying out components. The simplest solution is to wait for the render event and call expand from that handler
{
id: 'report_panel',
layout: 'fit',
region: 'east',
width : '40%',
split:true,
autoScroll: true,
items: [panelRight, panelRightStartUp],
listeners: {
render: function(panel) {
panel.expand()
}
}
}
You can also wait for the afterlayout event of the parent container.
The splitter tends to remember its state, so upon refresh the splitter sets itself to the position where it was in his previous session so to make it forgot his state do the followiing
{
id: 'report_panel',
layout: 'fit',
region: 'east',
width : '40%',
split:true,
**stateful : false,**
autoScroll: true,
items: [panelRight, panelRightStartUp]
}