PDA

View Full Version : Viewport background and scrolling explanation needed.



geewhizbang
14 Aug 2009, 12:32 PM
My viewport is defined in this code block. The problem is that I can't override the white background in the div created for the title area. It always is white, not matter what style or cls (css) I set.

The tab is behaving correctly by the way, the background behind the tabs is the body color.



function BuildViewPort()
{
MyAppBase.PageTabs = new Ext.TabPanel
(
{
stateful: false,
autoDestroy: false,
border: false,
hideBorders: true,
plain:true,
region:'center',
items:
[
{
title: 'Forum',
itemId: 'ForumTab',
autoLoad: '/kb/forum'
}
]
}
);
MyAppBase.PageViewPort = new Ext.Viewport
(
{
layout: 'border',
cls: 'SD_Body',
items:
[
{
region: 'north',
frame : false,
border: false,
autoHeight: true,
html:'<div id="header" class="SD_Title"><p><a href="">Web Software Help & Tutorial</a></p></div><div id="divPage"></div>'
},
MyAppBase.PageTabs
]
}
);
MyAppBase.PageTabs.setActiveTab("<% = PageTab %>");
}


The next code block is the contents for the tab. I want the area in purple to autoscroll, but it never does. I also want it to take up as much vertical space as is possible.



function ForumInit()
{
if (typeof(MyNS.gridForumList) != "undefined") return;
Ext.ns('MyNS.Forums');

var ForumTab = MyNS.PageTabs.activeTab.body;
var ForumContainer = new Ext.Container
(
{
cls: 'SD_TabHeader',
renderTo: ForumTab,
autosScroll: true,
items:
[
{
xtype: 'box',
id: 'forumBar',
cls: 'SD_TabHeaderBar',
autoHeight:true
},{
xtype: 'box',
id: 'forumHeaderBody',
cls: 'SD_TabHeaderItem',
autoScroll: true
}
]
}
);
var ForumFooter = new Ext.Container
(
{
renderTo: ForumTab,
xtype: 'box',
height: 30,
id: 'ForumFooter',
cls: 'SD_TabHeaderContent'
}
);

MyNS.Forums.Login = new Ext.Button
(
{
id: 'btnLogin',
renderTo: 'ForumFooter',
text: "Login",
handler: function () { alert("yadda") }
}
)
}