Extjs 笔记

前言

本文章为平时工作是遇到的一些Extjs特效，不定时更新，并非完全原创，如有意见或建议，请在下方留言，我会做出相应补充或处理。

grid

鼠标悬浮提示

通过列的render属性改变样式

function(value, metaData, record, rowIndex, colIndex) {
    metaData.tdAttr = 'qclass="x-tip" data-qtitle="名称：" data-qwidth="200" data-qtip="'+ value + '"';
    return value;
}

设置行背景

Ext.define('V5.digao.view.Grid', {
    extend : 'Ext.grid.Panel',
    columnLines : true,
    xtype : 'cxbGrid',
    border : 0,
    id : 'cxb',
    viewConfig:{getRowClass:changeRowClass}, //核心代码
    store : Ext.create('Ext.data.Store', {
        fields : ['ywzl','ywdy',"digao", "creator", 'status','wt','gz','jy'],
        data : [{
            'ywzl':'业务条线1'
        }]
});

function changeRowClass(record, rowIndex, rowParams, store){
    if(record.get('status') == '未创建'){
        return "x-grid-black";
    }
    if(record.get('status') == '草稿'){
        return "x-grid-red";
    }
    if(record.get('status') == '审计完成'){
        return "x-grid-record-green";
    }
    if(record.get('status') == '审批退回'){
        return "x-grid-record-yellow";
    }
} 

转载

未读消息数提醒

通过列的render属性改变样式

function(value, metaData, record, row, col, store, view) {
    if (value) {
        if (value == 0) {
            return "";
        } else {
            metaData.style = "background-image:url(../resource/icons/count.png);background-repeat: no-repeat;background-position: center";
            return "<font color=black align=center><b>" + value + "</b></font>";
        }
    }
}

grid列的defaults属性

grid的defaults属性的值并不能影响到列的样式，需要在其columns属性中设置，columns的值可以是对象或数组。

Ext.create("Ext.grid.Panel",{
    columns:{
        defaults:{flex:1},//自适应宽度
        items:[{
            text:"text",dataIndex:"data"
            }]
        }
})

button

复制按钮

实现通过点击按钮将特定内容复制到浏览器剪贴板的功能。

• click事件，将要复制的值赋值给文本框，通过浏览器命令选中文本框的文本内容，执行浏览器复制命令

function(_me) {
    var selections = _me.up("grid").getSelectionModel().getSelection();
    if (selections.length < 1) {
        Ext.MsgHelper.error("请选择要复制的业务");
        return;
    }
    var value = selections[0].get("recordId");
    //在按钮的父容器中添加文本框
    _me.ownerCt.add({
        html: '<textarea style="position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;" name="copybtn123"></textarea>'
    });
    var textarea = document.getElementsByName("copybtn123")[0];
    textarea.value = value; // 修改文本框的内容
    textarea.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令
    Ext.MsgHelper.info("复制成功：" + value);
}

• 访问Chrome剪切板

            function onCopyClick(){    
            
                var copyHandler = function(event){
                    event.clipboardData.setData("text/plain","复制内容");//访问剪切板
                    document.removeEventListener("copy",copyHandler,false);//移除事件
                    event.preventDefault();
                }
                document.addEventListener("copy",copyHandler,false);//绑定事件
                document.execCommand("copy");    //执行复制命令
                
            }

参考：Chrome浏览器读写系统剪切板

标题按钮

通过panel的tools属性可在面板的标题上加按钮

Ext.create("Ext.panel.Panel",{
    tools:[{type:"help",handler:function(){
        doSomething();
         }
    },{
      //自定义按钮
      xtype:"button",text:"更多"，ui:"dafault-toolbar",handler:function(){
        alert("展示更多")；
            }
    }]
})

type的值共有18种，如下：

close 关闭
ExtJs中Tools的使用minimize 最小化
ExtJs中Tools的使用maximize 最大化
ExtJs中Tools的使用restore 回复
ExtJs中Tools的使用gear 设置
ExtJs中Tools的使用pin 锁定
ExtJs中Tools的使用unpin 解锁
ExtJs中Tools的使用right 向右
ExtJs中Tools的使用left 向左
ExtJs中Tools的使用up 向上
ExtJs中Tools的使用down 向下
ExtJs中Tools的使用refresh 刷新
ExtJs中Tools的使用minus 减号
ExtJs中Tools的使用plus 加号
ExtJs中Tools的使用help 帮助
ExtJs中Tools的使用search 搜索
ExtJs中Tools的使用save 保存
ExtJs中Tools的使用print 打印*/

转载