布局问题

代码如下:
[code="java"]
function BrowerArticle(ArticleID, ArticleTitle) {
//判断 如果存在 就直接跳转
var temp_Tab_Center = Ext.getCmp('id_Tab_Center');
//如果存在 就跳转到该页
for (var i = 0; i < temp_Tab_Center.items.length; i++) {
if (temp_Tab_Center.items.items[i].id == 'Article_' + ArticleID) {
temp_Tab_Center.activate(temp_Tab_Center.items.items[i]);
return;
}
}
//----------------------------页面内容 begin--------------------------------
//-->帖子题目
var ArticleTitleLabel = new Ext.form.Label({
id: 'ArticleTitleLabel_' + ArticleID
, name: 'ArticleTitleLabel_' + ArticleID
, text: ArticleTitle
, style : 'font-size:x-large;color:Blue'
});
//-->帖子内容
//数据获取地址
var strGridUrl = 'json/Forum/Article.aspx?Param=BrowerArticle&ArticleID=' + ArticleID;
//数据集格式
var fields = [
{name:'RevertID'},
{name:'ArticleID'},
{name:'dtPublish'},
{name:'UserId'},
{name:'UserName'},
{name:'RevertContent'},
{name:'IntSupport'},
{name:'IntAgainst' }
];
//数据集内容
var store = new Ext.data.Store
({
proxy: new Ext.data.HttpProxy({ url: strGridUrl }),
reader: new Ext.data.JsonReader({ totalProperty: 'totalProperty', root: 'root', fields: fields })
});
store.load({ params: { start: 0, limit: 40} });

//DataView
var tpl = new Ext.XTemplate(
''
, '

'
, ''
, ''
, ''
, ''
, ''
, ''
, ''
, '
'
, '{UserName} 发表于: {dtPublish}'
, '
'
, '{RevertContent}'
, '
'
, '
'
, '
'
, ''
);
var BrowerArticle_DataView = new Ext.DataView({
store: store
, id: 'BrowerArticle_DataView_' + ArticleID
, multiSelect: false
, emptyText: '暂无数据'
, autoHeight: true
, autoWidth: true
, tpl: tpl
, overClass: 'x-view-over'
, itemSelector: 'div.thumb-wrap'
});
//pagingtool
var My_PTbar = new Ext.PagingToolbar({
store: store,
displayInfo: true,
emptyMsg: '没有数据显示',
displayMsg: '当前显示{0}-{1}条记录,共{2}条',
pageSize: 30,
prevText: "上一页",
nextText: "下一页",
refreshText: "刷新",
lastText: "最后页",
firstText: "第一页",
beforePageText: "当前页"
});
//回覆內容
var ReplayContent = new Ext.form.TextArea({
id:'ReplayContent',
name:'ReplayContent',
fieldLabel:'回 复',
allowBlank : false,
anchor:'90%',
height:340,
allowBlank : false
});
//取消 按鈕
var CancleButton = new Ext.Button({
text:'取 消'
,tooltip:'取 消'
});

//确定 按钮
var OKButton = new Ext.Button({
text:'提 交'
,tooltip:'提 交'
});

//-->整体Panel
var BrowerArticlePanel = new Ext.Panel({
    title: ArticleTitle.substring(0,4)
    ,tabTip  : ArticleTitle
    , id: 'Article_' + ArticleID
    , frame: true
    , autoWidth: false
    , autoheight: false
    , autoScroll: true
    , closable: true
    , layout: 'column'
    , items: [{
            columnWidth:1,
            style: 'text-align:center',
            autoScroll : false,
            items:[ArticleTitleLabel]
        },
        {
            columnWidth:1,
            autoScroll : false,
            autoWidth:false,
            autoHeight : false,
            items:[BrowerArticle_DataView],
            bbar : My_PTbar
        },
        {
            columnWidth:1,
            layout:'form',
            autoScroll : false,
            items:[ReplayContent],
            buttons:[CancleButton,OKButton]
        }
    ]
});
//如果没有 创建该页 并跳转到该页
temp_Tab_Center.add(BrowerArticlePanel);
temp_Tab_Center.activate(BrowerArticlePanel);

}
[/code]

实现的效果是一个帖子浏览页面 这个页面最终会放到主页面temp_Tab_Center中
最后上面是一个标题 中间是dataview显示帖子内容 dataview下面是pageingToolBar用作分页 最下面是一个跟帖的内容
现在碰到的问题是 我帖子里面如果有图片的话 会出现横向的滚动条 虽然图片宽度没有超过页面的宽度 请问大家这个是为什么啊?

结果图如下:

[img]http://dl.iteye.com/upload/attachment/155963/37aa5883-a0b2-3e40-a0c8-d0235a38cb5a.gif[/img]

[b]问题补充:[/b]
lovewhzlq:
autoScroll: true 这里改为false看看
这样的话 上下滚动条 就不显示了 并且 当图片超大的时候 横向滚动条还是需要显示的

jim.jin:
那有什么 解决方法么?
[b]问题补充:[/b]
我将, layout: 'column' 就该为 border:‘column’ 错误不再出现了 排版正常了 谢谢各位 虽然没有正确答案 为了谢谢jim.jin 的热心 我就放分了

2个回答

是因为IE把纵向滚动条本身的宽度算在正个宽度里面,当纵向滚动条出来时就有这问题。

//-->整体Panel

var BrowerArticlePanel = new Ext.Panel({

title: ArticleTitle.substring(0,4)

,tabTip : ArticleTitle

, id: 'Article_' + ArticleID

, frame: true

, autoWidth: false

, autoheight: false

, [color=red]autoScroll: true [/color]这里改为false看看

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问