extjs布局

Shion1987

关注

翻译最新推荐文章于 2026-05-21 07:54:23 发布 639 阅读 AI 写同款· GEO 优化 ›

ExtJS之布局篇 Ext布局总的来说是很灵活的，因此我觉得有必要一块探讨一下。 Ext常用的布局都在Ext.layout下，这里几乎涵盖了所有的布局方式（但是值得注意的是通常我们不是直接通过"new"来创建这些类的对象然后往里面添加控件使用，而是作为控件一个配置属性使用让Ext自动创建对应的类），满足开发者需求。那么我们就其中常用的方式逐一介绍。 Border布局 Border布局是Ext中常用布局方式（经常用到整个页面的总体布局），感觉用的几率很大。在看代码之前先熟悉一种特殊的容器ViewPort，它是对于浏览器视窗阅读详情

Ext.namespace("Swfu");
Ext.namespace("Swfu.BackMgr.mainview");

GongGao = new Ext.grid.GridPanel({
id: 'noticeGrid',
border: false,
layout: 'fit',
store: GGstore = new Ext.data.Store({
url: '/newsinfo.mvc/FindNewsinfoByClassify',
reader: new Ext.data.JsonReader({
id: 'noticeReader',
fields: ["newsid", "newsclassify", "newscontent", "newstitle", "newsdesc", "newsowner", "newstime"]
})
}),
columns: [
new Ext.grid.RowNumberer({ hidden: true }),
{ header: '标题', width: '110%', autowidth: true, dataIndex: 'newstitle', renderer: function(value) { var xinxi = value.length > 23 ? value.substring(0, 23) + "..." : value; return "<img src='../Content/images/home/news6.gif' width='14px' height='14px'><a href='#'>" + xinxi + "</a>" } },
{ header: '时间', hidden: false, dataIndex: 'newstime', renderer: function(value) { return value.substring(0, 10) } }
],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
autoHeight: true,
autoWidth: true,
hideHeaders: true,
loadMask: true
});
GGstore.load({ params: { classify: '最新公告'} });

DongTai = new Ext.grid.GridPanel({
id: 'dontaiNews',
border: false,
store: DTStore = new Ext.data.Store({
url: '/newsinfo.mvc/FindNewsinfoByClassify',
reader: new Ext.data.JsonReader({
id: 'DongtaiReader',
fields: ["newsid", "newsclassify", "newscontent", "newstitle", "newsdesc", "newsowner", "newstime"]
})
}),
columns: [
new Ext.grid.RowNumberer({ hidden: true }),
{ header: '标题', width: '90%', dataIndex: 'newstitle', renderer: function(value) { var xinxi = value.length > 23 ? value.substring(0, 23) + "..." : value; return "<img src='../Content/images/home/notice4.gif' width='14px' height='14px'><a href='#'>" + xinxi + "</a>" } },
{ header: '时间', dataIndex: 'newstime', renderer: function(value) { return value.substring(0, 10) } }],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
autoHeight: true,
autoWidth: true,
hideHeaders: true,
loadMask: true
});
DTStore.load({ params: { classify: '社会动态'} });

DongTai.addListener("rowclick", cellclick);
function cellclick(grid, rowIndex, e) {
var selections = this.selModel.getSelections();
var record = selections[0];
var win = new Ext.Window({
title: '最新动态--' + record.get('newstitle'),
width: 900,
bodyStyle: 'background-color:#FFFFFF',
height: 500,
modal: true,
autoScroll: true,
resizable: true,
maximizable: true,
minimizable: true,
autoDestroy: true,
html: "<table align='center' width='90%' height='90%'><tr><td id='tdTitle'>" + record.get('newstitle') + "</td></tr><tr><td valign='top' id='tdContent'><hr />    " + record.get('newscontent') + "</td></tr><tr><td id='tdZz'><hr />发布人:" + record.get("newsowner") + " 发布时间:" + record.get("newstime") + "</td></tr></table>"
});
win.show()
}

