PDA

View Full Version : Viewport + TabPanel + GridPanel = Missing Scroll...



danielbertini
24 Jun 2009, 9:45 AM
This is my code:

<html>
<head>
<title>Painel de Controle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="<?=base_url()?>ext/resources/css/ext-all.css" type="text/css" />
<script type="text/javascript" src="<?=base_url()?>ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<?=base_url()?>ext/ext-all.js"></script>
<script type="text/javascript">

Ext.onReady(function(){

var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'north',
contentEl:'north',
id:'north-panel',
autoScroll:true,
split:true,
height:100,
minSize:100,
maxSize:200,
collapsible:true,
title:'Painel de Controle',
margins:'5 5 0 5'
},{
region:'south',
contentEl:'south',
id:'south-panel',
autoScroll: true,
split:true,
height:100,
minSize:100,
maxSize:200,
collapsible:true,
title:'Notificações',
margins:'0 5 5 5'
},{
region:'east',
contentEl:'east',
id:'east-panel',
autoScroll:false,
split:true,
width:200,
minSize:200,
maxSize:400,
collapsible:true,
title:'Comunicador',
margins:'0 5 0 0',
layout:'accordion',
layoutConfig:{ animate:true },
items:[
{ border:false, title:'Funcionários' },
{ border:false, title:'Clientes' }
]
},{
region:'west',
contentEl:'west',
id:'west-panel',
autoScroll:true,
split:true,
width:200,
minSize:200,
maxSize:400,
collapsible:true,
title:'Menu',
margins:'0 0 0 5',
items:[treeMenu]
},{
region:'center',
contentEl:'center',
layout:'fit',
id:'center-panel',
title:'Área de Trabalho',
margins:'0 0 0 0',
items:[tabs]
}]

});

});

var treeMenu = new Ext.tree.TreePanel({
useArrows:true,
autoScroll:true,
animate:true,
containerScroll:true,
singleExpand:false,
border:false,
dataUrl:'treemenu.json',
rootVisible:false,
root:{ nodeType:'async' },
listeners:{
click:function(n){
if(n.attributes.leaf == true){
if(!tabs.findById(n.attributes.id)){
tabs.add({
id:n.attributes.id,
title:n.attributes.text,
autoLoad: {url: n.attributes.url, scripts:true },
closable:true
}).show();
}
else{
tabs.setActiveTab(n.attributes.id);
}
}
}
}
});

var tabs = new Ext.TabPanel({
enableTabScroll:true,
resizeTabs:true,
minTabWidth:100,
tabWidth:100,
deferredRender:false,
layoutOnTabChange:true,
border:false,
defaults:{ autoHeight:true, autoScroll:true },
});

</script>
</head>
<body>
<div id="west"></div>
<div id="north"></div>
<div id="east"></div>
<div id="center"></div>
<div id="south"></div>
</body>
</html>


<script type="text/javascript">

var myData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
];

// example of custom renderer function
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}

// example of custom renderer function
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
stripeRows:true,
autoExpandColumn:'company',
border:false,
autoHeight:true,
viewConfig: {forceFit:true},
columns:[
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]
});

grid.render('grid-example');

</script>

<div id="grid-example"></div>

My problem is, where is the scrollbar in grid?
Anyone can help?

cristianomaddog
13 Jul 2009, 11:00 AM
Try removing the ForceFit from the grid.

Seting the gridPanel propertie
hideMode:'offsets', might help.

Check this thread: http://extjs.com/forum/showthread.php?t=73727

Animal
13 Jul 2009, 11:13 AM
DO NOT RENDER!

What is the bolded warning in the API docs for the render method?????????????