Extjs 筆記

zhouzhou 發布于2019-08-22 15:38 / 2628人閱讀

摘要：前言本文章為平時工作是遇到的一些特效，不定時更新，并非完全原創，如有意見或建議，請在下方留言，我會做出相應補充或處理。自適應寬度復制按鈕實現通過點擊按鈕將特定內容復制到瀏覽器剪貼板的功能。

前言

本文章為平時工作是遇到的一些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 "" + value + "";
        }
    }
}

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: ""
    });
    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 打印*/

轉載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93620.html

extjs-mvc結構實踐(一):搭建基礎架構

摘要：今天開始，一點點記錄一下使用搭建一個基礎結構的過程。沒辦法，記性差這種結構的前端，主要是面向后臺信息管理系統，可以最大限度的規范前端代碼結構和數據結構。今天開始，一點點記錄一下使用extjs6.2.0搭建一個基礎MVC結構的過程。沒辦法，記性差:)這種結構的UI前端，主要是面向后臺信息管理系統，可以最大限度的規范前端代碼結構和數據結構。做網站或者手機端，這種方式全引入了extjs,...

kamushin233 2019-08-22 13:57 評論0 收藏0
EXTJS-6.2.0示例-在Extjs里使用openlayers加載OpenStreetMap地圖

摘要：在里使用加載地圖在里使用加載地圖在里使用加載地圖在Extjs里使用openlayers加載OpenStreetMap地圖在Extjs里使用openlayers加載OpenStreetMap地圖 Ext.application({ name: lu...

guqiu 2019-08-22 14:01 評論0 收藏0
extjs-mvc結構實踐(二):基本頁面

摘要：接著來，上一篇搭建了基本的項目骨架，到最后，其實啥也沒看見。。。目標全屏顯示左側導航菜單，右側標簽頁切換操作內容區域。一般模型與你后臺返回的數據結構一一對應。給其他組件提供一致接口使用數據。整個構成一個所謂的。接著來，上一篇搭建了基本的項目骨架，到最后，其實啥也沒看見。。。書接上回，開始寫UI效果。目標全屏顯示、左側導航菜單，右側標簽頁切換操作內容區域。包含header和foo...

changfeng1050 2019-08-22 13:57 評論0 收藏0
解決ExtJs中ajax重定向的問題

摘要：問題問題來了，都是采用向后臺發送請求，這時候如果重定向到無權限的錯誤頁面就會產生問題。最直接的解決方案就是，每一個向后臺發送的請求，后臺都會返回，然后判斷，不符合條件就。首先要明確的是，ajax是局部刷新，是不支持重定向的，只能通過window.location.href=http://xxx/error.html的方式實現，在后臺重定向只會把html返回給前臺，頁面并不會跳轉。 ...

clasnake 2019-08-14 17:04 評論0 收藏0
ExtJS底層繼承機制實現

摘要：是個基于對象的語言，沒有類的概念。而且語言特點就是松散和自由，實現一個同樣的功能，可以有很多種方式面向對象編程絕大部分都是基于類的所以我們可以借助原型鏈繼承的方式來在中實現高級程序語言中的繼承機制關鍵點就是你一定要了解中的。 JavaScript是個基于對象的語言，沒有類的概念。而且JavaScript語言特點就是松散和自由，實現一個同樣的功能，可以有很多種方式.面向對象編程絕大部分都...

mayaohua 2019-08-21 10:32 評論0 收藏0