Extjs 筆記

zhouzhou 發(fā)布于2019-08-22 15:38 / 2642人閱讀

摘要：前言本文章為平時(shí)工作是遇到的一些特效，不定時(shí)更新，并非完全原創(chuàng)，如有意見(jiàn)或建議，請(qǐng)?jiān)谙路搅粞裕視?huì)做出相應(yīng)補(bǔ)充或處理。自適應(yīng)寬度復(fù)制按鈕實(shí)現(xiàn)通過(guò)點(diǎn)擊按鈕將特定內(nèi)容復(fù)制到瀏覽器剪貼板的功能。

前言

本文章為平時(shí)工作是遇到的一些Extjs特效，不定時(shí)更新，并非完全原創(chuàng)，如有意見(jiàn)或建議，請(qǐng)?jiān)谙路搅粞裕視?huì)做出相應(yīng)補(bǔ)充或處理。

grid 鼠標(biāo)懸浮提示

通過(guò)列的render屬性改變樣式

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

設(shè)置行背景

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":"業(yè)務(wù)條線1"
        }]
});

function changeRowClass(record, rowIndex, rowParams, store){
    if(record.get("status") == "未創(chuàng)建"){
        return "x-grid-black";
    }
    if(record.get("status") == "草稿"){
        return "x-grid-red";
    }
    if(record.get("status") == "審計(jì)完成"){
        return "x-grid-record-green";
    }
    if(record.get("status") == "審批退回"){
        return "x-grid-record-yellow";
    }
}

轉(zhuǎn)載

未讀消息數(shù)提醒

通過(guò)列的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 "" + value + "";
        }
    }
}

grid列的defaults屬性

grid的defaults屬性的值并不能影響到列的樣式，需要在其columns屬性中設(shè)置，columns的值可以是對(duì)象或數(shù)組。

Ext.create("Ext.grid.Panel",{
    columns:{
        defaults:{flex:1},//自適應(yīng)寬度
        items:[{
            text:"text",dataIndex:"data"
            }]
        }
})

button 復(fù)制按鈕

實(shí)現(xiàn)通過(guò)點(diǎn)擊按鈕將特定內(nèi)容復(fù)制到瀏覽器剪貼板的功能。

click事件，將要復(fù)制的值賦值給文本框，通過(guò)瀏覽器命令選中文本框的文本內(nèi)容，執(zhí)行瀏覽器復(fù)制命令

function(_me) {
    var selections = _me.up("grid").getSelectionModel().getSelection();
    if (selections.length < 1) {
        Ext.MsgHelper.error("請(qǐng)選擇要復(fù)制的業(yè)務(wù)");
        return;
    }
    var value = selections[0].get("recordId");
    //在按鈕的父容器中添加文本框
    _me.ownerCt.add({
        html: ""
    });
    var textarea = document.getElementsByName("copybtn123")[0];
    textarea.value = value; // 修改文本框的內(nèi)容
    textarea.select(); // 選中文本
    document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令
    Ext.MsgHelper.info("復(fù)制成功：" + value);
}

訪問(wèn)Chrome剪切板

            function onCopyClick(){    
            
                var copyHandler = function(event){
                    event.clipboardData.setData("text/plain","復(fù)制內(nèi)容");//訪問(wèn)剪切板
                    document.removeEventListener("copy",copyHandler,false);//移除事件
                    event.preventDefault();
                }
                document.addEventListener("copy",copyHandler,false);//綁定事件
                document.execCommand("copy");    //執(zhí)行復(fù)制命令
                
            }

參考：Chrome瀏覽器讀寫(xiě)系統(tǒng)剪切板

標(biāo)題按鈕

通過(guò)panel的tools屬性可在面板的標(biāo)題上加按鈕

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

type的值共有18種，如下：

close 關(guān)閉
ExtJs中Tools的使用minimize 最小化
ExtJs中Tools的使用maximize 最大化
ExtJs中Tools的使用restore 回復(fù)
ExtJs中Tools的使用gear 設(shè)置
ExtJs中Tools的使用pin 鎖定
ExtJs中Tools的使用unpin 解鎖
ExtJs中Tools的使用right 向右
ExtJs中Tools的使用left 向左
ExtJs中Tools的使用up 向上
ExtJs中Tools的使用down 向下
ExtJs中Tools的使用refresh 刷新
ExtJs中Tools的使用minus 減號(hào)
ExtJs中Tools的使用plus 加號(hào)
ExtJs中Tools的使用help 幫助
ExtJs中Tools的使用search 搜索
ExtJs中Tools的使用save 保存
ExtJs中Tools的使用print 打印*/

轉(zhuǎn)載

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93620.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

zhouzhou

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

iON十月優(yōu)惠：美國(guó)云服務(wù)器85折，季付12.75/月起，圣何塞/洛杉磯機(jī)房

閱讀 1428·2021-10-11 11:12
不可錯(cuò)過(guò)的自動(dòng)化測(cè)試框架：robotframework之WebDriver功能配置

閱讀 3258·2021-09-30 09:46
快云科技618特惠活動(dòng)：（香港CN2 GIA香港vps 7.5折續(xù)費(fèi)永久同價(jià)-另有香港年付5折更優(yōu)

閱讀 1644·2021-07-28 00:14
CSS clip 屬性深入

閱讀 3147·2019-08-30 13:49
服務(wù)端渲染的React手腳架。完美使用 React, Redux, and React-Router

閱讀 2594·2019-08-29 11:27
Graph 數(shù)據(jù)可視化：JS 自動(dòng)布局有向無(wú)環(huán)圖

閱讀 3248·2019-08-26 11:52
vue多環(huán)境配置方案

閱讀 610·2019-08-23 18:14
thinkphp ajax提交token

閱讀 3446·2019-08-23 16:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Extjs 筆記

相關(guān)文章

extjs-mvc結(jié)構(gòu)實(shí)踐(一):搭建基礎(chǔ)架構(gòu)

EXTJS-6.2.0示例-在Extjs里使用openlayers加載OpenStreetMap地圖

extjs-mvc結(jié)構(gòu)實(shí)踐(二):基本頁(yè)面

**解決ExtJs中ajax重定向的問(wèn)題**

ExtJS底層繼承機(jī)制實(shí)現(xiàn)

發(fā)表評(píng)論

0條評(píng)論

zhouzhou

男|高級(jí)講師

TA的文章

iON十月優(yōu)惠：美國(guó)云服務(wù)器85折，季付12.75/月起，圣何塞/洛杉磯機(jī)房

不可錯(cuò)過(guò)的自動(dòng)化測(cè)試框架：robotframework之WebDriver功能配置

快云科技618特惠活動(dòng)：（香港CN2 GIA香港vps 7.5折續(xù)費(fèi)永久同價(jià)-另有香港年付5折更優(yōu)

CSS clip 屬性深入

服務(wù)端渲染的React手腳架。完美使用 React, Redux, and React-Router

Graph 數(shù)據(jù)可視化：JS 自動(dòng)布局有向無(wú)環(huán)圖

vue多環(huán)境配置方案

thinkphp ajax提交token

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Extjs 筆記

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！