ExtJS最常用功能总结，不看不后悔

2019独角兽企业重金招聘Python工程师标准>>>

1.定时刷新下拉框
var data = [[null, '不刷新'], [2000, '10分钟'], [1200000, '20分钟'],
     [1800000, '30分钟'], [2400000, '40分钟'], [3000000, '50分钟'],
     [3600000, '60分钟']];
var intervalStore = new Ext.data.SimpleStore({
     fields : ['name', 'interval'],
     data : data
    });
  var actAutoRefresh = new Ext.form.ComboBox({
     fieldLabel : '定时刷新',
     name : 'setTime',
     store : intervalStore,
     mode : 'local',
     triggerAction : 'all',
     editable : false,
     width : 100,
     emptyText : '定时刷新',
     // enableKeyEvents : true,
     valueField : 'name',
     displayField : 'interval'
    });
  function ref() {
   grid.store.reload();
  }
  var timeV;
  actAutoRefresh.on("select", function(comboBox) {
     if (comboBox.getValue() != null) {
      if (tmpTimer != null) {
       window.clearInterval(tmpTimer);
      }
      tmpTimer = window.setInterval(ref, comboBox.getValue());
     } else {
      window.clearInterval(tmpTimer);
     };
    });
2.正在加载提示
new Ext.LoadMask(Ext.getBody(), {
     store : store,
     msg : "正在加载数据，请稍等..."
    })   
3.在grid的单元格上悬浮提示框
  gridToolTip1(grid);

  function gridToolTip1(grid) {
   if (!grid)
    return;
   grid.on('render', function(grid) {
    try {
     var store = grid.getStore(); // Capture the Store.
     if (!store)
      return;
     var view = grid.getView(); // Capture the GridView.
     if ((!view) || (!view.mainBody))
      return;
     var cm = grid.getColumnModel();
     if (!cm)
      return;

     var tip = new Ext.ToolTip({
      target : view.mainBody, // The overall target element.
      delegate : '.x-grid3-cell-inner', // Each grid row
      // causes its own
      // seperate show and
      // hide.
      trackMouse : true, // Moving within the row should not
      // hide the tip.
      autoHeight : true,
      minWidth : 300,
      maxWidth : 300,
      mouseOffset : [-100, 0],
      renderTo : document.body, // Render immediately so
      // that tip.body can be
      // referenced prior to the
      // first show.
      listeners : { // Change content dynamically depending
       // on which element triggered the show.
       beforeshow : function updateTipBody(tip) {
        try {
         tip.body.dom.innerHTML = '';
         if (tip.triggerElement) {
          var rowIndex = view
            .findRowIndex(tip.triggerElement);
          var cellIndex = view
            .findCellIndex(tip.triggerElement);
          if (((rowIndex == 0) || rowIndex)
            && ((cellIndex == 0) || cellIndex)
            && store) {
           var fieldName = cm
             .getDataIndex(cellIndex);
           if (fieldName) {
            if (fieldName.substring(0, 3) != 'TAB')
             return false;
            var rec = store.getAt(rowIndex);
            if (rec) {
             var content = rec
               .get(fieldName);
             if (!content
               || content == '')
              return false;
             if (content == '0') {
              var institute_name = rec
                .get("institute_name")
              Ext.Ajax.request({
               url : linkGetExceptionsText,
               params : {
                institute_name : institute_name,
                jhbm : fieldName
               },
               success : function(
                 response,
                 options) {
                var data = Ext
                  .decode(response.responseText);
                tip.body.dom.innerHTML = data.data.exceptionsText;
               }
              });
              return true;
             }
            }
           }
          }
         }
        } catch (e) {
        }
        return false;
       }

      }
     });
    } catch (e) {
    }
   });
  }
