ExtJS3.0之窗口应用实例

前面讲过实际应用中的弹出窗口，那里提到的只是一些默认的设置，实际中不满足用户需要，如窗口的背景色如何改变，窗口的内容如何控制等，前面讲到的例子代码如下：

 Ext.onReady(function(){
    Ext.get("btn").on("click",function(){
        var html="
你好，志玲。
";    
        newWin(html);
    });    
});
 
function newWin(html) {         
    var win=new Ext.Window({
            title:"窗口",            
            width:400,            
            height:300,            
            maximizable:true,    
            loadMask:"正在加载......",
            modal:true
        }); 
        
    win.html=html;     
    win.show(); 
}

　　执行上面的代码，如下图所示：

　　实际应用中窗口内容背景需要白色，内容跟窗口之间需要间距等，再看下面的例子代码：

 var win;
 
Ext.onReady(function(){
 
    Ext.get("btn").on("click",function(){
        var html=document.getElementById("blogArticleSortShow").innerHTML;
        newWin(html);
    });    
    
});
 
function newWin(html) {     
    if(!win){  //控制一个实例
        win=new Ext.Window({
            title:"窗口",
            layout:'fit',        
            width:400,            
            height:300,    
            closeAction:'hide',
            plain:true,
            maximizable:true,    
            loadMask:"正在加载......",
            modal:false
        }); 
    }            
    win.html=html;     
    win.show(); 
}     

   Html 页面中的内容：

     //样式：控制窗口显示
    
 
    
 
    //隐藏的窗口内容
    

        

            

                

                    

                        忘忧草博客

                        

                

                

                    

                        
                        

                

            

        

    

 

　　执行上面的代码，如下图所示：