随笔分类 - ExtJs
1
ExtJs
ExtJS 刷新后,默认选中刷新前最后一次选中的节点
摘要:在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点。这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到这个节点上。 查询了好久终于找到一个可行的方案,就是通过节点的path来记录节点的位置信息,然后通过path从root节点开始逐层展开,直到最后一个节点。完成的代码如下:首先是extjs3.x版本中的方法://获取选中的节点 var node = tree.getSelectionModel().getSelectedNode(); if(node == null) { /...
阅读全文
ExtJs4中的复选树级联选择
摘要:本文将介绍ExtJs4中如何实现带复选框的树结构级联选择的,以及其他ExtJs4中常用的方法,包括表格悬浮提示等,下面将一一介绍。
阅读全文
ExtJs中gridpanel分组后组名排序
摘要:/** * 定义降序的groupingStore */var DescGroupingStore = Ext.extend(Ext.data.GroupingStore, {groupDir : 'ASC',groupBy : function(field, forceRegroup, direction) { direction = direction ? (String(direction) .toUpperCase() == 'DESC' ? 'DESC' : 'ASC') : this.groupDir; if (t...
阅读全文
Extjs改变树节点的勾选状态
摘要:Extjs改变树节点的勾选状态今天系统中有处地方需要一个功能点击一个按钮后将树节点前的复选框去掉,变成没有选择的状态。网上搜索了半天,然后自己查查API,终于找到解决办法了,下面把方法贴出来。在Extjs3.x和4.x版本中的处理方法是不一样的, 3.x版本中可以这样操作:node.attributes.checked=false;node.getUI().toggleCheck(false);这样就可以取消节点的check状态并且将页面上的勾去掉。在ExtJs4中的方法如下:node.raw.checked=false;node.set("checked",false);
阅读全文
ExtJs 4 中的MVC应用架构
摘要:一、ExtJs 4.x MVC模式的原理与作用大规模客户端应用通常不好实现不好组织也不好维护,因为功能和人力的不断增加,这些应用的规模很快就会超出掌控能力,ExtJS4带来了一个新的应用架构,不但可以组织代码,还可以减少实现的内容。新的应用架构遵照一个类MVC的模式,模型(Models)和控制器(Controllers)首次被引入。业界有很多种MVC架构,基本大同小异,ExtJS4的定义如下:a.Model模型:模型是字段和它们的数据的集合,例如User模型带有username和password字段,模型知道如何持久化自己的数据,并且可以和其他模型关联,模型跟ExtJS 3 中的Record类
阅读全文
ExtJs 常用代码片段(7.30更新)
摘要:笔者工作中用到的功能,以及一些小功能,贴出来跟大家分享。 1、grid加载时候选择一行或全选: 为stroe添加load事件,调用sm的selectAll方法 store.on("load",function(store) {sm.selectAll();});选择一行或多行和以调用selectRow、selectRows或selectRecords等方法,在api中有详细介绍。2、E...
阅读全文
Extjs4 之grid组件
摘要:grid表格是extjs的核心组件之一,它提供了展示大量数据的最佳途径。Grid组件的重要特性包括:智能渲染、标准布局、数据视图、特性支持、虚拟滚动和编辑改进,这些特性共同缔造了功能强大的4.0grid组件。智能渲染:在extjs4.0之前的版本中采用了‘最小公分母’的策略来支持各种丰富的特性,这种方式会对每一个表格产生大量的标签,而这些标签对于简单表格来说是不必要的,而在4.0中默认的表格只会产生很少的标签,对于复杂的功能采用附加特性的方式实现,这对于提高数据的展示速度和表格的性能起到了巨大的作用。标准布局:在ExtJs4.0中改变了原来直接处理内部标签和样式的布局方式,而是将表格划分为不同
阅读全文
ExtJs4之Reader、Writer和Store
摘要:好多天没写博客了,最近工作一直很忙。。。1.Reader数据读取器数据读取器主要用于将数据代理读取到的原始数据按照不同的规则进行解析,将解析后的数据保存在Model模型对象中。数据读取器相当于原始数据格式与Extjs标准数据格式之间的桥梁,它屏蔽了原始数据格式不同对程序开发造成的影响。在Extjs中提供的数据解析器主要有如下3种:Ext.data.reader.Json JSON数据读取器Ext.data.reader.Xml XML数据读取器Ext.data.reader.Array 数组数据读取器1.1 Ext.data.reader.ReaderExt.data.reader.Reade
阅读全文
ExtJs4之Proxy数据代理
摘要:Proxy数据代理是进行数据读写操作的只要途径,Extjs提供的数据代理类只要包括两大类,分别是Ext.data.proxy.Client客户端代理和Ext.data.proxy.Server服务器代理,他们都继承自Ext.data.proxy.Proxy类,客户端代理和服务器代理的子类如下所示,公有7个。客户端代理:Ext.data.proxy.Menory、Ext.data.proxy.WebStorage、Ext.data.proxy.LocalStorage、Ext.data.proxy.SessionStorage服务器代理:Ext.data.proxy.Ajax、Ext.data.
阅读全文
ExtJs4 之数据模型
摘要:ExtJs的数据模型是应用系统读取和保存数据的重要途径,ExtJs4中对其进行了大幅度的提升和改善,添加了新的Ext.data.Model实体模型类(原3.x和2.x的Ext.data.Record),通过实体模型类可以在客户端执行大部分对数据的操作,它提供了在模型层次的数据校验并新增了关系API将不同的模型关联起来,除此之外,代理Proxy也可以直接作用于Model模型类,这意味我们不依赖Sto...
阅读全文
ExtJs4常用工具类与函数之Ext.core.DomHelper
摘要:Ext作为一个AJAX框架,与HTML、DOM交互、操作非常多,DomHelper类在当中起到了很好的耦合作用,让胡勇通过Ext来透明的操作HTML或DOM。这样就可以很方便的操作Ext的Element和HTMLElement了。1.Ext.core.DomHelper.append()通过el获取该节点将o追加到el的子节点,如果returnElement为true则返回追加后形成的Ext的Element,否则返回追加后形成的HTMLElement.调用格式:Ext.core.DomHelper.append(Mixed el,Object/String o,[Boolean returnE
阅读全文
ExtJs4之常用函数
摘要:Ext提供了一个核心的Ext类,该类是单实例类,且不允许直接创建,该类提供了辅助应用Ext的各种组件及控件的调用. 1.Ext.onReady() 该方法的调用发生在Document对象加载完毕之后,HTML的onload事件以及image加载之前. 第一个参数为加载后该方法调用的函数,第三个参数如果为true则第二个参数将成为fn的执行范围,第三个参数如果没有传递,则默认为tr...
阅读全文
EXTJS4之常用工具类与函数--Ext.util.TaskRunner
摘要:增强版的DelayedTask,能提供多线程的定时服务,该类提供了对多线程任务的管理,可以通过ExtTaskMgr来创建TaskRunner的一个实例,其次也可以自行创建Ext.util.TaskRunner的实例。var task={run:function(){Ext.fly('clock').update(new Date().format('g:i:s'));},interval:1000...
阅读全文
EXTJS4之常用工具类与函数--Ext.core.Element
摘要:Ext.core.Element是所有组件及控件操作的基础,是一个DOM对象的包装,加入了DOM的操作处理,并根据不同的浏览器进行处理。该类的所有实例都是像我们展示通过DOM继续EXT.fx.Anim的视觉效果。该类的事件并不是Ext底层事件,而是封装浏览器事件。 <html><head><meta http-equiv="Content-Type" content="text/html; ch...
阅读全文
ExtJs4之Ext.util.JSON编码和解码JSON对象
摘要:1.decode() 该方法用于将符合JSON格式的String进行解码成为一个JSON的Object,如果JSON字符串为无效或者不符合格式,则会抛出一个异常来终止该方法的调用. 调用格式: Ext.util.JSON.decode(String json) 参数说明: json:用String描述的符合json格式的对象. 返回值: object:返回编码好的Ext.util.J...
阅读全文
ExtJs4常用工具类之Ext.util.Format
摘要:该类是Extjs的一个格式化公共类,提供了最常用的格式化方法。包括对字符串的截取,清楚字符串的空格,转换undefined为js的空对象,转换字符串为ks标识,转换html标签,将字符串转换为大写,同时还包括对HTML的编码和解码,获取文件大小,另外还包括按指定的格式对数据进行转换等。 1.ellipsis() 该方法用于将指定的字符串超长部分用省略号代替并返回。 调用格式: Ext.ut...
阅读全文
ExtJs4–表格--Grid
摘要:1、首先定义对象:Ext.define('log',{ extend:'Ext.data.Model', fields:[ {name: 'id',mapping:'id'}, {name: 'user'}, {name: 'type'}, {name: 'time'}, {name: 'describe'} ] });2、定义Store: var ...
阅读全文
Extjs grid添加图片,按钮和超链接
摘要:extjs的grid中我们经常需要添加一个图片状态或者按钮,总结一下自己用过的方法:一、状态表示:renderer:function(value){ if(value==0){ return ""; }else if(value==1){ return ""; } return value; }在columns中列添加renderer标识状态,效果图如下:二、事件处理:直接给im...
阅读全文
EXTJS自定义验证日期选择范围
摘要:方法一: //自定义VType类型,验证日期选择范围 Ext.apply(Ext.form.field.VTypes,{ //验证方法 dateRange:function(val,field){ var beginDate=null,//开始日期 beginDateCmp=null,//开始日期组件 endDate=null,//结束日期 endDateCmp=null,//结束日期组件 validStatus=tru...
阅读全文
ExtJS 4 树
摘要:Tree Panel是ExtJS中最多能的组件之一,它非常适合用于展示分层的数据。Tree Panel和Grid Panel继承自相同的基类,所以所有从Grid Panel能获得到的特性、扩展、插件等带来的好处,在Tree Panel中也同样可以获得。列、列宽调整、拖拽、渲染器、排序、过滤等特性,在两种组件中都是差不多的工作方式。 让我们开始创建一个简单的树组件 首先创建Store: va...
阅读全文
1