布局思路: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}', ' | ', '', '
| ', '
// ,''
);
//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}', ' | ', '', '
| ', '
//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溢出的方法