We Keep Coding

Sencha Touch: Windows Phone does not scroll to end of page

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.

Extjs scroll two panels in parallel

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

menuHide gets called on clicking on expand button in a treepanel in IE9/10

Question
I have a button which when clicked shows a menu using menuShow function. The menu has a treepanel which has many parent nodes and child nodes. The problem is when we click on expand arrow of any parent child the function menuHide() gets called and instead of expanding the menu collapses. The problem is specific to IE9/10 and it is working fine with Chrome.
Code
The piece of code for button is :
'Ext.button.Button', {text: '<span class="Copy" style="color:#000000"><I>Click to select a scenario<I></span>',
listeners: {menuHide : function(btn, menu, opts) {//logic},
menuShow : function(btn, menu, opts){ //logic}},
menu : {
xtype : 'menu',
styleHtmlContent : 'true',
width : 300,
style :{
'border': '0px solid #FFFFFF'
},
shadow : false,
items : [{ xtype: 'label', width : 250, text: 'click here'},
{
xtype : 'treepanel',
autoScroll : 'true',
itemId : 'treePanelID',
height: 190,
width : 270,
store : this.store,
style : {'font-family': 'Helvetica Neue,Arial',
'font-size': '18px',
'font-weight': 'bold',
'line-height': '20px',
'letter-spacing': '0px'
},
useArrows : true,
margin : '-20 0 0 15'
columns: [{
xtype : 'treecolumn',
dataIndex : 'text',
menuDisabled : true,
width : 100,
flex : 1,
renderer : function(value, values,record)
}],
listeners : {
itemclick : function( record, index, eOpts ){
if(index.isLeaf()){ logic }
else{ logic}
} } }]}}

Checking a box in one checkboxgroup disables or hides a box with the same value in another checkboxgroup

I have an ExtJS window that has 2 separate panels with checkboxgroups. They both show the same values, but user cannot select the same item from both checkboxgroups.
I want to deal with this a little fancier than just checking and alerting a warning in both ckeckboxgroup's listeners when user selects already selected value in another checkboxgroup.
To avoid alerts, I want to either hide or disable the box.
I have tried to add hidden:true or disabled:true but no luck:
Ext.create('widget.window',
{
title : 'Select a value',
draggable : true,
modal : true,
closable : true,
closeAction : 'destroy',
width : 400,
height : 350,
layout:
{
type : 'hbox',
align : 'stretch'
},
items :
[{
xtype : 'panel',
title : 'Success',
autoScroll : true,
flex : 1,
items :
[{
xtype : 'checkboxgroup',
itemId : 'success',
columns : 1,
vertical : true,
items : yes_checkbox,
listeners :
{
change: function(field, newValue, oldValue, eOpts)
{
// newValue.rb
}
}
}]
},
{
xtype : 'panel',
id : 'panel_failure',
title : 'failure',
autoScroll : true,
flex : 1,
items :
[{
xtype : 'checkboxgroup',
itemId : 'failure',
columns : 1,
vertical : true,
items : no_checkbox,
listeners :
{
change: function(field, newValue, oldValue, eOpts)
{
// newValue.rb
}
}
}],
}],
});
I tried to get the panel_failed like Ext.getCmp('panel_failed').items.add(//something here) inside the change listener. But I cannot figure out whether the add() is the right method, and if is, what is the format to write inside the function.
Thanks

You can define itemId of all your checkboxes and then will be easy to select and disable them with setDisabled(true);

ExtJs - Strange textfield render behavior

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'