ExtJs 常用代码片段(7.30更新)

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

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

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

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

选择一行或多行和以调用selectRow、selectRowsselectRecords等方法,在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,'&lt');

     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 "<span style='color:#00A600;'>下载文档</span>",

这样表格中就可以显示一个超链接或者按钮等组件。然后给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>
然后在GridPanel里这样写:
viewConfig : {

          getRowClass : function(record,rowIndex,rowParams,store){

              if(rowIndex%2==0){

                  return 'my_row_Red';

              }else{

                  return 'my_row_Blue';

              }

        }

}

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

11、

json返回值为多行数据,可是在grid中只显示一行。

原因: store将某些具有相同值的字段记录合并为一行。

解决: 设置idProperty

var store = Ext.create('Ext.data.Store', {
model: 'queryDetail',

proxy: {
type: 'ajax',
url: 'queryDetail.action',
timeout: 120000,
reader: {
type: 'json',
totalProperty: 'total',
idProperty: 'callTime',//该属性是指定每一个行对象中究竟哪一个是记录的ID字段(可选的)设置为不重复的字段即可

root: 'root'
}
}
});

12:

extjs实现类似百度搜索框一样的效果,输入一个文本联想内容

这个实现的方法其实就是一个下拉框,把下拉框做成可编辑的,再把尾部的下拉小三角隐藏起来效果就像是一个文本框,再添加keyup事件,监听输入内容查询数据库即可得到类似的结果

{fieldLabel:"位号" ,

      id:"updateLocationNo",

      msgTarget: 'side',

      allowBlank: false,

      blankText: "不能为空"

       ,xtype : 'combo',

      emptyText : '输入位号...',

      hideTrigger : true,

      selectOnFocus : false,

      editable : true,

      valueField : 'name',

      displayField : 'name',

      mode : 'remote',

      triggerAction : 'all',

      loadingText : '加载中...',

      store : new Ext.data.Store({

            url : '${ctx}/alarm/getAllLocation.action',

            reader : new Ext.data.JsonReader({},

               [{name : 'name',type : 'string'},

                 {name : 'id',type : 'string'}

               ])

        }),

       listeners:{

           'keyup':function(comb,event){

            var keyWord = Ext.get('updateLocationNo').dom.value;

            if(keyWord!=''){

             comb.store.setBaseParam('keyWord',keyWord);

             comb.store.load();

            }

      }}

代码在上面,这样就可以实现效果了。

13:extjs中grid显示java.util.Date类型数据

之前用Mybatis时间都是用string类型存储的到页面上显示就比较简单了,现在换成hibernate了date类型直接显示在页面上是[Object,Obecjt],

通过json转换后date的格式为:alarmDate":{"nanos":0,"time":1375089398000,"minutes":16,"seconds":38,"hours":17,"month":6,"timezoneOffset":-480,"year":113,"day":1,"date":29}

这样不好直接显示。有两种方法解决,

第一种是在后台转换的时候通过JsonValueProcessor 将date类型格式化,具体操作就不详细说明了,百度一下就有。

第二种方法不需要在后台处理,在extjs中的Recode添加属性:

{name: "alarmDate",mapping:"alarmDate.time",type:"date",dateFormat :"time"}说明该属性是一个date类型,

然后再cm中添加renderer事件

renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')//格式可以自己设定为需要的格式。

完整代码如下:

Ext.define("alarmHistory",{

        extend:"Ext.data.Model",

        fields:[

            {name: "alarmDate",mapping:"alarmDate.time",type:"date",dateFormat :"time"}

        ]

    });



 var cm=[{header: "报警时间",width: 200,dataIndex: alarmDate",menuDisabled: true,renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s')}];

这样页面上显示的时间就是格式化之后的格式了。

 

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

你可能感兴趣的:(ExtJs)