代码如下:
[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 的热心 我就放分了