ExtJS 常用代码片段

笔者工作中用到的功能，以及一些小功能，贴出来跟大家分享。

1、grid加载时候选择一行或全选：

为stroe添加load事件，调用sm的selectAll方法

store.on("load",function(store) {sm.selectAll();});

选择一行或多行和以调用selectRow、selectRows或selectRecords等方法，在api中有详细介绍。

2、Extjs 中调用Ajax

Ext.Ajax.request({
                    url:'xxx.action',
                    method:'post',
                    params:{equipmentId: equipmentId,agentIds: agentIds},
                    success:function(response,config){
                        var json = Ext.util.JSON.decode(response.responseText);  
                        Ext.Msg.alert("提示信息",json.msg);
                        store.reload();
                    },
                    failure:function(){
                        Ext.MessageBox.alert("提示信息", "关联失败");  
                        store.reload();
                    }
                });

3、form中的下拉框

var tankType = new Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    lazyRender:true,
    mode: 'remote',
    applyTo :'tankType',
    id:'tankType',
    disabled:true,
    msgTarget : 'side',
    width:135,
    editable:false,
    store: new Ext.data.Store({  //下拉框的数据源      
           proxy: new Ext.data.HttpProxy({url:'${ctx}/tankfarm/getTankTypes.action'}),
           reader: new Ext.data.JsonReader({},[ 
               {name:'type_code'},    
               {name:'type_name'}                                 
           ])
           }),
    valueField: 'type_code',//值字段
    displayField: 'type_name'//显示的字段
});

4、form中的单选框

{
    xtype: 'radiogroup',
    layout: 'table',
    width: 100,
    id: 'is_main_line',
    fieldLabel: '主侧线',
    defaultType: 'radio',
    border: false,
    sFormField: true,
    items: [{
           name: 'is_main_line',
    //这里加入name表示两个radio属于同一个组，形成单选模式，如果不加name或者两个name不一样，则会发生两个都会选择的情况
           boxLabel: '是',
           xtype: 'radio',
           inputValue: '1',//单选框的实际值
          checked: true
    }, {
         name: 'is_main_line',
         boxLabel: '否',
         xtype: 'radio',
         inputValue: '2'
       }
          ]
}

5、editgrid获取修改后的数据：

//得到修改过的Recored的集合  
var modified = tankDataStore.modified.slice(0);  
//将数据放到另外一个数组中  
var jsonArray = [];  
 Ext.each(modified,function(m){  
     //m.data中保存的是当前Recored的所有字段的值json，不包含结构信息  
     jsonArray.push(m.data);  
});
6、grid添加单元格悬浮显示内容，方法为在cm中header添加renderer事件，将value完整显示，代码如下：

{header:'名称',width:50,dataIndex:'name',menuDisabled:true,menuDisabled:true,renderer : function(value, metadata, record, rowIndex, columnIndex,store) {
     value = value.replace(/</g,'<');
     metadata.attr = 'ext:qtip="' + value + '<br/>"';
     return value;
    }
}

7、分页工具栏

new Ext.PagingToolbar({
            pageSize: 25
            store: store,
            id:'pagger',
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
             emptyMsg: "当前查询条件无数据,请重新查询"
        })

8、树节点右键菜单

//首先建立菜单Menu，代码如下：
var materialMenu = new Ext.menu.Menu({
     items : [
        {text : "增加",
             id : 'add',
            handler : function() {}
        },
        { text : "修改",
                id : 'update',
               handler : function() {}
         },
         {text : "删除",
             id : 'delete',
            handler : function() {}
      }]
});

//然后为树添加监听器：
listeners : {
   'contextmenu' : function(node, event) {
         materialMenu.showAt(event.getPoint());
    }
}

这样在树节点上右击就可以弹出菜单了，不过为了不和ie右键冲突，最好是禁用了ie的右键菜单，具体怎么禁用就不详细说明了。

9、grid单元格添加图片和超链接
第一种方法是使用Ext.grid.column.Action 动作列详细可见我的另一篇文章中有介绍
http://www.cnblogs.com/lslvxy/archive/2013/05/26/3099768.html
第二中方法是使用简单的列，并添加renderer函数，在renderer中可以返回一个html标签，类似
return "下载文档"，这样表格中就可以显示一个超链接或者按钮等组件。
然后给grid添加单元格点击cellClick事件，

function cellClick(grid, rowIdx, colIdx, e) { 
        var value= e.getTarget().value;//获取renderer中返回的标签值

        //e.getTarget().innerHTML  获取renderer中返回的标签内的文本

        record = grid.getStore().getAt(rowIdx); 

      row = grid.getSelectionModel().getSelected(); //得到选择所有行

      var fieldName = grid.getColumnModel().getDataIndex(colIdx); // 获取列名

      var data = record.get(fieldName);//这个data就是点击的单元格的数据了，一定有用的

}

10、grid隔行变色（6.21添加）

先自定义一个CSS：

<style type="text/css">
.my_row_Red table{ background:Red}
.my_row_Green table{ background:Green}
</style>

viewConfig : {
          getRowClass : function(record,rowIndex,rowParams,store){
              if(rowIndex%2==0){
                  return 'my_row_Red';
              }else{
                  return 'my_row_Blue';
              }
        }
}

这样就可以使得表格隔行变色了，在加载的时候就显示不同的颜色了。

--先记录这么多，日后工作再逐渐添加--

宝剑锋从磨砺出，梅花香自苦寒来。

作者: 依山慕雪
原文: http://www.cnblogs.com/lslvxy/archive/2013/06/14/3135366.html