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 打印*/

转载