媒介

本文章为日常平凡事情是碰到的一些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 打印*/

转载