//page类里的处理程序
 public boolean onLinkGetExceptionsText() {
  String institute_name = PageUtils.getLinkParameter(
    linkGetExceptionsText, "institute_name", null);
  String jhbm = PageUtils.getLinkParameter(linkGetExceptionsText, "jhbm",
    null);
  String model = "IRC_" + jhbm.substring(4, 6);

  DataSource hr_ds0 = DBConnectionPool.getInstance().getDataSource(
    "local_irc");
  String sql = "select code from BF_BIZ_CODE where name='"
    + institute_name + "'";
  List<Map<String, Object>> mapList = new JdbcTemplate(hr_ds0)
    .queryForList(sql);
  String jgbh = null;
  if (mapList.size() != 0) {
   jgbh = (String) mapList.get(0).get("code");
  }

  DataSource dataSource = DBConnectionPool.getInstance().getDataSource(
    model);
  String sql1 = "select jhxx,jhkssj from exchange_log where jhxxlx='交换异常信息' "
    + "and jgbh = '"
    + jgbh
    + "' and jhbm= '"
    + jhbm
    + "'"
    + "and jhkssj=(select max(jhkssj) from exchange_log where jgbh='"
    + jgbh + "' and jhbm='" + jhbm + "')";
  mapList = new JdbcTemplate(dataSource).queryForList(sql1);
  String exceptionsText = "";
  if (mapList.size() != 0) {
   for (int i = 0; i < mapList.size(); i++) {
    Date jhkssj = (Date) mapList.get(i).get("jhkssj");
    exceptionsText += jhkssj.toString();
    String str = (String) mapList.get(i).get("jhxx");
    if (str == null || "null".equals(str))
     continue;
    exceptionsText += (String) mapList.get(i).get("jhxx") + '\n';
   }
  }
  Map<String, String> map = new HashMap<String, String>();
  map.put("exceptionsText", exceptionsText);
  DataResponse dr = new DataResponse(map);
  dr.setSuccess(true);
  directPrint(marshal(dr));
  return true;
 }
4.store的一种形式
     var store = new Ext.data.JsonStore({
            fields : ${fields},
            root: 'data',
          proxy: new Ext.data.HttpProxy({//用于访问数据对象
              url: '${linkGet.href}'
          })
         });
 
  var store=new  Ext.data.Store({
  url:"hello.xml",
  render:new Ext.data.XmlReader({
   record:"row"
  },["id","name","organization","homepage"])
  })
  因为Store组件接受一个参数url，如果设置url，则ExtJS会创建一个Ext.data.HttpProxy对象，该对象通过制定的Connection或Ext.Ajax.request请求，从而可以读取到服务器端的数据。
  var store=new Ext.data.Store({
  url:"student.ejf?cmd=list",
  reader:new Ext.data.JsonReader({
  root:"result"
  },["id","name","organization","homepage"])
  })
  或者
  var store=new Ext.data.JsonStore({
  url:"student.ejf?cmd=list",
  root:"result",
  fields:["id","name","organization","homepage"]
  })
  function sFn(){alert('保存成功');}
  function fFn(){alert('保存失败');}
  Ext.Ajax.request({
  url:'student.ejf?cmd=save'
  success:sFn
  failure:fFn,
  params:{name:'小李',email:'xiaoli@easyjf.com',homeDate:'1992-5-6',sex:'男'}
  })
  或者
  var store =new Ext.data.JSonStore({
  url:"link.ejf?cmd=list",
  totalProperty:"results",
   root:"rows",
   fields:['title',{name:'username',mapping:'author'},
    {name:'loginTimes',type:'int'},
    {name:'lastLoginTime',mapping:'loginTime',type:'date'}]
  })
5。store的另外一种形式，分组store
var gridStore = new Ext.data.GroupingStore({
       remoteSort:true,
       sortInfo:{field:'mk_name',direction:'ASC'},
       groupField:'mk_name',                      //根绝这个分类
       proxy: new Ext.data.HttpProxy({
              url: '${linkGet.href}'
          }),
          reader:new Ext.data.JsonReader({
              root: 'data',
           totalProperty: 'totalCount',
           idProperty: 'id'
           },
           
//name后面的字段都是cm的index        Ext.data.Record.create([{"name":"id"},{"name":"code"},{"name":"name"},{"name":"mk_name"},{"name":"exception"},{"name":"threhold"},{"name":"exchanging"},{"name":"ok"}])
           ),
          baseParams :{
       start : 0,
       limit : 20
      }
      }); 
