ylbtech-杂项:ExtJS extjs是一种软件.自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染,这些也算可以想到的功能. 1.返回顶部 1. 序言 功能丰富,无人能出其右. 无论是界面之美,还是功能之强,ext的表格控件都高居榜首. 单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现. 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元…

上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar扩展插件,在此基础上做了移植到ExtJS 4.2,并扩展了默认值.form表单支持等功能. 1.1 JavaScript代码 /*! * 评分组件 */ Ext.define('App.Demo.RatingStarFiledDemoTab', { extend: 'Ext.panel.Panel'…

本篇介绍ExtJS相关知识,是以ExtJS4.2.1版本为基础进行说明,包括:ExtJS的特点.MVC模式.4.2.1GPL版本资源的下载和说明以及4种主题的演示. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 使用协议 1.3 MVC模式 2. 资源 2.1 资源地址 2.2 资源目录说明 2.3 docs/index.html 3. 运行图 1. 介绍 1.1 说明 ExtJS是一个用javascript.CSS和HTML等技术实现的主要用于创建RIA即富客户端,且与后台技术无关的前…

本篇介绍如何创建一个ExtJS应用程序.并通过创建目录.导入文件.编写代码及分析代码等步骤来解释第一个ExtJS程序. 目录 1. 创建程序 1.1 创建目录建议 1.2 实际目录 1.3 index.html 1.4 运行图 2. 代码分析 2.1 Ext.onReady() 2.2 Ext.create() 1. 创建程序 1.1 创建目录建议 根据官方建议,创建一个ExtJS应用程序的目录推荐如下: - appname | - app | - namespace | - Class1.js…

目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 ExtJS的强大功能之一是提供了非常丰富的组件,包括grid(表格).panel(面板).form(表单).button(按钮).progressBar(进度条)等等. 一个的ExtJS 4应用程序的UI界面,就是由一个或多个组件组成. 这里将会介绍组件的分类.名称.结构以及创建方式. 1.2 组件分类…

组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组件的查找方式. 目录 1. 全局查找方式 2. 容器内查找 3. form查找子组件 4. 通用组件查找方式 1. 全局查找方式 全局查找方式指在整个ExtJS框架中查找组件. 1.1 Ext.getCmp(id) :返回此id对应的组件 说明:此方法是在所有组件中查找匹配此id的组件. 参数: ①…

本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主页布局 传统的ExtJS 4.2应用,基本布局如下: 1.2 主页布局分析 根据上面的主页布局图,可转换具体试图结构: header:存放系统的名称.logo.用户信息等内容. menu:菜单区域,以Tree形态展现业务入口. tab:业务区域,具体的业务都以tab页的形式嵌入到此区域. 1.3 主…

本篇开始模拟一个船舶管理系统,提供查询.添加.修改船舶的功能,这里介绍其中的数据展示和查询功能. 目录 1. 数据展示 2. 数据查询 3. 在线演示 1. 数据展示 在这里我们将模拟一个船舶管理系统,并提供查询.添加.修改的功能. 大致的目录结构如下: ShipMgrTab.js :船舶业务的入口. controller 目录:存放船舶业务的逻辑控制文件. model 目录:存放船舶业务的model文件. store 目录 :存放船舶业务的store文件. view 目录 :存放船舶业务的组件…

接上面的船舶管理业务,这里介绍添加和修改操作. 目录 1. 添加操作 2. 修改操作 3. 在线演示 1. 添加操作 1.1 创建AddShipWindow.js 在业务中的view目录下创建一个AddShipWindow.js文件,表示一个增加船舶的窗口组件. 此文件中包含了一个form组件用于显示所要添加的字段:船舶名称.状态.吨数和核载人数. 具体代码如下: Ext.define('App.ShipMgr.view.AddShipWindow', { extend: 'Ext.window…

ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件,然后查看下的HTML源码. 1.1.1 Grid组件 1.1.2 HTML代码 从这些代码中可以看出,Grid组件可分为grid-header和grid-body 两块区域(若含有工具栏和分页栏,它们都会含有各自的独立区域). 其中grid-body包含了许多tr元素,每一个tr都是代表Gri…

ExtJS中除了提供丰富的组件外,我们还可以扩展他的组件. 在这里,我们将在Date日期组件上添加一个[清除]按钮,用于此组件已选中值的清除. 目录 1. Date组件介绍 2. 主要代码说明 3. 代码与在线演示 1. Date组件介绍 这里的Date组件全称为 Ext.form.field.Date,为form表单一个组件. 查看Ext.form.field.Date的源代码的得知需要 Ext.picker.Date. Ext.picker.Date是一个日期选择器,包含了日期选中.渲染布局…

也已经写了很久时间的extjs ,每次都用到很多的combobox,配置很多东西觉得实在是太麻烦,所以根据常用到的情况写了一个简便的combobox,再次记录下来,以免放在某个地方忘记了找不到了. 定义一个基本的baseCombobox类,如下. Ext.define('Admin.view.baseCmp.BaseCombobox', { extend: 'Ext.form.field.ComboBox', xtype: 'baseCombobox', editable: false, lab…

首先,需要从网上下载两个文件,一个是SenchaCmd-6.2.0-windows-64bit(我的电脑是window 10 64位) 另一个是ExtJs6的源码包(ext-6.0.0.415). 源码下载地址:http://pan.baidu.com/s/1ntqqZpB sencha cmd 下载地址:https://www.sencha.com/products/sencha-cmd 解压之后安装cmd,运行 SenchaCmd-6.2.0.103-windows-64bit.exe文件,…

杂项之python描述符协议 本节内容 由来 描述符协议概念 类的静态方法及类方法实现原理 类作为装饰器使用 1. 由来 闲来无事去看了看django中的内置分页方法,发现里面用到了类作为装饰器来使用,由于之前就看到过这一类的用法,但是一直没有明白具体是如何实现的,今天本着打破砂锅问到底的精神去网上搜资料,在这里不得不吐槽下百度搜索的垃圾了.....竞价排名做的那么6,搜一些技术文档.....各种坑爹...就是找不到想要的资源...于是FQ上google搜了搜,找到了python官网的文档...…

今天在帮一个兄弟检查一段自定义控件的代码时觉得他对xtype以及alias的使用和ExtJS各示例代码的使用有较多的不一致,而我自己也不是很清楚使用这两个属性时的最佳方法.因此在回家后整理出了这样一篇文档.一方面用来标准化我们自己的代码,另一方面也共享给大家,毕竟对这两个属性进行详细讨论的资料几乎没有. xtype 首先来看看xtype的定义.在ExtJS的官方文档中是这样对它进行定义的: This property provides a shorter alternative to creat…

最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题不好跟踪.更奇葩的是明明在sencha app watch上运行很好,但是sencha app build后会出现异常.即使是这样,但Sencha ExtJS 6 在UI控件和编程模式上确实比较强大.下面介绍一个 Widget Grid 用法,可以在表格grid中进行列样式渲染,是一个比较强大的功能…

主要目录文件介绍 builds:压缩后的ExtJS代码,体积更小,更快:docs:开发文档:examples:官方演示示例:locale:多国语言资源文件:pkgs:ExtJS各部分功能的打包文件:resource:ExtJS所需要的CSS与图片文件:src:未压缩的源代码目录:bootstarp.js:ExtJS库引导文件,可自动切换ext-all.js与ext-all-debug.js:ext-all.js:ExtJS核心库:ext-all-debug.js:ExtJS核心库的调试版,调试时…

1.下载 aptana studio.spket-1.6.23.ext-4.2.1.883.jsb2 其中:ext-4.2.1.883.jsb2这个比较重要 2.将spket-1.6.23解压后放到aptana安装目录的Aptana Studio 3\dropins文件夹中 将ext-4.2.1.883.jsb2放到Extjs的解压路径下 3.重启aptana后按照以下顺序配置 Window -> Preferences -> Spket -> JavaScript Profiles -…

杂项之使用qq邮箱发送邮件 本节内容 特殊设置 测试代码 1. 特殊设置 之前QQ邮箱直接可以通过smtp协议发送邮件,不需要进行一些特殊的设置,但是最近使用QQ邮箱测试的时候发现以前使用的办法无法奏效了...于是上网查了查,QQ对这方面做了一些限制,必须使用授权码才能登陆邮箱.官方链接在这:http://service.mail.qq.com/cgi-bin/help?subtype=1&&id=28&&no=1001256按照上面的官方文档配置好之后就可以使用QQ邮箱发…

杂项之图像处理pillow 本节内容 参考文献 生成验证码源码 一些小例子 1. 参考文献 http://pillow-cn.readthedocs.io/zh_CN/latest/ pillow中文文档http://pillow.readthedocs.io/en/3.4.x/ pillow官方文档http://blog.csdn.net/orangleliu/article/details/43529319 一些小例子http://python.jobbole.com/83685/ pill…

原文地址:http://blog.csdn.net/smilingleo/article/details/3733177 ExtJS里handler和listener都是用来对用户的某些输入进行处理的,有必要区分一下各自都是怎么用的. Handler handler与Action相关联,一个Action可以有多个Component引用: Action是一个可被共享的对象,有五个主要的属性:text, handler, iconCls, disabled, hidden component的构建方…

原文地址 :http://www.qeefee.com/article/ext-grid-keep-paging-selection ExtJS中经常要用到分页和选择,但是当选择遇到分页的时候,杯具就发生了,每一次翻页,其它页面的选中行就消失了.Ext 没有为我们提供内置的保持选中的支持,只有我们自己动手来实现了. 先说一下具体的思路吧:首先在页面中创建一个数组,用来存储Grid的所有选中行,然后分别处理selModel的select和unselect事件和Store的load事件. 在sele…

原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的.基本上都是Copy过来加以部分改造即可实现自己想要的功能,加之如今的第三方开发者也大发慈悲地写出了API的帮助文档以及示例文档.关于ExtJs内的文件上传,将从以下几个方面进行展开讲解: 一.ExtJs文件上传版面的布局以及配置 因为ExtJs的文件上传组件filefield是基于form表单提交数…

//EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { var USED_AMOUNT_ = 0; for (var i = 0; i < matMonthPlanHisList.length; i++) { if(matMonthPlanHisList[i].MAT_NO_ == record.get('MAT_NO_')){ USED_AMOUNT_…

概述 Extjs弹窗可以分为消息弹窗.对话框,这些弹窗的方式ExtJs自带的Ext.Msg.alert就已经可以满足简单消息提示,但是相对复杂的提示,比如如何将Ext.grid.Panel的控件显示嵌套到widget.window,然后随着widget.window的show方法展示到页面上哪?另外一个就是ExtJs中的Combobox下拉控件,如何做到手动输入,自动联想手动输入的内容进行查询? 一.针对自定义弹窗 通过window显示自定义弹窗,下面有几种方案思路 思路一.直接将gridpan…

概述 ExtJs是另外一种操作封装JavaScript的类库与Jquery同类.所以对Dom的操作也是支持的,比如修改Div内Html内容等操作.有几个问题需要思考下: 1.ExtJs也支持IFrame的操作,可是如何才能访问IFrame外部Parent的Extjs对象那? 2.在ExtJs中,我们能够通过TreePanel作为导航菜单,可是TreePanel的Root节点在合并和展开的两种状态展现出来的图标却是不一样,如何设置展开和合并时候图标一致性? 其实ExtJs通过简单的设置就能够解决上…

概述 1.ExtJS 5不支持日期选择框中只选择年月,为了满足ExtJs5可以实现选择年月的功能,查询网上资料,整理出来了相应的处理方式,最终实现的效果如下图: 2.ExtJS 控件丰富,如果需要实现下拉列表控件ComboBox中含有Check样式的皮肤,只需要在ComboBox控件中监听相应的下拉事件和选择事件即可.实现的效果如下: 日历控显示年月的实现方式 1.编写ext-extendmonth.js,代码内容如下 Ext.define('Ext.form.field.Month', { e…

概述 最近一直在做相关ExtJs方面的项目,遇到了ExtJs使用方面的一系列问题,现在将使用技巧做个记录汇总,以便于下次能够快速使用.以下都是ExtJs控件的常用方法,做简单汇总,俗话说,好记星不如烂笔头,总一天会使用的. 基础控件使用技巧 1.Grid表格操作:获取Store的数据信息和操作列表行数据 //创建一个grid var rowPanel = Ext.create('Ext.grid.Panel', {}); //获取grid对应的Store的数据条数 rowPanel.getSto…

自定义数据模型 数据模型类其实就是一个继承自Ext.data.Model 的类. Ext.define('MyApp.User', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' }, { name: 'phone', type: 'string' } ] }); fields 属性中定义了该模型的字段,它可以是对应到数据库中的字段.在使用的时候,…

首先看一个例子,我们在ExtJS中定义一个Window对象,代码如下: var win = Ext.create("Ext.window.Window", { title: '示例窗口', width: 300, height: 200 }); win.show(); 在上面的代码中,我们通过Ext.create方法创建了一个Window 对象,Ext.create 方法的第一个参数是类名,第二个参数是类的选项,它是一个JSON格式的对象,用来初始化Window对象.我们的窗口运行如下…