Extjs 笔记

zhouzhou 发布于2019-08-22 15:38 / 2604人阅读

摘要：前言本文章为平时工作是遇到的一些特效，不定时更新，并非完全原创，如有意见或建议，请在下方留言，我会做出相应补充或处理。自适应宽度复制按钮实现通过点击按钮将特定内容复制到浏览器剪贴板的功能。

前言

本文章为平时工作是遇到的一些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 打印*/

转载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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