extjs布局

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 />&nbsp;&nbsp;&nbsp;&nbsp;" + 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 />&nbsp;&nbsp;&nbsp;&nbsp;" + 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 οnmοuseοver=this.focus() style="MARGIN-TOP: 1px; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-TOP: 1px; FONT-FAMILY: verdana,arial; HEIGHT:"  οnfοcus=this.select() maxLength=200 size=50 name=word>&nbsp;<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);