I have a Sencha Touch 2.4 website with multiple views.
All views scroll as expected on iOS and Android. But on Windows Phone they do not scroll.
When I scroll down I can see the other content, but when I stop scrolling the page scrolls back to the top.
I can also see at the scrollbar it doesn't expect the rest of the page.
Underneath the code of a view.
Ext.define('App.view.Welcome', {
extend : 'Ext.Container',
xtype : 'Welcome',
config : {
styleHtmlContent : true,
scrollable : true,
layout : 'vbox',
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Title',
items : [ {
xtype : 'button',
iconCls : 'help',
align : 'right'
} ]
}, {
xtype : 'image',
baseCls : 'logo'
}, {
xtype : 'label',
html : 'Introduction text',
width : '100%'
}, {
xtype : 'element1',
width : '100%'
}, {
xtype : 'element2'
} ]
}
});
I have tried several things. Also changes on the css.
But cannot find a solution for the scroll problem yet.
Please, Help!
I've created an issue for the AccordionList creator at GitHub.
After testing his AccordionList demo on a Windows Phone it had the same issue.
Related
I have on TextArea and in that I have given a vertical scrollbar, My textarea is readonly. But what i noticed here is my scrollbar is not visible in IE11. Top and bottom arrow is coming but scroll bar is not coming.
My Code :
Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
name : 'message',
fieldLabel: 'Message',
/* disabled : true,*/
readOnly : true,
value : 'abcaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssswwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
anchor : '100%'
}]
});
When I run this into fiddler in IE11 I'm not able to see scroll. I attach the screenshot.
Any suggestion or help.
That is just IE being IE ... if you provide specific height (like in this case I did with 100) to that textarea IE will show the scrollbar ... it is just by default ugly looking one with two big arrows:
Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
height : 100,
name : 'message',
fieldLabel: 'Message',
/* disabled : true,*/
readOnly : true,
value : 'abcaaaaaaaaasssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssswwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwweeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
anchor : '100%'
}]
});
See it here
Here is code which works fine:
"ObjectsGrid" is a Ext.grid.Panel component with lots of rows.
Ext.application({
requires : ['Ext.container.Viewport'],
name : 'crm',
appFolder : 'app',
controllers : ['Controller'],
launch : function() {
Ext.create('Ext.container.Viewport', {
id : "MainViewPort",
layout : 'fit',
applyTo : Ext.getBody(),
items : [
{
xtype: 'ObjectsGrid'
}]
});
}
});
But when I try to organize Viewport space by adding some panels (with same ObjectsGrid inside), all grid rows disappears. Looks like grid has moved outside the Viewport:
Ext.application({
requires : ['Ext.container.Viewport'],
name : 'crm',
appFolder : 'app',
controllers : ['Controller'],
launch : function() {
Ext.create('Ext.container.Viewport', {
title : 'main panel',
layout: 'fit',
bodyStyle: 'padding:5px',
applyTo : Ext.getBody(),
items: [
{
xtype: 'panel',
border: false,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
html: 'upper panel',
height: 20,
margin: '0 0 5 0'
},{
xtype: 'ObjectsGrid'
}
]
}
]
});
}
});
My grid component:
Ext.define('crm.view.ObjectsGrid' ,{
extend: 'Ext.grid.Panel',
id : "ObjectsGrid",
alias : 'widget.ObjectsGrid',
store : 'ObjectFormStore',
title : 'title',
stripeRows : false,
.....
Whats wrong with my grid?
And is it normal for big application to organize Viewport space with panels component?
There must be some "best practice"?
Whats wrong with my grid?
It is missing flex config value. Try this:
{
xtype: 'ObjectsGrid',
flex: 1
}
is it normal for big application to organize Viewport space with
panels component?
It's OK if you need a panel and it is actually Ext.panel.Panel that you need (versus say just an Ext.container.Container). In your example, the panel bearing vbox layout looks redundant: you could specify your vbox layout on the viewport directly (instead of fit).
There must be some "best practice"?
Decide what you need from usability/UX perspective. Build it with minimal complexity. Keep everything necessary / reasonable / rational. Don't let redundant stuff in, etc. etc.
P. S. If you are starting a new app from scratch, better use the latest version of ExtJS.
I have two panel and both have autoScroll: true. I want them to scroll in parallel; that is, scroll one, the other should automatically scroll as well.
My Code:
Ext.define('CompareDailog', {
extend : 'Ext.window.Window',
width : '100%',
height : '100%',
resizable : true,
closeAction : 'destroy',
editMode : false,
padding : '1 1 1 1',
layout : {
type : 'border',
align : 'left',
padding : '5 5 5 5'
},
items : [{
xtype : 'panel',
id : 'originalDocument',
title : 'Original Document',
width : '50%',
height : '100%',
region : 'west',
autoScroll : true
}, {
xtype : 'panel',
id : 'modifiedDocument',
title : 'Modified Document',
width : '50%',
height : '100%',
region : 'east',
autoScroll : true
}],
buttons : [{
text : 'Cancel',
handler : function() {
this.up('window').close();
return;
}
}]
});
I search but not found any scroll listener or move scroll to anty specific position. nay help is appreciable. Thanks
Here is the another aspect for Ext.Panel component. Basically, you can set scrollbar position of an element by body.dom property.
ExtJS - Synchronize Two Panel Scrollbars
var panelOne = Ext.getCmp('originalDocument');
var panelTwo = Ext.getCmp('modifiedDocument');
panelOne.body.on('scroll', function(e) {
panelTwo.body.dom.scrollTop = panelOne.body.getScrollTop();
})
Here is fiddle. If you have any problem, let me know.
Synchronize Two Grid with Scroll
This seems an old post but I want to share my part of answer. See, when adding synching scrollbars, problem is the mousewheel scrolling is somewhat slow.
See this fiddle.
So, what I've come up with is to add a delay to the event:
var panelOne = Ext.getCmp('originalDocument');
var panelTwo = Ext.getCmp('modifiedDocument');
panelOne.body.on('scroll', function(e) {
panelTwo.body.dom.scrollTop = panelOne.body.getScrollTop();
}, panelOne.body, {delay: 50 }); //delay 50 seems to fine to me. adjust if you must
I am trying to create a screen with Sencha Touch 2 with the following structure:
Where the red main square is a Panel,, the blue square is a container and the geen squares should be two items with HTML content in them.
Below is the code I use in the Main.js file
Ext.define('EventApp.view.Main', {
extend : 'Ext.tab.Panel',
id : 'mainView',
xtype : 'main',
requires : [ 'Ext.TitleBar', 'Ext.Video' ],
config : {
tabBarPosition : 'bottom',
items : [ {
title : 'Home',
iconCls : 'home',
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Welcome to Sencha Touch 2'
}, {
xtype : 'eventsCarrousel'
} ],
},
{
title : 'Events',
iconCls : 'time',
id : 'eventsButton',
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Events'
}, {
xtype : 'eventList',
} ]
}
]
}
});
and in the view named eventsCarrousel.js
Ext.define('EventApp.view.eventsCarrousel', {
extend: 'Ext.Container',
xtype: 'eventsCarrousel',
config: {
layout: {
type: 'vbox',
align: 'stretch'
},
items : [{
flex: 1,
html : "This is the sample top pannel." ,
style : 'background-color: #5E99CC;'
}, {
flex: 1,
html : "Second pannel.",
style : 'background-color: #4D99CC;'
}]
}
});
What I get out of this code is the following output:
Here are my problems (which I have circled in red)
In Google Chrome the title text of the main panel is not displaying although it does display if I use Netscape.
The items do not seem to be arranged using the vbox layout, although I have tried this same config in Sencha Try and did produce the desired Layout.
Could someone be so kind to point me out to what I might be doing wrong?
Extended info:
I found the following entry in stackoverflow wich pointed to the need of defining a template on the containing element ( Vbox layout issue in a tab panel ) therefore I modified my code of Main.js to add a fit layout to the component containing the eventsCarrousel
Ext.define('EventApp.view.Main', {
extend : 'Ext.tab.Panel',
id : 'mainView',
xtype : 'main',
requires : [ 'Ext.TitleBar', 'Ext.Video' ],
config : {
tabBarPosition : 'bottom',
items : [ {
title : 'Home',
iconCls : 'home',
layout: 'fit', // JUST ADDED THIS LINE
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Welcome to Sencha Touch 2'
}, {
xtype : 'eventsCarrousel'
} ],
},
{
title : 'Events',
iconCls : 'time',
id : 'eventsButton',
items : [ {
docked : 'top',
xtype : 'titlebar',
title : 'Events'
}, {
xtype : 'eventList',
} ]
}
]
}
});
After this change it still did not work when I tested it using Firefox desktop browser and it works, but it does not work when using Firefox. I thought that it was suposed to be the other way arround since Chrome is a webkit based browser.
This is the output I get in Firefox:
An this is the exact same code running in Google Chrome.
My understanding was that the recomended testing browser was Google Chrome because it was based on webkit. Is this correct? Which is the most reliable desktop browser to test sencha touch 2 development in before doing so in the mobile devices?
Thanks
Finally I got the answer through another question posted in StackOverflow.
Most of my problems were caused by - Chrome 29 bug. See how to fix this here: http://www.sencha.com/forum/announcement.php?f=90&a=43
I am building a login window with ExtJs, using the following code :
Ext.define('DTL.view.windows.LoginWindow', {
extend : 'Ext.window.Window',
alias : 'widget.login',
id : 'loginWindow',
autoShow : true,
width : 400,
height : 180,
layout : 'border',
border : false,
modal : true,
closable : false,
resizable : false,
draggable : false,
initComponent : function () {
this.items = [{
region : 'north',
height : 52,
bodyCls : 'app_header'
}, {
id : 'login_form',
region : 'center',
xtype : 'form',
bodyStyle : 'padding:10px; background: transparent;border-top: 0px none;',
labelWidth : 75,
defaultType : 'textfield',
items : [{
fieldLabel : 'Username',
name : 'username',
id : 'usr',
allowBlank : false
}, {
fieldLabel : 'Password',
name : 'password',
inputType : 'password',
id : 'pwd',
allowBlank : false
}
]
}
];
this.buttons = [{
id : 'login_button',
text : 'Login',
disabled : true
}
];
this.callParent(arguments);
}
});
Now everything looks fine, except the fact that the password field has no borders.
I tried various code modifications, but nothing helped.
Does anyone have an idea to fix this?
I am using ExtJs 4.0.7
EDIT :
I made another interesting discovery. If I add a third textfield the bug will move to that one.
Apparently it affects always the last textfield.
The problem is caused by how you create the window. See this Sencha forum post:
Textfield Border Problem
i.e. you need to use Ext.create('DTL.view.windows.LoginWindow'); rather than xtype: 'login'