GongGao.addListener("rowclick", cellclick2);
function cellclick2(grid, rowIndex, e) {
var selections = this.selModel.getSelections();
var record = selections[0];
var win = new Ext.Window({
title: '最新公告--' + record.get('newstitle'),
width: 900,
bodyStyle: 'background-color:#FFFFFF',
height: 500, modal: true,
autoScroll: true,
resizable: true,
maximizable: true,
minimizable: true,
autoDestroy: true,
html: "<table align='center' width='90%' height='90%'><tr><td id='tdTitle'>" + record.get('newstitle') + "</td></tr><tr><td valign='top' id='tdContent'><hr />    " + record.get('newscontent') + "</td></tr><tr><td id='tdZz'><hr />发布人:" + record.get("newsowner") + " 发布时间:" + record.get("newstime") + "</td></tr></table>"
});
win.show()
}

Swfu.BackMgr.mainview.Welcome = Ext.extend(Ext.TabPanel, {
initComponent: function() {
var tools = [{ id: 'close', handler: function(e, target, panel) { panel.ownerCt.remove(panel, true) } }];
Ext.apply(this, {
activeTab: 0,
autoScroll: false,
tabPosition: 'button',
layoutOnTabChange: true,
items: [
{
layout: 'column',
items: [
{
columnWidth: .50,
style: 'padding:10 10 10 10',
border: false,
layout: 'fit',
draggable: true,
items: [{
title: '最新公告',
layout: 'column',
bodyStyle: 'background-color:#FFFFFF',
tools: [{ id: 'refresh', handler: function() { GGstore.reload() } }, { id: 'close', handler: function(e, target, panel) { panel.ownerCt.remove(panel, true) } }],
margins: '0',
height: 200,
frame: true,
items: GongGao
}]
},
{
columnWidth: .50,
style: 'padding:10 10 10 10',
border: false,
draggable: true,
layout: 'fit',
items: [{
title: '社会动态',
layout: 'column',
bodyStyle: 'background-color:#FFFFFF',
tools: [{id: 'refresh',handler: function() { DTStore.reload() } },
{ id: 'close', handler: function(e, target, panel) { panel.ownerCt.remove(panel, true) } }],
margins: '0',
height: 200,
frame: true,
items: DongTai}]
},
{
columnWidth: .25,
style: 'padding:5 10 10 10',
border: false,
draggable: true,
items: [{
title: '日历',
layout: 'form',
tools: tools,
collapsible: true,
margins: '0',
height: 200,
frame: true,
html: '<p align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="170" ><param name="movie" value="../Content/flash/calculator.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="../Content/flash/calculator.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="170"></embed></object></P>'
}]
},
{
columnWidth: .50,
style: 'padding:5 10 10 10',
border: false,
draggable: true,
items: [{
title: '百度搜索',
layout: 'column',
tools: tools,
margins: '0',
collapsible: true,
height: 200,
frame: true,
html: '<p align="center"><br /><br /><img src="../Content/images/head.png" width="350px" > <br /><br /><br /><FORM name=f action=http://www.baidu.com/s>' + '<INPUT onmouseover=this.focus() style="MARGIN-TOP: 1px; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-TOP: 1px; FONT-FAMILY: verdana,arial; HEIGHT:" onfocus=this.select() maxLength=200 size=50 name=word> <INPUT style="FONT-SIZE: 12px; MARGIN-BOTTOM: -1px; WIDTH: 6em; PADDING-TOP: 2px; HEIGHT: 2em" type=submit value=百度一下> </FORM></p>'
}]
},
{
columnWidth: .25,
style: 'padding:5 10 10 10',
border: false,
draggable: true,
items: [{
title: '时钟',
layout: 'column',
tools: tools,
margins: '0',
height: 200,
collapsible: true,
frame: true,
html: '<p align="center"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" style="height: 160px; "><param name="movie" value="../Content/flash/clock144.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="../Content/flash/clock144.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="160"></embed></object></P>'
}]
}]
}]
});
Swfu.BackMgr.mainview.Welcome.superclass.initComponent.apply(this, arguments)
}
});
Ext.reg('welcome',Swfu.BackMgr.mainview.Welcome);