dataview 布局问题

Question

布局思路：tabpanel中放一个panel panel中放一个dataview
外部函数调用function BuildDataView(Mudle_TypeID, Mudle_Title)
BuildDataView调用function CreateDataViewByModleID(Mudle_TypeID)

问题：当dataview中的记录数不多的时候 布局时好的 但是如果多了 需要出现上下滚动条后 我发现左右滚动条也出现了

图片：
正确的时候：

[img]http://dl.iteye.com/upload/attachment/141979/f7263067-fcbd-3e10-9fe6-1c1db1395ec8.bmp[/img]
错误的时候：

[img]http://dl.iteye.com/upload/attachment/141981/9fb30f8b-1df9-394b-b8cd-b37b4bc7dd79.bmp[/img]

代码：
[code="java"]
//用于智能提示显示
///
//------------------------内部方法------------------------
function CreateDataViewByModleID(Mudle_TypeID) {
//数据获取地址
var strGridUrl = 'json/Forum/Article.aspx?Param=list&MudleId=' + Mudle_TypeID;
//数据集格式
var fields = [
{name: 'ModuleID'},
{name: 'ArticleID'},
{name: 'strArticleTitle'},
{name: 'strAuthorName'},
{name: 'dtPublishTime'},
{name: 'ReaderNum'},
{name: 'ReplayNum'}
];
//数据集内容
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: strGridUrl
}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root',
fields: fields
})
});
var tpl = new Ext.XTemplate('', '

', '', '', '', '', '', '

', '{strArticleTitle}', '

', '', '', '', '', '', '', '', '', '', '', ' ', '作者：{strAuthorName}', ' ', '发表：{dtPublishTime}', ' ', '阅读：{ReaderNum}', ' ', '回复：{ReplayNum}', ' ', '

', '

', ''
// ,'

'
);
//DataView
store.load({
params: {
start: 0,
limit: 30
}
});
var My_DataView = new Ext.DataView({
store: store,
multiSelect: false,
emptyText: '暂无数据',
autoHeight: true,
overClass: 'x-view-over',
itemSelector: 'div.thumb-wrap',
tpl: tpl,
region: 'center',
margions: '0,0,0,0',
region: 'center'
});
//
//
var My_PTbar = new Ext.PagingToolbar({
displayInfo: true,
emptyMsg: '没有数据显示',
displayMsg: '当前显示{0}-{1}条记录,共{2}条',
store: store,
pageSize: 30,
prevText: "上一页",
nextText: "下一页",
refreshText: "刷新",
lastText: "最后页",
firstText: "第一页",
beforePageText: "当前页"
})
//构建返回Panel
return new Ext.Panel({
id: 'CenterPanel_' + Mudle_TypeID,
layout: 'fit',
autoScroll: true,
items: My_DataView,
bbar: My_PTbar
//,layout : 'border'
,
border: false,
margions: '0,0,0,0'
});
}

//------------------------外部方法------------------------
//根据moduleName 和 moduleId 创建该页
function BuildDataView(Mudle_TypeID, Mudle_Title) {
//创建Grid
var temp_DataView = CreateDataViewByModleID(Mudle_TypeID);
//创建并返回Panel
this.GirdViewPanel = new Ext.Panel({
title: Mudle_Title,
id: 'GirdViewPanel_' + Mudle_Title,
frame: false,
autoWidth: true,
autoheight: true,
autoScroll: true,
closable: true,
layout: 'fit',
collapsible: true,
items: [temp_DataView]
});
}
[/code]
[b]问题补充：[/b]
我看了一下 是不是 因为出现了纵向的滚动条的原因
纵向的滚动条会占据部分位置 所以出现了横向的滚动条？
[b]问题补充：[/b]
如何测试 是什么地方溢出的呢？请教方法 我以前没有做个这个

还有根据atian25的建议 我去掉了一个中间的panel
重新修改了布局方式：
主界面的center位置放tabpanel west位置放tree
当点击tree的时候 在tabpanel中添加一个panelA
PanelA中的就是dataview 和 pagingtool

但是还是有问题，如下图：

[img]http://dl.iteye.com/upload/attachment/142011/ff33980f-4cc2-36a7-8ba1-50d25fa31f05.bmp[/img]

图中黑框中是滚动条 虽然几乎看不见=.= 妖怪。。。

请指点一下

修改后的代码：
[code="java"]
function BuildDataView(Mudle_TypeID, Mudle_Title) {
//数据获取地址
var strGridUrl = 'json/Forum/Article.aspx?Param=list&MudleId=' + Mudle_TypeID;
//数据集格式
var fields = [{
name: 'ModuleID'
},
{
name: 'ArticleID'
},
{
name: 'strArticleTitle'
},
{
name: 'strAuthorName'
},
{
name: 'dtPublishTime'
},
{
name: 'ReaderNum'
},
{
name: 'ReplayNum'
}];
//数据集内容
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: strGridUrl
}),
reader: new Ext.data.JsonReader({
totalProperty: 'totalProperty',
root: 'root',
fields: fields
})
});
//tpl
var tpl = new Ext.XTemplate('', '

', '', '', '', '', '', '

', '{strArticleTitle}', '

', '', '', '', '', '', '', '', '', '', '', ' ', '作者：{strAuthorName}', ' ', '发表：{dtPublishTime}', ' ', '阅读：{ReaderNum}', ' ', '回复：{ReplayNum}', ' ', '

', '

', '', '

');
//DataView
var My_DataView = new Ext.DataView({
store: store,
multiSelect: false,
emptyText: '暂无数据',
autoHeight: true
//,autoWidth:true

,
tpl: tpl,
region: 'center',
margions: '0,0,0,0',
region: 'center'
});
store.load({
params: {
start: 0,
limit: 30
}
});
//
var My_PTbar = new Ext.PagingToolbar({
displayInfo: true,
emptyMsg: '没有数据显示',
displayMsg: '当前显示{0}-{1}条记录,共{2}条',
store: store,
pageSize: 30,
prevText: "上一页",
nextText: "下一页",
refreshText: "刷新",
lastText: "最后页",
firstText: "第一页",
beforePageText: "当前页"
})

//创建并返回Panel
this.GirdViewPanel = new Ext.Panel({
    title: Mudle_Title,
    id: 'GirdViewPanel_' + Mudle_Title,
    frame: false,
    autoWidth: true
    //        ,autoheight:true
    ,
    autoScroll: true,
    closable: true,
    layout: 'fit',
    collapsible: true,
    items: [My_DataView],
    bbar: My_PTbar,
    viewCofnig: {
        forceFit: true
    }
});

}
[/code]
[b]问题补充：[/b]
在FF测试了上面的代码 界面表现堪称完美 上下滚动条出来了 左右滚动条没有出来。。。 BS下IE 这个NND我怎么去改阿。。。
[b]问题补充：[/b]
解决了

1。dateview XTemplate里面的width:100%之类的也先去掉一下
2。table style="width:99%; 修改为table style="width:98%;

谢谢 atian25
如果有时间的话 希望atian25 给我说说如何查看 panel溢出的方法

Answer 1

有这个可能.但是你还是得定位到是谁溢出了.
你的panel嵌套太多了,没必要