Ext自带一个Ext.tree.TreeFilter类，可以实现树节点的过滤，但是功能太单薄了。我自己实现了一个树的过滤功能，支持以下功能： <br />过滤时忽略父节点，默认情况下忽略 中文、拼音首字母过滤，你输中文就按照中文进行匹配，输拼音就按照首字母匹配 过滤后自动展开匹配结点的所有父节点 匹配字符串为空时将结点全部显示，可配置全部显示时结点状态为全收缩还是全展开，默认不处理 拼音缓存：确保汉字只转一次拼音，提高效率 <br />1.1 改动： <br />1.支持中文模糊匹配，输入汉字可以是字符串任

<br />文章内不再提供示例，需要查看者请从SVN下载，地址： <br />http://exttools.googlecode.com/svn/trunk/<br />效果图： <br /><br />Js代码 /**   * 扩展了Panel类，其布局设为accordion，所在区域为west；该组件初始化后会根据配置的url和root向后台发   * 起请求并解析返回的json串，根据parentcode为空的结点生成TreePanel，子节点通过parentcode属性添加为   * 对应结点的子

<br />运用了单例模式，使用的话直接让页面文件引用即可。该程序不直接关联任何树的任何事件，可以使用树的checkchange事件对核选的树节点进行进一步操作，譬如修改css样式等；如果通过toggleCheck方法设置结点核选状态将不会进行级联，但会触发树的checkchange事件,压缩包里是一个示例文件Js代码 /**   * 给树添加级联选中功能，为树设置属性enableAllCheck则为所有节点添加checkbox；   *   * 实现方式：   * 为TreeNode添加方法：cascad

为方便大家使用，我把控件所需的js、css、gif文件都提取出来了，示例可以直接放到Ext根路径下用浏览器打开查看运行效果。这个组件适用于Ext3.0以后版本，2.0肯定跑不了的 <br />第一个<br />使用方法示例：<br />Js代码 {   id:'time',   xtype:'datetimefield',   format:'H:i'  }  {id:'time',xtype:'datetimefield',format:'H:i'}<br />示例截图：<br /><

<br />有句老话叫不重复造轮子，既然网上已经有下拉树的扩展，为什么还要再做一个呢？答案很简单，网上那些满足不了我的需要。简单来说，本扩展UI组件具备以下功能：宽度自适应 下拉列表宽度可根据树的大小进行自动调整 延迟加载 默认采用，提高页面渲染速度 自动寻路 下拉列表展开时会将选中树结点的按其路径展开 键盘导航 支持使用上下左右回车ESC、TAB进行操作 智能过滤 支持使用汉字和拼音首字母对树进行过滤 默认值支持 可以为组件设置默认值，组件会自动找到对应结点 忽略父节点 默认情况只有选择子节点才有效 <b

<br />注意：html文件的Ext库引用请自行解决，效果图： <br /><br /><br />Js代码 /**   * 该扩展可以通过一定解析规则的json串生成菜单   * 通过itemclick事件调用点击菜单项的监听函数；   * 通过afterload事件调用菜单加载完毕后的监听函数；   * 注意：使用该控件须确保父菜单code值小于子菜单   * 'code', 'name', 'url', 'leaf', 'enabled', 'parentcode', 'iconcls'   *  

<br />仿照官网例子：XmlTreeLoader做的，下面有实例 <br />注意：html文件的库引用请自行解决Js代码 /**   * 通过读取JSON串生成树的层次结构,务必保证json数组中结点出现次序与树完全展开时一致！   * （通过后台对编码进行排序来完成）   * JSON串根节点默认为'list'   * 父结点id字段为   *    * 注意：   * 1.因为是一次加载全部结点，节点数过多的话将严重影响性能，此时请使用异步加载！   * 2.结点的id属性对应json中code属

Ext.ux.plugins.PageComboResizer：PagingToolbar插件，添加一个分页提供大小选择的ComboBox <br />Js代码 bbar: new Ext.PagingToolbar({               pageSize: 10,               store: store,               displayInfo: true,               plugins:[new Ext.ux.plugins.PageComboResiz

Ext.state.Manager存在的意义：简单说就是在客户端存取数据，譬如说用户打开一个Window之后对其大小进行了调整，他不想每次打开都要重新调整窗口大小，这时你就可以使用Ext.state.Manager记住他所设定的窗口大小，这样他即使关闭浏览器再打开打那个Window还会是你所保存的大小。 <br /><br />默认情况下所有组件执行构造函数时都会访问这个类。如果你想要让它记住组件的状态必须在程序初始化的时候设置一个Provider（一个可以对数据进行存取的底层实现），Ext提供的一个实现就

<br />这个插件的目的在于提高用户对于数据的选择效率。经常录入数据的人肯定能明白，在一长串列表中选择你想要记录是一件很费眼神的事；记得当初玩开心网可以按拼音首字母找到自己的好友，当时就觉得很是方便。如果您想提高用户对您软件的评价，请您考虑这个插件。 <br /><br /><br />实现原理：重写了Store中返回过滤函数的方法，使其中需要过滤的汉字转换为其拼音首字母数组（因为有多音字，数组内每一项对应一种拼音的可能性），遍历数组每一项与当前输入项生成的前端匹配正则表达式进行比对，有一个满足就返回tr

<br />在我的单页面试了下这个类的用法，发现这个类还是比较特殊的。 <br />说下详细用法： <br />1.在页面加入如下隐藏域Html代码 <form id="history-form" class="x-hidden">              <input type="hidden" id="x-history-field" />              <iframe id="x-history-frame">              </iframe>          </form

<br />以前单位做的项目都是上面一排菜单按钮，每点击一次按钮下面工作区的iframe就到后台重新加载一次页面；这样做有很大弊端，其一是iframe经常会对弹出层造成遮挡（ie6下），其二是每个页面都有一个jsp页面（其实就是些js、css之类的引用）和js文件，维护起来很是不便；其三，iframe里的遮罩没法挡住整个屏幕区域。既然如此，我们就不能直接去下js文件把组件添加到页面上吗？答案是可以的，而且很简单。 <br /><br />第一步：创建一个返回Panel的匿名方法，例如Js代码 (functi

<br />Ext提供了一套强大的事件处理机制，每个组件都有许多事件，用户可以很方便通过动态的方式为对象添加/删除事件监听函数（在实例化的时候不是必须的），从而动态的改变或添加对象的行为，而这一切又是如何实现的呢？ <br />阅读前请您准备好Javascript基础知识（包括：prototype属性、Functin对象的apply和call方法、函数的作用域等）。 <br />该脚本剥离了许多分支逻辑，修改了大多数函数的实现仅保留最基本逻辑，如需详细了解Ext内部请阅读Ext源代码。Enjoy it！ <

<br />总觉得的老用alert的方式打断用户操作是非常不好的做法，调用方法时这个提示会出现两秒，之后自动消失，稍做修改Js代码 /**   * 存放自定义的单例函数   * @author chemzqm@gmail.com   */  Ext.MyApp = function(){       var msgCt;              function createBox(t, s){           return ['<div class="msg">',            '<div

<br />cm列模型里如下：new Ext.grid.RowNumberer({         header : "序号",         renderer:function(value,metadata,record,rowIndex){           return store.lastOptions.params.start + 1 + rowIndex;       }    }),   

总结自己的代码 可能以后会用到 记录一下 方便以后查阅 1：所以显示window 的所需的代码 Java代码 MyExt.Utils.myWindow = Ext.extend(Ext.Window, {          shadow:false,         closeAction:'hide',        layout:'fit',        closable:true,        resizable:false,         modal:true,        constrai

<br />插件代码：Js代码 Ext.ux.MonthPickerPlugin = function() {        var picker;        var oldDateDefaults;          this.init = function(pk) {            picker = pk;            picker.onTriggerClick = picker.onTriggerClick.createSequence(onClick);            

<br />选择这个控件，是因为在昨天进行的一项开发中，需要一个可编辑的GridPanel控件，另外由于科目一项分为3-4级的树形结构，因此就需要找到一个合适的TreeGridPanel。<br />　　在网上查找很久，才发现了在Extjs3.0中，有Ext.ux.maximgb.tg.EditorGridPanel这样一个类提供了对我需求的支持，初步分析一下，依然有这样一些问题。目前本人还在使用这个控件进行开发，如果有什么新的内容会及时更新，欢迎大家通过E-mail和我共同学习。至于我的大多数修改都是通过

<br />代码简单 只是记录一下 <br /> Js代码   <html>       <head>           <meta http-equiv="Content-Type" content="text/html; charset=gbk">           <title>03.grid</title>           <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />     

Java代码 ext tree 动态修改各个节点名称icon小图标  ext tree 动态修改各个节点名称icon小图标Java代码 "afterchildrenrendered":function(){           tree.getRootNode().eachChild(function(_node){                   _node.setText("1111");//设置节点的文字                   _node.getUI().getIconEl().sr

<br />说明：<br />两个文件<br />jackyNode.java  treeVO对象 将数据库当中的树的数据库存入此<br />jackytree.java  采用递归算法 将一次性查出来的数据生成treeJSON结构<br />直接将两个文件复制到eclipse中  run as即可查看<br /> <br />jackyNode.javaJava代码 package com.codeasy.common;       public class jackyNode {       priva

<br />错误提示：<br />this.config[a] is undefined<br />this.mainBody is undefined<br />解决办法：<br />给autoExpandColumn对应的属性在ColumnModel中的定义加个id属性，如下：<br />{id:’name’,header: “name”,width: 75, sortable: true, dataIndex: ‘name’},<br />在代码中搜索autoExpandColumn，应该是该列没有定

Problem<br />An Ext.PagingToolbar allows paging over a large amount of data in chunks of predefined size. Adding it to a grid is pretty straightforward:1.bbar: newExt.PagingToolbar({ 2.  pageSize: 10, 3.  store: store, 4.  displayInfo: true5.})<br />and it

<br />Ext.Grid的强大功能想必用过Ext的都体会到，可以隐藏列，可以拖放，可以排序等等，但是如果用户隐藏了某一些列后，下次登录时还是要看到上次隐藏后的列该怎么办呢？这就涉及到一个用户使用习惯的问题。想到记录用户习惯，当然首选使用Cookie。但是问题来了，在什么时候记录Cookie？什么事件触发后我们去写Cookie？其实最完美的当然就是在隐藏列这一事件（暂且叫它事件吧，具体的我也不太清楚Ext隐藏列的原理）触发时把剩下的列写入Cookie，但是小生才疏学浅，没有找到这个“隐藏列”事件，没法重写

<br />1、Ext.grid.GridPanel<br />主要配置项：<br />store：表格的数据集<br />columns：表格列模式的配置数组，可自动创建ColumnModel列模式<br />autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0<br />stripeRows：表格是否隔行换色，默认为false<br /><br />cm、colModel：表格的列模式，渲染表格时必须设置该配置项<br />sm、selModel：表格的选择模式，默认

<br />在ext的世界里面,我重新感受到了在学校里玩swing的记忆.那时我们都需要为一个控件创建一个数据源,在把这个数据源绑定在控件上.ext也是如此.<br /><br />首先,两个下拉框,第一个下拉框首先load数据源,在select的事件中在load第二个数据源,这就是一个简单的二级联动的实现原理了.Js代码 //  第一个下拉框   var parentStore = new Ext.data.Store({       proxy: new Ext.data.HttpProxy({    

<br />通过extJS实现下拉框联动，即有两个下拉框，其中一个的下拉选项是根据另一个下拉框所选择的数据而变化的。现在网上有同学实现过，其实现思路是针对其中一个的下拉框的select事件编写代码，通过替换另一个下拉框store的proxy，然后重新装载实现级联的。代码如下：<br />Js代码 listeners:{            select : function(combo, record, index){          childStore.proxy= new Ext.data.Htt

<br />call 方法 <br />请参阅 <br />应用于：Function 对象 <br />要求 <br />版本 5.5 <br />调用一个对象的一个方法，以另一个对象替换当前对象。 <br /><br />call([thisObj[,arg1[, arg2[, [,.argN]]]]]) <br />参数 <br />thisObj <br />可选项。将被用作当前对象的对象。 <br />arg1, arg2, , argN <br />可选

<br />JS 中如何判断 undefined<br />JavaScript 中有两个特殊数据类型：undefined 和 null，下节介绍了 null 的判断，下面谈谈 undefined 的判断。<br />以下是不正确的用法：<br />var exp = undefined;<br />if (exp == undefined)<br />{<br />    alert("undefined");<br />} <br />exp 为 null 时，也会得到与 undefined 相同的结果

<br />　　有时候我们需要根据store里的某个标记，令grid的数据改变为一种特别的颜色。如我项目中的，把用户状态不正常（字段memberstatus不为1）的记录变成灰色。'x-grid-record-gray'是已经在页面上定义好的CSS样式。下边截取了grid里的viewConfig信息。<br />  viewConfig:{<br />   columnsText:"显示/隐藏列",<br />   sortAscText:"正序排列",<br />   sortDescText

<br />表格相关组件总图：<br /><br /> <br />1、Ext.grid.GridPanel<br />     主要配置项：<br />          store：表格的数据集<br />          columns：表格列模式的配置数组，可自动创建ColumnModel列模式<br />          autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0<br />          stripeRows：表格是否隔行

<br />在列映射的时候就要设定渲染方式<br />Js代码 var colModel = new Ext.grid.ColumnModel([      { header: "$ Sales", width: 100, sortable: true, renderer: heihei}    ]);  var colModel = new Ext.grid.ColumnModel([ { header: "$ Sales", width: 100, sortable: true, rend

<br />Ext.grid的输出列类型(xtype)为numbercolumn时,默认输出的小数位数为2,为了自定义输出的格式,可为其定义format属性,如:<br />var sub_cm = new Ext.grid.ColumnModel([<br /> { <br />            header: "单机用量", <br />            xtype: "numbercolumn", <br />            format: '0,0.0

<br />Ext.util.Format类是Ext对数据进行格式化操作的一个类,这篇会把所有的方法都讲解下,因为每个方法都会用到.因为每个方法都和我们用到的服务器端语言中所常用到的方法一样,看了名称就知道什么意思.这里我会把Ext封装起来的源代码复制出来,看了之后就能够更加理解它的方法的意义了.<br /> <div><br />    <script type="text/javascript"><br />    function ready()<br />    {<br />

<br />//upFile.js<br />Ext.onReady(function() {<br />var fileForm = new Ext.form.FormPanel({<br />   title : "",<br />   renderTo : "fileUpload",<br />   fileUpload : true,<br />   layout : "form",<br />   id : "fileUploadForm",<br />   i

<br />Javascript在互联网上名声很臭，但你又很难再找到一个像它这样如此动态、如此被广泛使用、如此根植于我们的生活中的另外一种语言。它的低学习门槛让很多人都称它为学前脚本语言，它另外一个让人嘲笑的东西是动态语言的概念是偏偏使用了高标准的静态数据类型。其实，你和Javascript都站错了立场，而现在，你让Javascript很生气。这里有五个原因能说明你的Javascript技术很烂。<br />1. 你没有使用命名空间<br />是否还记得在大学里老师告诉你不要在家庭作业里使用全局变量

<br />1、Ext.tree.TreePanel<br /> 主要配置项：<br /> root：树的根节点。<br /> rootVisible：是否显示根节点，默认为true。<br /> useArrows：是否在树中使用Vista样式箭头，默认为false。<br /> lines：是否显示树线，默认为true。<br /> loader：树节点的加载器，默认

<br />Ext.Window扩展自Ext.Panel，其xtype值为window。<br /><br /><br />1、主要配置项：<br /> closable：是否允许关闭窗口，默认为true。<br /> closeAction：关闭窗口的动作，包括以下两种：<br /> close：从DOM删除窗口，销毁窗口及其所属组件，窗口不再可用，重新显示需要调用show方法。此为默认值。<br /> hide：通过设置

在EXTJS官网看到一片文章，讲的是Extjs.Loader的使用方法，文章非常详细的介绍了Loader的机制及用法，感觉非常不错，但无奈英文实在太烂，就没转过来。昨天恰好在优快云看到了这篇文章的译文，而译文的质量非常高，对译者的翻译水平怎一个羡慕了得。废话不多说，正文开始。

Extjs4动态加载的路径设置方法。在Loader对象中，动态加载是使用getPath方法获取下载路径的，其代码如下： getPath : function(className){    varpath='',     paths=this.config.