〖ExtJS〗之對話框

 

傳統的alert,confirm等方法產生的對話框不好話，下面就看看ExtJS做的對話框的效果

 

一、普通的對話框：

 

Ext.onReady(function(){
      Ext.get("btn").on("click",function(){   //普通的彈出提示框
      Ext.MessageBox.alert("請注意","這是ExtJS的提示框");
      });
});

 

 

二、彈出選擇的提示框:

Ext.onReady(function(){
   Ext.get("btn").on("click",function(){  //彈出選擇的提示框
        Ext.MessageBox.confirm("請確認","是否真的要刪除指定的內容",function(button,text){
        alert(button);
        alert(text);
        });
      });
});

 

 

三、需要輸入內容的對話框：

Ext.onReady(function(){
     Ext.get("btn").on("click",function(){   //需要輸入內容的對話框
    Ext.MessageBox.prompt("輸入提示框","請輸入你的新年願望:",function(button,text){
        if(button=="ok"){
      alert("您的新年願望是:" + text);
        }else
          alert("你放棄了錄入！");  
    });
      });
});

 

 

四、自定義對話框：

function save(button){
      if(button=="yes"){
    //執行數據庫保存操作
      }else if(button=="no"){
    //不保存數據
      }else{
    //取消當前操作
      }
  }
Ext.onReady(function(){
    Ext.get("btn").on("click",function(){
    Ext.Msg.show({
        title:"保存數據",
        msg:"你已經作了一些數據操作，是否要保存當前內容的修改？",
        buttons:Ext.Msg.YESNOCANCEL,
        fn:save,
        icon:Ext.MessageBox.QUESTION
    });
      });
    
});