PDA

View Full Version : Horizontal Scrool on a Panel



rafaelrp
6 Jul 2012, 9:39 AM
Hello!


I have a panel with some items(a lot of panels),
i need that panel have a horizontal scroolbar to scroll the content with the other panels,


There's a way i can do this?




Here's the code with php.


{
//title : 'Indicadores',
split : true,
region : 'north',
xtype : 'panel',
height : 150,
margins : '5 5 5 5',
layout : 'column',
bodyStyle : 'background-color: #DFE8F6; display: block;',
items : [
<?
$sql = "SELECT * FROM table";
$res = ociparse($conexao, $sql);
ociexecute($res);
while(ocifetchinto($res, $row, OCI_ASSOC)){
?>
{
xtype : 'panel',
autoScroll : true,
title : '<?=$row['desc']?>',
width : 150,
height : 100,
columnWidth : .25,
html : '',
margin : '10 10 10 10'
},
<?
}
?>
{
xtype : 'panel',
autoScroll : true,
title : test',
width : 150,
height : 100,
columnWidth : .25,
html : '',
margin : '10 10 10 10'
}
]

},


Thanks ! ~o)

scottmartin
17 Jul 2012, 5:44 PM
This should provide a scrollbar for you



Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

layout: {
type: 'fit'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'container',
autoScroll: true,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'panel',
width: 300,
title: 'My Panel'
},
{
xtype: 'panel',
width: 300,
title: 'My Panel'
},
{
xtype: 'panel',
width: 300,
title: 'My Panel'
}

]
}
]
});

me.callParent(arguments);
}

});

Ext.create('MyApp.view.MyViewport', {});


Scott