PDA

View Full Version : Problems with Scroll in grid inside card layout



MtAiryEd
2 Feb 2008, 5:49 PM
I have a grid inside a card layout. When the grid loads, the grid extends beyond the bottom edge of my panel, well past my 'south' panel. The scroll bar appears as it should. When I resize the browser, the grid snaps into place, not extending beyond it's bounds.

I'd like to implement a few things here that are not happening:
1) First, fix it so the scroll is in place w/o resizing the browser
2) When I resize the browser horizontally, making it smaller, I'd like the columns to resize smaller.
3) When I resize the browser vertically, I want the grid panel to resize appropriately.

I have three files.

The first is the main app, NewCardApp.jsp


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="./TestGrid.js"></script>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

function loadTab(tab){
var tabId = tab.getId();
var tabCard = Ext.getCmp('tabCard');

switch(tabId)
{
case 'salesTab':
tabCard.getLayout().setActiveItem(0);
Ext.getCmp('salesCardPanelId').getLayout().setActiveItem(0);
testData.load();

break;
default:
alert("Error in tab handler");
}
}

var salesCardPanel = new Ext.Panel({
layout:'card',
id: 'salesCardPanelId',
activeItem: 0,
//autoHeight: true,
//height: 600,
bodyStyle: 'padding:15px',
defaults: {
border:false,
bodyStyle: 'padding:15px',
autoWidth: true
},
tbar: [
{
id: 'viewAll',
text: 'View All',
handler: function(){
Ext.getCmp('salesCardPanelId').getLayout().setActiveItem(0);
}
}
],
items: [
viewAllGrid
]
});

Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:"border",
id: 'viewportId',
items:[{
region:'center',
layout: 'fit',
id: 'outerCenterPanelId',
bodyStyle: "border:0px",
items:[{
layout:'card',
id: 'tabCard',
items: [
salesCardPanel,
]
}]
},
{
region:"north",
height:70,
layout: 'fit',
items:[
new Ext.Panel({
layout:"border",
items:[{
region:"center",
items:[{
xtype:"tabpanel",
activeTab:0,
height:40,
items:[{
xtype:"panel",
title:"Sales",
id: "salesTab",
listeners:{activate:loadTab}
}
]
}]
},
{
region:"north",
height:40,
bodyStyle: 'background-color: #FFB751;',
html:" some top banner here"
}]
})
] // end north items


}, // end outer north
{
region:"south",
height: 40,
bodyStyle: 'background-color: #FFB751;',
html:" some bottom banner here"
}]
}) // close outer panel
}); // close onReady
</script>
</head>
<body>

</body>
</html>


Then the grid file called TestGrid.js


var testData = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: './testData.jsp'
}),
reader: new Ext.data.JsonReader({
root: 'dataRows',
totalProperty: 'totalCount',
fields: [
{name: "state", type: 'string'},
{name: "seller", type: 'string'},
{name: "buyer", type: 'string'},
{name: "time", type: 'string'}
]
}),
remoteSort: false
});

testData.setDefaultSort('buyer', 'asc');

var cm = new Ext.grid.ColumnModel([
{
header: "Time",
dataIndex: 'time'
},
{
header: "Buyer",
dataIndex: 'buyer'
},
{
header: "State",
dataIndex: 'state'
},
{
header: "Seller",
dataIndex: 'seller'
}
]);

cm.defaultSortable = true;

var viewAllGrid = new Ext.grid.GridPanel({
tbar: new Ext.PagingToolbar({
pageSize: 100,
store: testData,
displayInfo: true,
displayMsg: 'Displaying Sales {0} - {1} of {2}',
emptyMsg: "No Sales to Display",
items: [
'-'
]
}),
cm: cm,
id: 'viewAllGrid',
bodyStyle: 'overflow: scroll;',
store: testData,
stripeRows: true,
viewConfig: {
forceFit: true,
autoFill: true
}
});

Lastly, the data file:


{'totalCount':235,'dataRows':[{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'},{'state':'PA','seller':'Smith','buyer':'AMC','time':'1200'}]}

MtAiryEd
3 Feb 2008, 1:19 PM
Beuller??

MtAiryEd
3 Feb 2008, 1:37 PM
I'd like to implement a few things here that are not happening:
1) First, fix it so the scroll is in place w/o resizing the browser
2) When I resize the browser horizontally, making it smaller, I'd like the columns to resize smaller.
3) When I resize the browser vertically, I want the grid panel to resize appropriately.

Through experimenting, I've found that if I remove the 'autoFill:true', or make it false, then #2 above is satisfied.

Any advice on #1 & #3??

Thanks.

Condor
4 Feb 2008, 12:53 AM
A. Remove autoWidth:true from salesCardPanelId defaults.
B. Add activeItem:0 to tabCard.

MtAiryEd
4 Feb 2008, 5:54 PM
Condor:

Sweet!! Thanks so much.