I've been unable to add Scroll Bars to two views I have displaying with Ext. Each View is an extension of a base view, and the base has autoScroll: true. I've verified that the elements are properly assigned an overflow: auto property.
I've done some searching around and found this question and after applying it's solution (even though I wasn't using this 'vbox' layout) it didn't solve my problem.
Here is the base view:
Ext.define('Our.extensions.baseList', {
extend: 'Ext.view.View',
itemSelector: 'div.postContainer',
autoScroll: true,
initComponent: function(){
this.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div name="postContainer" class="postContainer">',
// Contains Layout for posts
'</div>',
{ // can run internal functions within a template
createButton: function(idPost){
// Creates layout for buttons and returns it
}
}
);
this.callParent(arguments);
}
});
And the two child views are:
Ext.define('Our.view.post.convList', {
extend: 'Our.extensions.baseList',
alias : 'widget.convList',
emptyText: 'No Conversation Followed',
title: 'Coversations',
initComponent: function(){
this.store = new Ext.create('Ext.data.Store', {
id:'convStore',
model: 'Our.model.Post',
data: []
});
this.callParent(arguments);
}
});
And:
Ext.define('Our.view.post.postList', {
extend: 'Our.extensions.baseList',
alias : 'widget.postList',
emptyText: 'No Posts',
title: 'Posts'
});
Ultimately, my question is does Ext.view.View actually support the autoScroll config property (or does it just ignore it as it seems to), which is listed in the Sencha docs as a valid config property. I know that it doesn't support the layout config hence why the linked questions solution failed to work. If it does support it, how would I go about getting the scroll bars to show up?
EDIT
Some things I've discovered in my attempts to come up with a solution, setting a size on the View itself works as long as the size is hard coded (a set number of pixels). Such as adding the config: height: 500, or a CSS class with height: 500px; but percentage sizes through CSS classes don't work at all - they don't even size the component.
SECOND EDIT
As I stated in comments to the first answer received, the component was getting the size 1063 (a note is that, the development environment is on a 1080x1920 monitor (in portrait) and with the JavaScript Console running in Chrome it's the height of the visible frame is 1063 pixels. By 'visible' I mean the postPanel that the Views are being added to.
I have found a temporary solution, unfortunately I don't think it's ideal for an actual production release - I'm using the refresh of the XTemplate to set the height of the component to the height of the panel to that of the postPanel (which sets the same height as it has been receiving) and this seems to force it to apply the scroll bars. I also added a listener to the resize event of the postPanel that fires the refresh event of the two Views.
The additions...
to the child views:
listeners: {
refresh: function() {
var parent = this.up('postPanel');
if (parent != undefined) {
this.setSize({
width: undefined,
height: parent.getHeight()
});
}
}
}
and to the postPanel:
listeners: {
resize: function() {
var postList = this.down('postList');
if (postList != undefined) {
try {
postList.fireEvent('refresh');
} catch(e) { /* ignored */ }
}
var convList = this.down('convList');
if (convList != undefined) {
try {
convList.fireEvent('refresh');
} catch(e) { /* ignored */ }
}
}
}
The main reason I feel this is not an ideal solution is that it's broken the views automatic resizing to half the width of the parent (and setting the width to parent.getWidth() / 2 in the this.setSize() call in the refresh event doesn't alter the size at all, even if the parent is resized. In addition to that, I'm not sure if this will add any overhead to slower computers or not.
