首页 > 其他分享 >【翻译】Sencha Ext JS 6.7 的新增功能(节选)

【翻译】Sencha Ext JS 6.7 的新增功能(节选)

时间:2023-04-04 20:00:53浏览次数:74  
标签:最终用户 Sencha 网格 节选 6.7 Ext 筛选 JS


原文地址:https://www.sencha.com/blog/announcing-sencha-ext-js-6-7-and-tooling-ga/?utm_source=snceb&utm_medium=email&utm_campaign=sncextjs&utm_content=020719-sncextjs-6-7-release Ext JS 6.7终于拼接上了Classic工具包的最后一环,如锁定表格、多选组件等,除了不支持IE和RTL外,Modern工具包的功能与Classic的功能已经没有区别了。不过,暂时没发现社区版已经更新到6.7。

网格筛选器

Ext JS 6.7现代包的网格提供了网格筛选功能,可以让最终用户显示满足指定条件的网格记录。除了文本筛选器之外,网格筛选器还支持以下网格筛选器:

  • 文本网格筛选器可将结果限制为与指定文本匹配的值
  • 布尔网格筛选器可将结果限制为与true或false匹配的值
  • 日期网格筛选器可将结果限制为与指定日期约束匹配的值
  • 数字网格筛选器可将结果限制为与指定数字相匹配的值

Kitchensink提供了一个显示所有这些网格筛选插件的示例,而且还包含了在全局范围内管理这些筛选器的能力。

【翻译】Sencha Ext JS 6.7 的新增功能(节选)_锁定网格

## 网格锁定

Ext JS 6.7现代网格提供了网格锁定功能,可以让最终用户实现类似于Excel的“冻结窗格”的锁定列功能。锁定网格提供了一个列菜单功能,可以让用户锁定左侧区域或右侧区域的网格列,锁定网格列菜单会显示当前的锁定状态。

【翻译】Sencha Ext JS 6.7 的新增功能(节选)_锁定网格_02

## 碎屑(chip)/标签(tags)

Ext JS 6.7提供了紧凑的材料碎屑,可以让最终用户体验到诸如选择、过滤内容和触发操作的任务。碎屑组件在视图内可以显示缩略图和文本,可以在桌面或移动应用程序中如以下代码哪样通过配置displayTpl来提供不同的碎屑显示:

chipView: {
                iconField: 'avatar',
                displayField: 'name',
                platformConfig: {
                    '!phone': {
                        displayTpl: '{name} ({email})'
                    }
                }
            },

【翻译】Sencha Ext JS 6.7 的新增功能(节选)_筛选器_03

多选组合框和选择

Ext JS 6.7提供了多选组合框,以便让最终用户在组合框内看到多个选择值。一个标准的组合框是由一个标准的文本输入字段和一个选择字段组成的。如果editable配置项为true,那么用户就可以自由的字段内输入内容,并从下拉列表中选择值。多选组合框还提供了“multiselect: true”选项,允许最终用户在组合框内选择多个值。选择值可以使用键盘箭头键导航,也可以使用删除键删除。

【翻译】Sencha Ext JS 6.7 的新增功能(节选)_Ext JS_04

Ext JS 6.7还提供了多选字段,可以让最终用户在选择字段内选择多个值。

【翻译】Sencha Ext JS 6.7 的新增功能(节选)_筛选器_05

##拾色器

Ext JS 6.7提供了拾色器,可以让最终用户使用色板、表单字段或颜色选择器来选择颜色。颜色选择器提供提供了选项来指定选取的颜色值使用HSVA格式还是RGB格式。

【翻译】Sencha Ext JS 6.7 的新增功能(节选)_筛选器_06

虚拟滚动器(Virtual Scroller)

Ext JS 6.7提供了一个虚拟滚动器,以便在浏览器的正常滚动范围之外实现滚动。虚拟滚动主要用于所有无限的列表或网格,让允许的行数大于浏览器的所允许的最大滚动范围。

scrollable: {
        type: 'virtual',
        infinite: true  // enable MAX_SAFE_INTEGER scroll
    },

【翻译】Sencha Ext JS 6.7 的新增功能(节选)_筛选器_07

Ext JS 6.7 示例

Ext JS 6.7 提供一些使用开放工具(open tooling)创建的示例。通过Ext JS 6.7和开放工具可以快速启用这些应用程序:

  • Full Stack Employee Directory (Coworkee) application – Github Repo
  • Full Stack Progressive Web App (PWA) Application – Github Repo
  • Modern Tutorial Sample Application – Github Repo
  • Quick Start Sample Application – Github Repo


标签:最终用户,Sencha,网格,节选,6.7,Ext,筛选,JS
From: https://blog.51cto.com/dqhuang/6169371

相关文章

  • Js/Jquery获取自定义属性的方法
    html:<spanid="item"data-test='test'></span>方法一、原生JS的getAttribute获取自定义属性设置属性.setAttribute("属性","值")获取属性.getAttribute("属性")varspan=document.getElementById('item').ge......
  • js和jquery获取屏幕宽高以及加margin和padding等边距的宽高
    Javascript:网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth(包括边线的宽)网页可见区域高:document.body.offsetHeight(包括边线的高)网页正文全文宽:document.body.scrollWidth网页正文......
  • swift tabview 带参数请求网络。多条目展示。json解析,逃逸闭包
    效果:用到的第三方#Uncommentthenextlinetodefineaglobalplatformforyourprojectplatform:ios,'9.0'target'News'do#Commentthenextlineifyoudon'twanttousedynamicframeworksuse_frameworks!#PodsforNewsp......
  • Stemciljs学习2、组件生命周期
    组件有许多生命周期方法,可用于了解组件何时“将”和“执行”加载、更新和呈现。可以将这些方法添加到组件中,以便在正确的时间挂接到操作中。在组件类中实现以下方法之一,Stencil将以正确的顺序自动调用它们:单组件的生命周期import{Component,Host,h,Prop,Watch}from'@sten......
  • js中e.clientX e.pageX e.offsetX e.screenX之间的区别
     event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但......
  • Win7安装node.js
    问题win7直接安装node.js官网的最新版安装不成功,是因为最新版的版本高,不支持win7,只支持win8以上。解决安装低版本的node.js,我选的是12.22.12版本,然后为其配置环境变量即可。如果需要npm,你只需要下载一个版本,解压后将除node之外的所有文件放到你安装好的目录下即可。运行在cm......
  • NestJS 拦截器 和 RxJs
    为什么要介绍RxJs因为在Nestjs已经内置了RxJs无需安装并且Nestjs也会有一些基于Rxjs提供的APIRxJs是什么RxJs使用的是观察者模式,用来编写异步队列和事件处理。Observable可观察的物件Subscription监听ObservableOperators纯函数可以处理管道的数据如mapfil......
  • js实现拖拽功能(拖拽排序)
    <template><transition-groupclass="container"name="sort"><divclass="drag-item"v-for="(v,i)indragArray":key="i":draggable="true"@dragstart="dr......
  • 项目实践后的图片压缩完整使用过程【vue3+js】
    van-uploader+图片压缩+图片base64转成file compressImage.jsconstACCEPT=['image/jpg','image/png','image/jpeg']constMAXSIZE=1024*1024*2;constMAXTIP="4"//压缩算法函数/*1.首先拿到了base64的图片字符串2.创建一个image对象,获......
  • js实现文字左右轮播
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">.textDiv{position:relative;......