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

轉載