深入淺出ExtJS 第七章 彈出窗口

7.1 Ext.MessageBox

7.1 Ext.MessageBox
  //Ext.MessageBox為我們提供的alert/confirm/prompt等完全可以代替瀏覽器原生;
7.1.1 Ext.MessageBox.alert()
  Ext.MessageBox.alert('標題','內容',function(btn){
    //參數一:窗口的標題;
    //參數二:窗口的內容;
    //參數三:回調函數;
    alert('你剛剛點擊了'+btn);
  });

7.1.2 Ext.MessageBox.confirm()
  //confirm為用戶提供了Yes和No,它們會在需要用戶作出判斷時用到;
  Ext.MessageBox.confirm('選擇框','你要選擇yes還是no?',function(btn){
    alert('你剛剛點擊了'+btn);
  });
  //用戶選擇Yes或No之后,回調函數即被調用,btn參數的值可能是yes或no,通過得到的值就可以知道用戶點擊了哪個按鈕;

7.1.3 Ext.MessageBox.prompt()
  //prompt允許用戶輸入一段字符串,然后提交給JS處理;
  //prompt還提供了兩個按鈕,用戶可以決定是否將輸入的內容提交;
  Ext.MessageBox.prompt('輸入框','你輸入帳號',function(btn,text){
    alert('你剛剛點擊了'+btn+',你剛剛輸入了'+text);
  });
  //回調函數參數一:代表用戶點擊的按鈕;
  //回調函數參數二:用戶輸入的字符;

 

7.2 對話框的更多配置--show()

7.2 對話框的更多配置--show()
7.2.1 可以輸入多行的輸入框
  Ext.MessageBox.show({
    title:'多行輸入框',       //對話框標題;
    msg:'你可以輸入好幾行',   //對話框顯示的提示內容;
    width:300,
    buttons:Ext.MessageBox.OKCANCEL,  //對話框的按鈕,Ext.MessageBox已預置;
    multiline:true,           //允許多行;
    fn:function(btn,text){    //回調函數;
      alert('你剛剛點擊了'+btn+',你剛剛輸入了'+text);
    }
  });

7.2.2 自定義對話框的按鈕
  Ext.MessageBox.show({
    ...
    buttons:Ext.MessageBox.YESNOCANCEL, 18     //Ext.MessageBox預置的yes/no/cancle按鈕;
    ..
  });

7.2.3 進度條
  //Ext.MessagesBox提供了默認的進度條;
  Ext.MessageBox.show({
    title:'請等待',
    msg:'讀取數據中',
    width:240,
    progress:true,        //顯示進度條參數;
    closable:false        //隱藏右上角的關閉按鈕;
  });
  var f = function(v){
    return function(){
      if(v == 11){
        Ext.MessageBox.hide();
      }else{
        Ext.MessageBox.updateProgress(v/10,'正在讀取第'+v+'個,一共10個');
        //updateProgress()函數讓進度條狀態發生變化;
      }
    };
  };
  for(var i=1; i<12; i++){
    setTimeout(f(i),i*1000); 
    //定時器;10秒之后進度條將隱藏;
  }
  //也可以直接使用progress函數↓↓↓↓↓
  Ext.MessageBox.progress('請等待',msg:'讀取數據中');
  >2.自動變化的進度條提示框
  Ext.MessageBox.wait('請等待',msg:'讀取數據中');

7.2.4 動畫效果
  //使用animEl:為對話框設置彈出和關閉的動畫效果;
  //對話框會依據指定的HTML元素播放彈出和關閉的動畫;
  Ext.MessageBox.show({
    ...
    animEl:'dialog'
    //對應動畫是基於id='dialog'的元素;
  });

//Ext.MessageBox =Ext.Msg
//Ext.Msg彈出的對話框都是基於同一個內部Ext.Window實例;因此不能同時使用Ext.MessageBox彈出多個對話框;頁面只會顯示最后一個窗口;

 

7.3 Ext.Window的常用屬性

7.3 Ext.Window的常用屬性
7.3.1 創建窗口--Ext.Window
  var win = new Ext.Window({
    layout:'fit',       //彈出窗口內布局會充滿整個窗口;
    width:500,          //設置窗口大小;
    height:300,
    closeAction:'hide', //點擊右上角關閉按鈕后會執行的操作;
    closable:false,     //隱藏關閉按鈕;
    draggable:true,     //窗口可拖動;
    items:[{}],         //默認會生成Ext.Panel類型的對象;並且隨窗口大小改變而改變;
    buttons:[{
      text:'按鈕'
    }]
  });
  win.show();
  //closeAction:'hide':關閉窗口時執行隱藏命令,之后還可以使用show()函數顯示剛剛關閉的窗口;
  //closeAction:'close':關閉窗口時把窗口對象銷毀;不能再執行show()了;

7.3.1 窗口的最大化和最小化
  var win = new Ext.Window({
    ..
    minimizable:true,   //窗口最小化按鈕; 需重寫minimize()函數;
    maximizable:true    //窗口最大化按鈕;
  });

