ExtJs代码片段小结

1.ajax

var requestConfig = {
 url : '/storage/assay/assaycollectionsample!isRenewable.action',
 params : {ids : ids},
 callback : function(options,success, response) {
  if(success){
   var json =Ext.util.JSON.decode(response.responseText);
   if (json.success) { 
    tempThis.doUpdate();
   }else{
    Ext.ux.LevitationMsgBox.msg('提示',json.result,5);
   }
  }else{
   Ext.ux.LevitationMsgBox.msg('提示','网络超时,请求失败！',5);
  }
 }
}
Ext.Ajax.request(requestConfig);

Ext.Ajax.request({ 
 url : '/organperson/pmjt-organ-person-relation!saveRelation.action',
 params : {
      },
 success : function(response,options) {
 },
 failure : function(response,options) {
 }
});

 
2.保存进度条

//当出现弹出窗口，进度条消失 
Ext.MessageBox.show({
   title : "提示",
   msg : "数据保存中...",
   progress : true,
   width : 300,
   wait : true,
   closable : true
  });

 

3.JsonCinfig的使用

JsonConfig jsonConfig = new JsonConfig();
jsonConfig.setExcludes(new String[]{ "hibernateLazyInitializer", "localSellCarryCoal"});
jsonConfig.registerJsonValueProcessor(java.sql.Timestamp.class, new DateJsonValueProcessor("yyyy-MM-dd"));
for(LocalSellCarryCoalItem item:items){
 json.append(JSONSerializer.toJSON(item,jsonConfig).toString());

 
.......

4.Grid拖拽

listeners : {
    rowdblclick : function(grid, rowIndex, e) {
     var spList = grid.getStore().getAt(rowIndex).get("tisEffective");
     if (spList == "是") {
      grid.getStore().getAt(rowIndex)
        .set("tisEffective", "否");
     } else if (spList == "否") {
      grid.getStore().getAt(rowIndex)
        .set("tisEffective", "是");
     }
    },
    afterrender:function(){
     var thisGrid=this;
     //alert(thisGrid);
     /**//**  
         * 列表右键菜单  
         */  
              thisGrid.addListener('rowcontextmenu', rightClickFn);   
              var rightClick = new Ext.menu.Menu( {   
                 id : 'spotTSampleListGrid_rightClickCont',   
                 items : [ {   
                      id:'spotTSampleListGrid_reverseMenu',   
                      text : '翻转',
                      icon:'../publicresource/images/icons/anchor.png',
                      handler:thisGrid.reverse  
                 }, {   
                      id:'spotTSampleListGrid_removeMenu',   
                      text : '移除',
                      iconCls : "delete",
                      handler:thisGrid.remove  
                 }, {   
                      id:'spotTSampleListGrid_judgeMenu',   
                      text : '判定',
                      iconCls : "link",
                      handler:thisGrid.judge  
                 },'-', {   
                      id:'spotTSampleListGrid_helpMenu',   
                      text : '说明',
                      icon:'../publicresource/images/icons/tux.png',
                      handler:function(){
                       Ext.Msg.alert("说明","翻转：倒序排列当前批次的车号<br/>" +
                         "移除：移除当前批次的所有车号<br/>" +
                         "判定：计算判定区匹配度，展示结果<br/>");
                      }
                 }]   
             });   
             function rightClickFn(grid, rowIndex, e) {   
                  e.preventDefault();
                  thisGrid.rightClickRowIndex=rowIndex;
                  rightClick.showAt(e.getXY());   
             }; 
     /* 
      * esky
      * 添加拖拽排序
      */
     new Ext.dd.DropTarget(thisGrid.container, {
            ddGroup : 'GridDD',
            copy    : false,
            notifyDrop : function(dd, e, data) {
             var store=thisGrid.getStore();
                // 选中了多少行
                var rows = data.selections;
                // 拖动到第几行
                var index = dd.getDragData(e).rowIndex;
                if (typeof(index) == "undefined") {
                    return;
                }
                // 修改store
                for(i = 0; i < rows.length; i++) {
                    var rowData = rows[i];
                    if(!this.copy) store.remove(rowData);
                    
                    if(index== 0)
                    {
                    rowData.data.orderNum -=1 ;
                    }
                    else if(index == store.data.items.length)
                    {
                    rowData.data.orderNum = store.data.items[index-1].data.orderNum+1;
                    }
                    else
                    {
                    rowData.data.orderNum = (store.data.items[index-1].data.orderNum + store.data.items[index].data.orderNum)/2
                    }
                    store.insert(index, rowData);
                }
            }
           })
    }
   }

 
5.指定精度的四舍五入

round:function(v,e) { //实现小数点后指定精确位数四舍五入的函数
    var t=1; 
    for(;e>0;t*=10,e--); 
    for(;e<0;t/=10,e++); 
    return Math.round(v*t)/t; 
   } 

 
6.添加多行工具栏

listeners:{
   afterrender:function(){
    var thisGrid=this;
    tbar2 = new Ext.Toolbar({//添加第二行工具栏
       renderTo : thisGrid.tbar,
    items : [{
      xtype : 'tbspacer',
      width : 6
     }, {
      xtype : "label",
      text : "所属单位:"
     }, {.......

 
7.获取Grid中选择项id

 /*
   * 获取选择项ID
   * */ 
  getSelectedID : function() {
   this.id_record='';
   var s = this.getSelectionModel().getSelections();
   for (var i = 0, r; r = s[i]; i++) {
    this.id_record+=r.get("id")+';';           
   }
  }

 
5.数据项添加内容展示

renderer : function(value) {
  return "<div title=\"" + value + "\">" + value + "</div>"
 }
cobmo中选择项提示
storeParams:{'filterTxt':'ORG_CNAME','filterValue':'','groupType':''},
storeFields: ['ORGANIZATION_ID', 'PRE_SHORTCNAME', 'ORG_SHORTCNAME'],
tpl: '<tpl for="."><div ext:qtip="提示：上一级-{PRE_SHORTCNAME}" class="x-combo-list-item">{ORG_SHORTCNAME}</div></tpl>',

 
6.四舍五入

Ext.util.Format.round(k,p) 
round:function(v,e) { //实现小数点后指定精确位数四舍五入的函数
    var t=1; 
    for(;e>0;t*=10,e--); 
    for(;e<0;t/=10,e++); 
    return Math.round(v*t)/t; 
   },
round01:function(v,e) { //实现小数点后指定精确位数四舍五入的函数
    return Math.round(v*Math.pow(10,e))/Math.pow(10,e);
   } 

 
7.IFrameComponent的使用

new Ext.Panel({
      layout : 'fit',
      id : 'organGroup',
      name : 'organGroup',
      hideBorders : true,
      border : false,
      items : [new Ext.ux.IFrameComponent({
         url : 'organization/organGroup/organGroup.jsp'
        })]
     });

 
8.创建Record

var CRecord=Ext.data.Record.create([]);
var newRecord=new CRecord();

 
9.ext里修改store中httpproxy的url

store.proxy.conn.url=newUrl;

Property Defined By  HttpProxy 
conn : Object
The Connection object (Or options parameter to Ext.Ajax.request) which this HttpProxy uses to make requests to the server. Properties of this object may be changed dynamically to change the way data is requested. 

 
10.使panel可以拖放大小

split: true

 
11.上传文件时因浏览器(如firefox)修改响应文本后Ext中handleResponse报错

方法一(推荐)
在action中添加

// 设置传回的字符串为文本类型
ServletActionContext.getResponse().setContentType(
 "text/html;charset=utf-8;");
方法二

/**
 * 重写processResponse方法，目的：解决上传页面返回的json字符串中添加了<pre>的字样问题
 * @author liaocui
 * @date 2011-08-18
 */
Ext.override(Ext.form.Action.Submit,{   
    // private   
    processResponse : function(response){   
        this.response = response;         
        if(!response.responseText){   
            return true;   
        }else{
         //增加下面几句代码就OK啦   
            
         var data = response.responseText;   
         if(data.indexOf('<pre>') != -1) {  //限于firefox 
           response.responseText = data.substring(5, data.length-6);   
           this.response = Ext.util.JSON.decode(response.responseText);   
         }       
         ///  
        }
        this.result = this.handleResponse(response);   
        return this.result;   
    }   
});  

 
3.临时标题