//配合grid
  grid = new Ext.grid.GridPanel({
     region : 'center',
     store : store,
     margins : '-1 -1 -1 0',
     sm : new Ext.grid.RowSelectionModel({
        singleSelect : true
       }),
     cm : cm,
     view: new Ext.grid.GroupingView({
                forceFit: true,
                groupTextTpl: '{text} ({[values.rs.length]}条记录)'
            }),
   autoWidth : true
    });

6.分页的实现
在 grid.getStore().load( {
    params : {
     start : 0,
     limit :20
    }
   })
  var pagingBar = new Ext.PagingToolbar( {
   pageSize :2,
   store : store,
   displayInfo : true,
   displayMsg : '显示 {0} - {1} 条记录，共 {2} 条记录',
   emptyMsg : "记录为空"
  });
7.根据grid的某条记录，将它的详细信息在一个新的窗口显示出来
  function showTIProps() {
   var data = self.getSelectedData(grid);

   if (!data)
    return;

   Ext.Ajax.request( {
    url : initialConfig.linkTIProps,
    params : {
     id : data.id
    },
    success : function(response, opts) {
     Ext.MessageBox.hide();
     var r = Ext.decode(response.responseText);
     var logData = {
      id : data.id,
      text : r.data
     }
     if (r.success) {
      var win = new TextEditorWindow( {
       title : data.name,
       editor : {
        url : initialConfig.linkTIPropsSave,
        data : logData
       }
      });
      win.show();
     } else
      Ext.MessageBox.alert('错误', r.data);

    },
    failure : function(response, opts) {
     Ext.MessageBox.hide();
     self.getWorkshop().msg('提示', '日志获取请求失败');
    }
   });
  }
    
    
8.一个页面A的window w元素的html属性指向另外一个页面B，如何在那个页面的B.js里面关闭这个window
 在A.jsp里面定义一个变量v，在w定义完后，把它赋给v，然后再B.js里面使用
       window.parent.v.close();  
9.单击grid里面的一条记录，可以对其执行操作
 grid.on('dblclick', function(e) {
    actEdit.execute();
   });   
10。在使用Ext的事件时，我们一般是直接在控件上事件。对于所有的组件Component，都包含一个beforedestory事件，该事件会在Ext小会这一个事件时出发，如果事件响应函数返回false，则会取消组件的取消操作。
Ext.onReady(function(){
var win=new Ext.Window({
title:"不能关闭的窗口",height:200,width:300
});
win.on("beforedestory",function(){}
alert("想关闭我，这是不可能的！");
return false;
);
win.show();
})
-------------与下面的代码等价
Ext.onReady(function(){
 var win=new Ext.Window({
  title:"不能关闭的窗口",
  height:200,width:300,
  listener:{"beforedestory":function(obj){
   alert("想关闭我，这是不可能的！");
   obj.show();
   return false;
  }}
 })
})
11.创建一个record
   
Ext.onReady(){
 var MyRecord=Ext.data.Record.create([
 {name:'title'},
 {name:'username',mapping:'author'},
 {name:'loginTime',type:'int'},
 {name:'lastLoginTime',mapping:'loginTime',type:'date'}
]);
var r=new MyRecord({
 title:'日志标题',
 username:'easyjf',
 loginTimes:100,
 loginTime:new Date()
});
alert(MyRecord.getField('username').mapping;
alert(MyRecord.getField('lastLoginTime').type);
alert(r.data.username);
}   
12.无论如何record.data.institute_id都只取第一个record的id，原因是它和另外一个变量重名了，应该保证js文件中的变量都不重名。   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

转载于:https://my.oschina.net/BLIZZARD/blog/12588