PDA

View Full Version : Ext 4 tree panel - no scrollbar in chrome, firefox, IE



Lethe
2 Oct 2011, 4:07 AM
I have the following code: one viewport, layout border, with center: a panel, west: a panel with layout accordation, containing 3 tree panels. In any of these 3 panels I do not have any scrollbars. Any help?



<script type="text/javascript">
Ext.define('FileTreeModel', {
extend : 'Ext.data.Model',
fields : [ {
name : 'id',
type : 'string'
}, {
name : 'text',
type : 'string'
} ,
]
});


function buildTree(rootId, rootText, panelTitle) {
var tree = Ext.create('Ext.tree.Panel', {
store : Ext.create('Ext.data.TreeStore', {
model : 'FileTreeModel',
root : {
id : rootId,
nodeType : 'async',
text : rootText,
visible : false,
expanded:true

},
proxy : {
type : 'ajax',
url : 'buildTree'
}
}),
listeners : {
itemclick : {
fn : function(view, record, item, index, event) {
//the record is the data node that was clicked
//the item is the html dom element in the tree that was clicked
//index is the index of the node relative to its parent
nodeId = record.data.id;
htmlId = item.id;
alert('here');
}
}
},
rootVisible:false,
title : panelTitle,
useArrows : true,

frame : true,
border : true,
autoHeight: true,
autoScroll: true
});
return tree;
}


var centerPanel = Ext.create('Ext.Panel', {
region : 'center',
layout : 'fit',
frame : true,
border : false
});

var treePanel = Ext.create('Ext.Panel', {
region : 'west',
layout : 'accordion',
frame : true,
border : true,
width : 350,
split: true,
collapsible : true,
collapseMode : 'mini',
items : [ buildTree('<%=ExtKeys.MUSIC_TREE_ROOT%>','Music', 'Music'), buildTree('<%=ExtKeys.PICTURES_TREE_ROOT%>','Pictures', 'Pictures'), buildTree('<%=ExtKeys.DOCUMENTS_TREE_ROOT%>','Documents', 'Documents') ],
title : userName + '\'s home content'
});


Ext.onReady(function() {
Ext.QuickTips.init();
new Ext.Viewport({
id : 'mainViewPortId',
layout : 'border',
border : false,
items : [ centerPanel, treePanel],
renderTo: Ext.getBody()
});


});
</script>


28454