Extjs 2.2 Viewport實用案例之二

剛剛完工一個Extjs項目在此將其Viewport代碼總結一下。以備不時之需:

效果截圖:

 

代碼如下:

[javascript] 
var indexview = new Ext.Viewport({ 
                    layout: 'border', 
                    hideBorders : true, 
                    items:[{ 
                        border : false, 
                        region:"north", 
                        height:100, 
                        frame : true, 
                        items : [{ 
                            frame : true, 
                            layout : 'column', 
                            items : [{ 
                                bodyStyle : 'padding:0px;border:1px', 
                                columnWidth : .2, 
                                html : '<img src="images/smshhis/logo.jpg">' 
                            },{ 
                                bodyStyle : 'padding:0px;border:1px', 
                                columnWidth : .8, 
                                html : quitbtn+quickstr+curloginer 
                            }] 
                        }] 
                    }, 
                    { 
                        title:"菜單", 
                        region:"west", 
                        width:200, 
                        collapsible : true, 
                        collapsed:false, //是否自動折疊 
                        layout:'fit', 
                        split : true, 
                        margins : '0 0 0 5', 
                        items : [{ 
                                layout:'accordion', 
                                layoutConfig:{animate:true}, 
                                items : alltree 
                            }] 
                    },{ 
                            border: false, 
                            id : "centertab", 
                            region:"center", 
                            split : true, 
                            collapsible : true, 
                            layout : 'fit', 
                            items: centertabs = new Ext.TabPanel({ 
                                    plugins: new Ext.ux.TabCloseMenu(), 
                                    //id : 'centertab', 
                                    deferredRender : false, 
                                    animScroll : true, 
                                    autoTabs : true, 
                                    enableTabScroll : true, 
                                    autoDestroy : true, 
                                    border : false, 
                                    bodyStyle : 'border:0px;', 
                                    layoutOnTabChange : true, 
                                    activeTab : 0, 
                                    items : [{title : '系統信息', 
                                             frame : true, 
                                             closable:false, 
                                             autoScroll : true, 
                                             border : false, 
                                             iconCls : 'nav3', 
                                             bodyStyle : 'border:0px;' 
                                             }] 
                            }) 
                    }, 
                    { 
                        id : 'downpanel', 
                        border:false, 
                        region:"south", 
                        height:50, 
                        title:"通知", 
                        collapsible:true, 
                        html : '<marquee width=100% onmouseover="this.stop()"  onmouseout="this.start()" id="notice">'+paoma+'</marquee>' 
                    }] 
                }); 

發佈留言