深入浅出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:'你可以输入好几行',   //对话框显示的提示内容;
    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,
    //Ext.MessageBox预置的yes/no/cancle按钮;
    ..
  });

7.2.3 进度条
  //Ext.MessagesBox提供了默认的进度条;
  Ext.MessageBox.show({
    title:'请等待',
    msg:'读取数据中',
    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',       //弹出窗口内布局会充满整个窗口;
    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({
    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,
      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',
    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],         //嵌入表单;
    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,
    600,
    height:350,
    border:false,
    items:[nav,tabs]　　//引入nav和tabs;
  });
  win.show();