拒绝成猿的程序员

在ExtJs 6.5+版本中，提供了以weighted配置项。如果设置为true，则可以将子项item指定为一个object对象，每个item属性名称指定一个itemId，并且属性值为子项配置对象。使用此方案时，每个子项可能包含一个weight配置值，该值会影响其在此容器中的顺序。主要用法：{ xtype:'container', weighted:true,//声明权重值 items:{ txt:{//自定义的itemId ...

在制作业务时，需要填充相关费用，可以利用Ext.util.format去将numberfield控件渲染成金额的格式。具体效果如下：实现方法：Ext.define('Money', { extend: 'Ext.field.Number', xtype: 'moneyfield', onFocusLeave: function(event) { var me = this; me.callParent(arguments); .

在使用gird分页时，一般有两种实现方式：前端本地分页 远端服务器分页当数据体量大时，肯定第二种方法优先，但是当使用了远端分页后，在进行编辑时，对于数据的保存处理就要特殊处理下了。具体实现效果如下：...

在使用extjs的grid分页时，若是再采用了列注脚，列注脚默认仅是当前页的，如下：总共有8条数据，每页分为5行，采用行合计，希望显示的是总计8，结果却是第一页为5，第二页为3.代码：这里采用前端内存分页进行演示{ xtype: 'grid', id: 'grid', store: { autoLoad: false, proxy: { type: 'memory', enableP

在js中，可以使用document.createElement来动态创建style标签，并注册到页面上。ExtJs提供了一个封装好的类Ext.util.CSS动态创建Style标签块：Ext.util.CSS.createStyleSheet('css文本信息','style标签块ID')示例：Ext.util.CSS.createStyleSheet(` .abc { color:red; } .x-container { ..

在使用grid表格时，默认可以直接进行多选。如下，可以采用 Ctrl 多选 也可以用 Shift多选这是因为，grid的配置项selectable默认为true若是不想为多选模式，可以配置selectable:{mode:'single'}这样就会是单选模式。不过grid的selectable和infinite配置项有些冲突。当通过infinite：false。来让grid自动高度时{xtype:'grid',infinite...

当我们在声明控件时，若是声明了reference，在此控件拥有viewModel的情况下，可以使用bind:'{referenceKey.属性}'如下：{ xtype:'container', viewModel:{}, items:[ { xtype:'checkbox', reference:'chk', label:'勾选后隐藏Text', },

这里简单罗列下关于ExtJs的学习框架，以供参考。API使用 SDK安装项目首先在C盘装sencha cmd https://www.cnblogs.com/eshinex/p/4617554.html 下载sdk包 用sdk方式创建项目https://blog.youkuaiyun.com/u010989191/article/details/52658430sencha-sdk SDK路径 generateapp--ext-modern 项目名 项目路径基础控件与布局...

reference 作为元素的查找标识，经常在项目中使用。但是今天发现一件事：有reference属性的控件，在其viewModel中会自动生成一个值。示例：{xtype:'container',id:'demo',viewModel:{},items:[{xtype:'textfield',reference:'A'}]}为一个textfield...

在处理一些业务数据时，可能需要将其进行导出、导入操作。这里以导出自定义文件类型的 json类型数据为例。导出借助ExtJS的 File类的 saveBlobs 方法进行前端文件输出。saveBlobAs( content, filename, [charset], [mimeType] )参数content:StringFile contentfilename:StringName of the file including the extensionch...

在ExtJs 提供的field控件里，有个comboBox控件，此控件相较selectfield多了个最常用的搜索方法像如下一样进行过滤搜索：也就是ComboBox是个自带搜索过滤的且可编辑的下拉框想实现搜索过滤使用queryMode配置项即可。若是想在前端本地过滤，也就是把下拉项的数据提前加载好，可使用queryMode:'local'配置，如下：{ xtype: 'combobox', label: '可过滤搜索的Demo',...

在之前文章讲过calendar数据加载使用 《ExtJS 日历Calendar 控件 使用》，其中最重要的一点是关于calendar的数据Event加载。在ExtJs里，EventStore的数据格式Fields默认如下：id ：标识的是数据里的唯一主键title:是日历控件里的显示标题calendarId：标识的是该数据所属的日程事务类别startDate：事务开...

假设我们定义了一个自定义类,希望此类得到一个主键时，给它的子控件动态设置itemIdExt.define('A',{ extend:'Ext.Container', xtype:'a', config:{ key:null//自定义了一个配置项 }, items:[ { xtype:'compon...

在使用ExtJs时，对于一些页面控件在初始化时希望绑定事件用于值修改时触发，通常会在控件初始化或控件展示时绑定。一般常用的事件主要有initialize、added、beforeshow、activate、painted。initialize：组件初始化后触发added：组件被添加到容器后触发。beforeshow：组件显示前触发（一般是浮动层（例如：弹...

在使用numberfield 控件时，若是没有对格式进行限制，例如最小值 minValue：0输入小数点后 控件会默认处理为 保留两位小数。其中 主要配置项是decimals默认值为2一般来说没啥问题，但是在使用失焦即保存写入 就会出现问题例如：控件上输入 0.336666若是用失焦事件 获取到的值是0.336666，而失焦事件后 可以看到 控件里的值变为了0.34...

在自己定义的tree类时，发现系统内置的select、deselect事件都不触发了，定义的类如下：Ext.define('A',{extend:'Ext.grid.Tree',store: 'store相关数据',listeners:{ select:function(){ console.log('select事件')...

通过-des 来指定输出目录注意目录要为 “/” 斜杠sencha app build -des D:/Develop/MordernBuild指定打包某一个包sencha app build --packages 包名 -des 输出路径更多命令大全详见https://docs.sencha.com/cmd/7.0.0/guides/cli_reference....

在使用ExtJS控件查找时，常用lookup 或 down 元素选择器,若是想向上找某个父级，可以用up方法用法：1.ComponentManager 管理的Ext.Component实例ExtJs的component实例对象.up('父级容器的xtype别名')示例：{ xtype:'panel', title:'顶层panel', item...

在利用Sencha Cmd打包后，发现有时项目会报如下错误：这基本等于废话，毫无意义的提示。主要由于，build后的framework.js代码被混淆了。那如果想看清错误原因怎么办？使用sencha build testing进行测试打包可以用以下语句建一个bat文件，核心的就是 用sencha app build testing打包成测试版@echo offt...

在ExtJS的库中，常看到apply关键字。现在就简单介绍下apply在ExtJS用法1.Ext.apply 和 Ext.applyIf这里的apply是Ext的内置方法apply（object，config，[defaults]）将的所有属性复制config到指定的object（将config对象 完全复制到 object） object：对象 属性...

在extjs 使用dataview 或list时，常用的模板，想要模板里内容呈现一行垂直居中{ xtype:'list', itemContentCls: 'x-layout-box x-align-center', itemTpl: [ '<span class="x-fa fa-bar-chart"></span...

在使用更新值时有个现象Ext.define('A',{ config:{ key:null//配置自定义Key字段 }, updateKey(key) { console.log('update方法执行') }});var a = Ext.create('A');在定义类时，在类的config里声明了一个值xx，ExtJ...

在dialog使用maximizable:true属性时，点击全屏化，出现如下错误：原因：在定义的浮动层内，对于控件 使用了name属性例如：Ext.define('demo',{ extend:'Ext.Dialog', maximizable:true,//可全屏化 items:[ { xtype:'se...

之前在一些文章都介绍过viewModel,一个页面状态控制机、[ExtJS] viewModel绑定监听方法 控件动态绑定方法、[ExtJS]全局viewModel教程有了它后，我们可以很方便地控制页面控件的隐藏显示，信息展示等。但是，对于viewModel在深究一下，会发现一些问题：viewModel机制一般我们会在一个父类 或 同类中设置一个viewModel{...

实现一个，左边是导航信息，右侧是展示区域，然后拖动 导航节点重新定位后，右侧也随之j进行布局变化，如下图：核心方法：ExtJS容器对象.move(fromIdx,toIdx)因为涉及的知识点较多，后期有空补上，先贴上核心思想：生成节点右侧的容器元素，首先就是根据左侧的树形展开结构，依次渲染的，也就是将多维的树，看成一个导航。将多维的数组，平铺为一个一维数组根据...

ExtJS6 提供了日历控件，但是官网的demo贼坑，只讲了ajax使用，经过不懈努力地，无头苍蝇式尝试，终于摸到了使用门槛。首先在具体项目里，引用calendar的包。其次设定好calendar的store，这个很重要。因为，整个日历控件，最主要的就是store对应的事务。你在日历控件上看到的如下图中，每一条，都是一个event这里采用的store是 memory 内...

ExtJS框架中，Store的代理方式有多种像是Ajax,内存代理memory，本地代理localstorage、sessionStorage等这里主要介绍下使用本地数据Ext.data.proxy.LocalStorage========================================================================================...

在ExtJS中，常见的监听事件一般用listeners，如下：{ xtype:'控件名', liteners:{ 事件名:'方法名' }}//demo { xtype:'textfield', liteners:{ blur:'onBlur' }}或者是单个控件on绑定var wgt = Ext...

在处理一些大量数据时，往往用到查询，但是大量数据不适合全部查出，最好是分页查出，分页时还想有些参数过滤下，如下效果First 定义一个远端查询的storeExt.define('项目包名.路径.store类名', { extend: 'Ext.data.Store', alias: 'store.remoteDemo',//指定store的别名 idPrope...

在使用ExtJS的grid控件时，常用到store 数据绑定。然后grid又是可以编辑的，如下：想要是实现的场景：在整个表格编辑后，点击取消或关闭时，判断数据有无被更改过对grid的更改，其实就是对store的更改，那我们只需查找store里的数据有无更改记录即可。store里的数据，都是一个个数据集合collection，而collection有两个标记 可以判断此条数据是否变更...

在ExtJS的mordern版本中，缺少颜色选择器这里提供一个自己封装的 xtype:'colorfield'选取面板： 1.颜色面板继承的是Ext.Component通过XTemplete渲染的颜色面板constructor(config) {config = config || {};config.tpl = [ '&lt;tpl for="....

在数据排序处理中，分为前端排序和后端排序。后端排序就是主要指sql中的order by语法了，而如果想在前端排序，在ExtJS中就要用到sort。简单的排序在配置store时，可以设置某个field字段 例如：store:{ fields: ['firstName', 'level'], sorters: 'level', data: [ ...

在使用grid时，一般grid会有个高度但是，当我们想让grid高度自适应时一般可以使用一个配置项infinite:false,但是，有时会发现，即使我们给grid加了此项，grid宽度还是不够可以看到 高度被缩了起来。解决方法：给grid所在的容器 配置layout:'vbox',使grid的容器有个高度，然后让grid继承{xtype:'panel...

在项目中，有时会用到一些外部的编辑器，像是UEditor，这种若是在这种编辑器里上传了图片，会变成html，再次进行获取时，发现他就变成了text文本获取此富文本编辑器的html 发现是,得到的都是string要是想获取此img的src路径，就要先将其变为Dom元素================================================================1.创...

viewModel是一个为页面提供数据交互的模型，通常和bind进行同时使用一般可以为组件声明下viewmodel的属性 viewModel:{ data:{ key:value } }这个主要是为 其设置了viewModel的组件，的子组件，提供相应的绑定数据。就是下面的结构{ xtype:'组件1', viewModel:{ ...

作为前端框架，很多时候为了页面美观，都要引用到字体图标那么，ExtJS框架如何使用字体图标那？1.先去所需的字体图标库下载字体图标文件这里，使用的是fontawesome上的字体图标网址：fontawesonme下载库文件2.将下载的库文件，进行解压解压到，自己ExtJS项目的resources文件夹下3.在官网查看使用方法主要是css使用或者是用js方式使用图标这里以css为例发现需要link一...

有时利用extjs写东西时，有些样式是组件不好写出来的，想用html所以这时候一般用到Templete如下，想构建以下界面后面奖杯的数量，是由同行记录里的数字决定的12345678910111213141516171819202122232425262728{    xtype: 'list',    itemId: 'topChart',    cls:'x-listitem',    item...

ExtJS框架里的ext里提供很多工具文件可是有时候，不知道该引用哪些，尤其是自己的版本和网上某些demo的版本不同时首先去项目文件夹的ext文件夹查看目前系统开发主要用的是modern的模式，所以插件库可以看ext/modern目录下的大多数封装好的插件都会存在src目录下找到我们想要用的js文件（这里，我想要找grid表格可编辑的插件js）可以看到，先入眼帘的是一大堆绿色的，也就是官方的dem...

首先是view层面的js上的内容12345678910111213141516171819Ext.define('项目名.view.项目文件夹名.js名', {extend: 'Ext.panel.Panel',xtype: 'task_rightpanel', //当前 view js的别名,方便定位 items:[    {        xtype: 'list',   //一个列表控件  ...

针对Extjs container部分，有时要设置样式但是界面上有很多container,虽说用style可以设置，但是一个个设置后期维护难以维护故引用scss文件scss的文件名要和js对应，这样的好处就是不用额外声明引入scss文件了Container.js是最外层的容器类似这样的结构1234&lt;Container&gt;    &lt;子container&gt;&lt;/子contai...