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
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
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.
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);
My requirement is that to disable a grid panel inside field set or grid rows on certain condition. The grid has more than 20 items and there should be a scroll bar to view all the elements of the grid. If I use disabled property of grid panel, then the scroll bar also gets disabled. But i need the scroll bar to be enabled, so that user can see all items of grid.
For above i coded with feildset autoscroll: true and layout:fit. But on disabling the grid panel, the scrollbar of fieldset also gets disabled because of layout:fit property of fieldset. Is there any way to achieve the requirement?
Code:
Ext.applyIf(this, {
border : false,
frame : false,
bodyStyle : 'padding:12px 15px 0px',
labelAlign : 'top',
columnWidth : 0.5,
heigth : 350,
layout : 'form',
items: [{
xtype: 'fields',
id: 'fields',
layout: 'fit',
height: 321,
autoScroll: true,
title: 'Element list',
items: mygridPanel
}]
})
I've made up a small demo on jsFiddle for you to look at:
http://jsfiddle.net/CGtqp/
does this help you solve your issue?
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'