lyon_fanfan 2009-09-02 14:00
浏览 327
已采纳

dataview 布局问题

布局思路: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溢出的方法

  • 写回答

2条回答 默认 最新

  • iteye_10013 2009-09-02 14:56
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 关于#Mybatis#的问题:怎么办重复数据如下"KSDM":37,"KSMC":"呼吸内科门诊","ksdm":37,"ksmc":"呼吸内科门诊"xml文件填写
  • ¥40 servlet的web程序部署出错
  • ¥50 activiti 新建流程系列问题
  • ¥50 为什么我版本升级之后运行速度变慢5倍??
  • ¥15 如何在gazebo中加载机械臂和机械手
  • ¥15 纯运放实现隔离采样方案设计
  • ¥20 easyconnect无法连接后缀带.com的网站,一直显示找不到服务器ip地址,但是带有数字的网站又是可以连接上的,如何解决
  • ¥15 电脑开机过商标后就直接这样,求解各位
  • ¥15 mysql , 用自己创建的本地主机和用户名 登录不上
  • ¥15 关于#web项目#的问题,请各位专家解答!