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 "" + xinxi + "" } },
        { 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 "" + xinxi + "" } }, 
        { 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: "

" + record.get('newstitle') + "

" + record.get('newscontent') + "

发布人:" + record.get("newsowner") + " 发布时间:" + record.get("newstime") + "

"
    });
    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: "

" + record.get('newstitle') + "

" + record.get('newscontent') + "

发布人:" + record.get("newsowner") + " 发布时间:" + record.get("newstime") + "

"
    });
    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: '

'
                    }]
                },
                {
                    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: '

' + '   

'
                    }]
                },
                { 
                    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: '

'
                    }]
                }]
            }]
        });
        Swfu.BackMgr.mainview.Welcome.superclass.initComponent.apply(this, arguments)
    } 
});
Ext.reg('welcome',Swfu.BackMgr.mainview.Welcome);