本文主要实现的效果是:点击查询按钮,根据form中的条件,在Grid中显示对应的数据(如果form为空,显示全部数据) 一.静态页面 1.查询按钮 { text:'查询', handler: 'onSearch' }, 2.写查询条件的form { fieldLabel: '条件一', name: 'code', minWidth: 180 }, { fieldLabel: '条件二', name: 'name', minWidth: 180 } 3.显示数据的Grid //store要crea

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

ExtJs的grid功能很强大,但是有时候觉得总是少那么一点点功能,我们就来扩展它,让它用起来更方便. 今天我们要扩展的是:根据记录的选择数量来禁用或启用grid toolbar上的某些按钮. 本文所有的代码和例子都在我的github上:ExtJsExtend 开始之前 在开始之前,我们先来扩展ExtJs的container容器. 在ExtJs中,可以通过给组件分配一个id来标识它,id是一个全局的唯一的标识,然后通过Ext.getCmp(id)来获取这个组件,看起来很方便,但是在单页应用中,给

extJs代码: <script src="build/ext-all.js"></script> <script src="build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script> <link rel="stylesheet" href="build/packages/ext-theme-crisp/bui

上一文章是扩展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 组件分类

本篇开始搭建一个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文件,

今天在帮一个兄弟检查一段自定义控件的代码时觉得他对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 -

原文地址: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