7.3.3 窗口的隱藏與銷毀
  >1.closeAction:'close'
    //關閉窗口時,Ext會將窗口對象和其對應的DOM模型完全銷毀,銷毀之后的窗口無法通過調用show()函數顯示到頁面上;
  >2.closeAction:'hide'
    //關閉窗口時,自動隱藏,之后可以通過show()顯示出來;
  >3.Ext.Window.hide()/.show()
    //調用自定義函數替代closable;
  >4.closable:false     //隱藏關閉按鈕;

7.3.4 防止窗口超出瀏覽器邊界
  >1.constrain:true
    //保證整個窗口不會越過瀏覽器的邊界;
  >2.constrainHeader:true
    //值保證窗口的頂部不會越過瀏覽器的邊界;

7.3.5 設置窗口中的按鈕
  //通過buttons參數指定窗口下部的按鈕
  var win = new Ext.Window({
    ...
    defaultButton:0,      //默認第一個按鈕為選中狀態,Enter鍵即可提交;
    buttons:[{
      text:'確定',
      handler:function(){ //點擊后隱藏窗口;
        win.hide();
      }
    },{
      text:'取消'
    }]
  });
  win.show();

7.3.6 窗口的其他配置選項
  //通過resizable:控制窗口是否可以通過拖放改變大小;
  //通過resizeHandles:設置可拖拽的角度控制點;
  var win = new Ext.Window({
    width:300,
    height:100,
    closeAction:'hide',
    resizable:true,         //窗口可拖動改變大小;
    resizeHandles:'se',     //south-east:右下角可拖動;
    modal:true,             //設置彈窗之后屏蔽掉頁面上所有的其他組件;
    animateTarget:'target', //Ext彈窗從指定的HTML元素彈出或關閉窗口動畫;
    plain:true              //使窗體主體更融於框架顏色;
  });
  Ext.get('target').on('click',function(){
    win.show();
  })
  <button id="target">target</button>

 

7.4 窗口分組

7.4 窗口分組
  //在Ext中,窗口是分組進行管理的,可以對某一組中的窗口執行特定的操作;
  //窗口都在Ext.WindowMgr組中;窗口分組由Ext.WindowGroup類定義;
  var i = 0;
  function newWin() {         //自定義創建窗口函數;
    var id=i++;
    var win=new Ext.Window({  //創建窗口;
      headerPosition:'top',   //窗口標題的方位;
      title:'窗口'+id,
      width:400,
      height:300,
      maximizable:true        //窗口最大化;
    });
    win.show();
  };
  function toBack() {         //窗口層最后;
    Ext.WindowManager.sendToBack(Ext.windowManager.getActive());
    //WindowManager:窗口組;
    //getActive():當前最頂層窗口;
  };
  function hideAll() {        //隱藏所有窗口;
    Ext.WindowManager.hideAll();
  };
  Ext.onReady(function(){
    Ext.get('btn').on('click',newWin);    //點擊按鈕觸發函數;
    Ext.get('btnToBack').on('click',toBack);
    Ext.get('btnHide').on('click',hideAll);
  });

 

7.5 向窗口中放入各種控件

7.5 向窗口中放入各種控件
//窗口(window)繼承自Ext.Panel;支持在內部嵌套其他組件;
7.5.1 在窗口中加入表格
  //創建表格后不必render(),而是直接加入窗口的items參數中;
  //窗口會在顯示時自動渲染內部的組件;
  var columns = [...];
  var data = [...];
  var store = new Ext.data.ArrayStore({...});
  store.load();
  var grid = new Ext.grid.GridPanel({
    store:store,
    columns:columns,
    layout:'fit'
  });
  //表格初始化↑↑↑↑;並且沒有進行render();
  var win = new Ext.Window({
    layout:'fit',
    width:500,
    height:300,
    closeAction:'hide',
    items:[grid],           //在彈窗中嵌套表格;
    buttons:[{text:'按鈕'}]
  });

7.5.2 在窗口中加入表單
  //在form中去掉title參數;在window里設置;
  //沒有設置form的寬和高,它會根據外部窗口的大小;
  var form = new Ext.form.FormPanel({
    defaultType:'textfield',
    items:[{
      fieldLabel:'文本',
      name:'text'
    },{
      fieldLabel:'日期',
      name:'data',
      xtype:'datafield'
    }]
  });
  var win = new Ext.Window({
    layout:'fit',
    title:'嵌套表單',
    items:[form],         //嵌入表單; 43     buttons:[{text:'按鈕'}]
  });
  win.show();
  
7.5.3 復雜布局
  //左側可折疊nav,中間是Tab頁;
  var tabs = new Ext.TabPanel({
    region:'center',    //BorderLayout布局的中間;
    margins:'3 3 3 0',
    activeTab:0,
    defaults:{autoScroll:true},
    items:[{
      title:'默認',
      html:'tab1'
    },{
      title:'可關閉標簽',
      html:'tab2',
      closable:true
    }]
  });
  var nav = new Ext.Panel({
    title:'可折疊導航',
    region:'west',      //BorderLayout布局的左側;
    split:true,
    collapsible:true,
    margins:'3 0 3 3',
    cmargins:'3 3 3 3'
  });
  var win = new Ext.Window({
    title:'窗口嵌套可折疊和Tabs',
    layout:'border',    //為窗口指定BorderLayout布局;
    closable:true,
    width:600,
    height:350,
    border:false,
 items:[nav,tabs]　　//引入nav和tabs; 79   });
  win.show();