extjs总结
EXTJS 自己读书整理
ExtJS笔记
ExtJS笔记ExtJS笔记--Ext.form.FormPanel(二)1、layout : String此容器所使用的布局类型。
如不指定，则使用缺省的/doc/4c12603981.htmlyout.ContainerLayout类型。
当中有效的值可以是：accordion、anchor、border、cavd、column、fit、form和table。
针对所选择布局类型，可指定#layoutConfig进一步配置。
2、layoutConfig : Object选定好layout布局后，其相应的配置属性就在这个对象上进行设置。
（即与#layout配置联合使用）有关不同类型布局有效的完整配置信息，参阅对应的布局类：/doc/4c12603981.htmlyout.Absolute/doc/4c12603981.htmlyout.Accordion/doc/4c12603981.htmlyout.AnchorLayout/doc/4c12603981.htmlyout.BorderLayout/doc/4c12603981.htmlyout.CardLayout/doc/4c12603981.htmlyout.ColumnLayout/doc/4c12603981.htmlyout.FitLayout/doc/4c12603981.htmlyout.FormLayout/doc/4c12603981.htmlyout.TableLayout3、bufferResize : Boolean/Number当设置为true（100毫秒）或输入一个毫秒数，为此容器所分配的布局会缓冲其计算的频率和缓冲组件的重新布局。
如容器包含大量的子组件或这样重型容器，在频繁进行高开销的布局时，该项尤为有用。
4、activeItem : String/Number组件id的字符串，或组件的索引，用于在容器布局渲染时候的设置为活动。
学习ExtJs笔记
学习ExtJs笔记Grid表格1、添加数据的时候，将数据的属性设置为dirty。
因为在使用Ajax提交数据的时候，非dirty的数据不会自动保存到store的modifield属性中。
2、保存数据：（1）store.modifield.slice(start,end);作用：返回一个新数组，取得从start到end的所有元素，但不包括end元素。
如果参数只有一个0，则表示取得全部的数据；（2）each(m,function())(m为一个数组)，该方法主要作用是遍历数组m中的每一条记录，并且每条记录都按照function()方法进行处理。
不可在function方法里面加上循环，否则，将出现多重结果。
（3）listeners监听器：listeners: {"afterEdit": {fn: afterEdit,scope: this} }作用：监听afterEdit。
当单元格编辑完成或者退出编辑状态，自动调用fn方法，作用的范围是当前页面。
（4）当添加数据成功后，新添加的数据有三角行的标识，要除掉标识，可用Record 的commit方法。
3、读取数据（1）从Txt文件中读取数据将读取的数据编码eval(response.responseText),否则将不能正确读取数据。
（2）设置记录的字段的值var initValue = {name:'',gender:'',age:''};var p = new Record(initValue);p.set('name',data_get[i].name);p.set('gender',data_get[i].gender);p.set('age',data_get[i].age);Tree 树1、Tree的加载使用方法render。
Tree.render()方法将tree加载到tree的‘el’中。
ExtJs总结
1.E xtJs组件详解1.1Ext.grid.ColumnModel设置1.用于定义Grid的列用例var colModel = new Ext.grid.ColumnModel([{header: "Ticker", width: 60, sortable: true},{header: "Company Name", width: 150, sortable: true}]);2.回到ColumnModel,它的构造参数是一个config组成的数组,其中config定义为{align : String //css中的对齐方式dataIndex : String //要绑定的Store之Record字段名fixed : Boolean //如果为真列宽不能被改变header : String //头部显示的名称hidden : Boolean //隐藏本列id : String //主要用于样式选择,如果已定义此属性,那么列所在的单元格会定义class为x-grid-td-idrenderer : Function //可以使用这个构造参数格式化数据resizable : Boolean //可调节尺寸sortable : Boolean // 可排序width : Number //宽度}另外虽然未经声明,但config事实上支持editor:Ext.form.Field属性,这点会在Ext.grid.EditorGridPanel中看到,另外为了扩展grid的表现,我们通常也需要自定义列,顺便提一个有趣的列,Ext.grid.RowNumberer,这是Ext为我们扩展好的一个简单列,它的构造很简单,也没有其它的方法和属性,Ext.grid.RowNumberer({ header : String,sortable : Boolean, width : Number})如果使用它,上例可改为var colModel = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),{header: "Ticker", width: 60, sortable: true},{header: "Company Name", width: 150, sortable: true}]);属性defaultSortable : Boolean //默认可排序defaultWidth : Number //默认的宽度setConfig : Object //返回构造时的config参数3.方法ColumnModel( Object config )构造4.getCellEditor( Number colIndex, Number rowIndex ) : Object得到指定行列的编辑者getColumnById( String id ) : Object得到指定id的列对象getColumnCount() : Number得到列数getColumnHeader( Number col ) : String得到列头部文本getColumnId( Number index ) : String得到列idgetColumnTooltip( Number col ) : String得到列提示getColumnWidth( Number col ) : Number列宽getColumnsBy( Function fn, [Object scope] ) : Array通过fn找到指定的列getDataIndex( Number col ) : Number得到指定列的数据绑定对象在store中的序号getIndexById( String id ) : Number通过id找序号getRenderer( Number col ) : Function得到绘制器getTotalWidth( Boolean includeHidden ) : Number总的宽度hasListener( String eventName ) : Boolean有事件侦听者?isCellEditable( Number colIndex, Number rowIndex ) : Boolean指定行列可编辑?isFixed() : void应该返回Boolean,充满?isHidden( Number colIndex ) : Boolean指定列隐藏?isResizable() : Boolean可重写义大小isSortable( Number col ) : Boolean可排序?setColumnHeader( Number col, String header ) : void设置指定列列头setColumnTooltip( Number col, String tooltip ) : void设置指定列提示setColumnWidth( Number col, Number width ) : void设置指定列宽度setConfig( Array config ) : void重设configsetDataIndex( Number col, Number dataIndex ) : void设置指定列的数据源setEditable( Number col, Boolean editable ) : void设置指定列是否可编辑setEditor( Number col, Object editor ) : void为指定列设置编辑器setHidden( Number colIndex, Boolean hidden ) : void设置指定列隐藏setRenderer( Number col, Function fn ) : void为指定列设置输出方法5.事件columnmoved : ( ColumnModel this, Number oldIndex, Number newIndex )configchanged : ( ColumnModel this )headerchange : ( ColumnModel this, Number columnIndex, String newText )hiddenchange : ( ColumnModel this, Number columnIndex, Boolean hidden )widthchange : ( ColumnModel this, Number columnIndex, Number newWidth )1.2Ext.data.JsonReader设置在JavaScript中，JSON是一种非常重要的数据格式，key:value的形式比XML那种复杂的标签结构更容易理解，代码量也更小，很多人倾向于使用它作为EXT的数据交换格式。
ext入门总结
ExtJs 学习Author: 石恺元datetime: 2010-11-24一．Ext简介ExtJS 是一种优秀的Ajax框架，可以用来开发带有华丽外观的RIAlto(富客户端)的Ajax应用，使得我们的B/S应用更加具有活力。
由于他是一种用JavaScript编写，与后台技术无关的前端Ajax框架因此，可以把ExtJS用在.net,java,php等多种开发语言中。
Ext使用做出来的东西很像桌面程序 ExtJS开始基于YUI技术，由开发人员jack Slocum 开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式,数据解析上的异常处理Ext都很优秀。
要使用ExtJs，那么首先要得到ExtJx文库文件,该框架是一个开源的，可以直接从官方网站上下载网址是/products/js/download.php然后根据提示进入下载页面。
二．准备工作需要三个工具：1. ExtJs的主程序包2.AdobeAIR 是Abode的一个支持工具3.（必须先安装adoair然后才能装这个，ext的视API，会创建一个桌面图标，很好看的一个工具）三．核心包打开ext2.3核心包有以下内容：adaper: 负责第三方提供的底层库(包括Ext自带的底层库)映射为Ext所支持的底层库buile : 压缩后ext全部的源码(里面分类存放).docs : API帮助文档（这个文档需要一个adobe的一个工具）exmaples: 提供使用ExtJs 的例子resources: Ext UI 资源文件目录，如CSS，图片等。
source : 无压缩Ext全部的源码(里面分类存放)遵从Lesser GNU (LGPL)开源协议。
ext-all.js :压缩后ext的全部源码。
ext-all-debug.js : 无压缩ext的全部源码用于调试ext-core.js : 压缩后Ext的核心组件，包括source/core 下的所以类ext-core-debug.js : 无压缩Ext核心组件，包括source/core下的所有类【注: 压缩的源码实际上就是把源码无换行，无空格，所以源程序在一行】我们要用到的文件：样式文件：ressources/css/ext-all.cssext文库主要有两个：adapter/extext-base.js以及ext-all.js,其中ext-base.js表示基础包，ext-all.js表示核心库（appdaper表示配置器，也就是说可以有多种配置器也就是说用其他几个也行）。
ExtJs学习笔记
ExtJs学习笔记目录1.ExtJs 结构树 (2)2.对ExtJs的态度 (3)3.Ext.form概述 (4)4.Ext.T abPanel篇 (5)5.Function扩展篇 (7)6.Ext.data.Store篇 (10)7.Ext.data.JsonReader篇一 (13)8.Ext.data.JsonReader篇二 (16)9.Ext.data.HttpProxy篇 (20)10.Ext.data.Connection篇一 (21)11.Ext.data.Connection篇二 (25)12.Ext.Updater篇一 (27)13.Ext.Updater篇二 (28)14.JSON序列化篇 (34)15.通信篇 (36)16.extJs 2.0学习笔记(Ajax篇) (40)17.extJs 2.0学习笔记(Ext.data序论篇) (40)18.extJs 2.0学习笔记(Ext.Panel终结篇) (41)19.extJs 2.0学习笔记(事件注册总结篇) (47)20.extJs 2.0学习笔记(Ext.Panel篇一) (50)21.extJs 2.0学习笔记(Ext.Panel篇二) (53)22.extJs 2.0学习笔记(Ext.Panel篇三) (62)23.extJs 2.0学习笔记(Ext.Panel篇四) (66)24.extJs 2.0学习笔记(组件总论篇) (70)25.extJs 2.0学习笔记(Ext.Element API总结) (74)26.extJs 2.0学习笔记(Element.js篇) (78)27.extJs 2.0学习笔记(DomHelper.js篇) (81)28.extJs 2.0学习笔记(ext.js篇) (83)extjs的确是个好东西，但是，它的优点也就是它的缺点：∙加载页面慢∙时间一长，浏览器占内存就会疯长∙服务器端功能极度削弱，除了数据库操作外，几乎所有功能都到了客户端，还得用javascript来写。
ExtJs基础知识总结：自定义弹窗和ComboBox自动联想加载（四）
ExtJs基础知识总结：⾃定义弹窗和ComboBox⾃动联想加载（四） Extjs弹窗可以分为消息弹窗、对话框，这些弹窗的⽅式ExtJs⾃带的Ext.Msg.alert就已经可以满⾜简单消息提⽰，但是相对复杂的提⽰，⽐如如何将Ext.grid.Panel的控件显⽰嵌套到widget.window，然后随着widget.window的show⽅法展⽰到页⾯上哪？另外⼀个就是ExtJs中的Combobox下拉控件，如何做到⼿动输⼊，⾃动联想⼿动输⼊的内容进⾏查询？ 通过window显⽰⾃定义弹窗，下⾯有⼏种⽅案思路思路⼀、直接将gridpandel填充到widget.window对应的Items 代码如下：var InvoiceItemGrid = Ext.create('Ext.grid.Panel', {forceFit: false,autoHeight: true,autoScroll: true,frame: true,split: false,layout: "fit",height:document.documentElement.clientHeight,margin: 0,store: PrecStore,loadMask: { msg: '数据加载中...' },columnLines: true,//dockedItems: [PTxtInfo],//selType: "checkboxmodel",selModel: {mode: "multi",//multi,simple,single；默认为多选multicheckOnly: false,//如果值为true，则只⽤点击checkbox列才能选中此条记录allowDeselect: true,//如果值true，并且mode值为单选（single）时，可以通过点击checkbox取消对其的选择},viewConfig: {stripeRows: true,//在表格中显⽰斑马线enableTextSelection: true//可以复制单元格⽂字 "GGXH", "XMSL", "XMDJ", "XMJE", "SL", "SE", "SPBM", "TaxItem"],},bbar: { xtype: "pagingtoolbar", inputItemWidth: 100, store: PrecStore, displayInfo: true },columns: [{ text: "Id", width: 80, dataIndex: "Id", hidden: true },{ text: "商品名称", width: 80, dataIndex: "XMMC" },{ text: "单位", width: 80, dataIndex: "DW" },{ text: "规格型号", width: 120, dataIndex: "GGXH" },{ text: "数量", width: 80, dataIndex: "XMSL" },{ text: "项⽬单价", width: 120, dataIndex: "XMDJ" },{ text: "项⽬⾦额", width: 80, dataIndex: "XMJE" },{ text: "税额", width: 80, dataIndex: "SE" },{ text: "税率%", width: 80, dataIndex: "SL" },{ text: "税⽬编码", width: 160, dataIndex: "SPBM" },]});//主窗体var WindItem= Ext.create('widget.window', {title: '发票明细',closable: true,closeAction: 'hide',modal: true,frame: true,layout: 'fit',width: 895,minWidth: 895,height: 430,layout: {type: 'border',padding: 2},items: [InvoiceItemGrid]});显⽰的结果截图如下：结果分析：grid的标题也没显⽰出来，⽽且随着窗体⼤⼩的拉伸，内容不会全部显⽰。
extJs2.0学习笔记（ext.js篇）
extJs2.0学习笔记（ext.js篇） 要是以前，我铁定整天到处找教程看，光说不练，现在觉悟了，看教程看得最多，不一定能看完，看完了不一定能比作者更明白，看明白了不一定能用得好。
所以看教程其实好处不大，只能作为小小的参考。
很多东西看别人的始终是没有用。
只有将实验进行到底才是王道…… 这儿主要是代码分析。
研究工具：Dreamweave cs3(装那个extJs 2.0插件老装不上)、Aptana(一个好处，好看代码，有括号匹配，json语法好是好，就是括号多了，搞清在哪儿结束) 发现，extJs的代码最喜欢用json语法定义，类基本上都是用json语法定义的。
而不是在外面一大路的xx.prototype.yyyy=function(){……}。
不过这种语法蛮清晰。
我喜欢。
extJs时面只有一个类：Ext，它是一个静态类。
提供了经常要用到的函数。
Ext.apply = function(o, c, defaults){if(defaults){// no "this" reference for friendly out of scope callsExt.apply(o, defaults);}if(o && c && typeof c == 'object'){for(var p in c){o[p] = c[p];}}return o;}; 这是apply函数，作用其实相当于克隆，它把对象c中的成员全部复制到o中去。
如果有defaults，也把它的内容复制到o中。
这儿其实揭示javascript的一种语法： javascript中的对象的成员有两种引用方法： 一、o.propertyName 二、o[propertyName] 这段代码关键就在o[p]=c[p]。
这个要理解。
尽管如此，但是不能像下面一样做： var newelem=new Object(); Ext.apply(newelem,Ext.getDom("a1")); Ext.getDom("form1").appendChild(newelem); 下面一大段的代码，由于dw不好看代码，半天才晓得那儿是个(function(){……Ext.apply(Ext,{……}})()，这是我把概述出来。
ExtJs特点、优缺点及注意事项
ExtJs特点、优缺点及注意事项1.什么是ExtJs?ExtJS可以⽤来开发RIA也即富客户端的AJAX应⽤，是⼀个⽤javascript写的，主要⽤于创建前端⽤户界⾯，是⼀个与后台技术⽆关的前端Ajax框架。
因此，可以把ExtJS⽤在.Net、Java、Php等各种开发语⾔开发的应⽤中。
ExtJS的前⾝来⾃于YUI，经过不断发展与改进，现在已经成为最完整与成熟的⼀套构建RIA Web应⽤的JavaScript基础库。
利⽤ExtJS构建的RIA Web应⽤具有与桌⾯程序⼀样的标准⽤户界⾯与操作⽅式，并且能够横跨不同的浏览器平台。
ExtJS已经成为开发具有完满⽤户体验的Web应⽤完美选择。
ExtJs最开始基于YUI技术，其UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swing两者，并为开发者屏蔽了⼤量跨浏览器⽅⾯的处理。
相对来说，EXT要⽐开发者直接针对DOM、W3C对象模型开发UI组件轻松。
2.ExtJs的特点(1).纯Html/CSS+JS技术,重新定义表⽰层的耦合；(2).基于纯Html/CSS+JS技术，提供丰富的跨浏览器UI组件，灵活采⽤JSON/XML数据源开发，使得服务端表⽰层的负荷真正减轻，从⽽达到客户端的MVC应⽤；(3).集成多种JS底层库，满⾜开发者不同需求；(4).Ext初期仅是对YUI的对话框扩展，后来逐渐有了⾃⼰的特⾊，深受⽹友的喜爱。
发展⾄今，Ext除YUI外还⽀持Jquery Prototype等的JS 库，让⼤家⾃由地选择；(5).多浏览器⽀持、⽀持多平台下的主流浏览器。
3.ExtJs的优缺点(1).ExtJs的优点<1>.UI组件丰富，外观漂亮。
Ext JS库有着丰富且漂亮的UI组件，⼤⼤缩短了我们的开发周期，⽽且组件拥有漂亮的布局，经过简单的调⽤与配置就可以实现不错的界⾯布局。
ExtJS提供的各种组件可以⽤更加标准的⽅式展⽰数据降低了开发难度。
ExtJs使用总结（非常详细）
ExtJs使用总结（非常详细）一、获取元素（Getting Elements）1.Ext.getvar el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存2. Ext.flyvar el = Ext.fly('myElementId')//不需要缓存。
注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。
3.Ext.getDomvar elDom = Ext.getDom('elId'); // 依据id来查dom节点var elDom1 = Ext.getDom(elDom); // 依据dom节点来查dom 节点二、CSS元素4.addClassExt.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式5.radioClassExt.fly('elId').radioClass('myCls');//添加一个或多个className 到这个元素，并移除其所有侧边（siblings）节点上的同名样式。
6.removeClassExt.fly('elId').removeClass('myCls'); // 移除元素的样式7.toggleClassExt.fly('elId').toggleClass('myCls'); // 加入样式Ext.fly('elId').toggleClass('myCls'); // 移除样式Ext.fly('elId').toggleClass('myCls'); // 再加入样式8.hasClassif (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式// 是有样式的……}10.replaceClassExt.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式11.getStylevar color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。
Extjs学习笔记
Extjs学习笔记去官网下载好extjs的压缩包，解压缩之后得到如下目录结构。
在其中新建一个my目录，以后所有的样例文件都新建在这个目录中。
1.Hello world!先看一个Extjs版的 Hello World网页的全部代码：代码如下:<html><head><title>Extjs MessageBox</title><link rel="Stylesheet" type="text/css" href="../resources/css/ext-all.css" /><script type="text/javascript" src="../adapter/ext/ext-base-debug.js"></script> <script type="text/javascript" src="../ext-all-debug.js"></script></head><body><script type="text/javascript">Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';Ext.MessageBox.alert('Hello', 'Hello world');});</script></body></html>运行下，结果如下：注意上面引入js文件的顺序不能颠倒，否则不能得到正确的结果。
2.Ext.MessageBox Ext.MessageBox实现了常见的提示框功能。
extjs总结
ext‐all.css：这是一个样式表文件，用来控制组件的显示。
改文件不需要进行修改，任何改动将影响日后的升级。
如果真的想改动样式的话，可以在引入该样式文件后再做覆盖。
•ext‐base.js：这个文件提供了Ext的核心功能。
如果Ext是一部车，它就是车的引擎。
这个文件我们可以修改以用来采用其他的库，如jQuery，让它和Ext共存。
•ext‐all‐bug.js/ext‐all.js：所有的组件都蕴含在这个文件里面。
前者用来调试开发，后者在发布的时候采用。
Ext.onReady：这个函数用来判断页面已经准备好来执行Ext的内容，即用来判断页面是否加载完全；Ext.Msg：用来产生一个有固定样式的消息窗口；configuration objects(配置对象)：这个函数定义控件将如何展示和工作；Ext.get：这个函数用来访问和控制DOM中的而元素。
Function stapler(){Ext.Msg.show({title: 'Milton',msg: 'Have you seen my stapler?',buttons: {yes: true,no: true,cancel: true}});}Ext.onReady(stapler());这里提几点在使用配置对象时的注意事项：•配置条目（record）要被花括号包围，每一个括号中的条目都是对象的一部分——{records}；•每个条目都有属性名和属性值，其间被冒号分割，条目之间靠逗号分割——{name0: value0, name1: value1}；•条目的属性值可以是任何数据类型，包括布尔型，数组，函数以及对象——{name0: true, name1: {name2: value2}}；方括号代表数组——{name: [‘one’, ‘two’, ‘three’]}。
数组中的元素也可以是包含对象、值与数字的任何东西。
Extjs常用方法总结
Ext常用语法获取页面元素：Ext.get();//非常耗内存，不能使用Ext.fly();//虽然省内存，但基本上只能使用一次Ext.getDom();//适合直接获取页面元素Ext.Element常用方法：查询系方法：contains：判断元素是否包含另一个元素child：从元素的直接子元素中选择与选择符匹配的元素down：选择与选择符匹配的元素的子元素first：选择元素第一个子元素findParent：查找与简单选择符匹配的元素的父元素findParentNode、up：查找与简单选择符匹配的元素的父元素is：判断元素是否匹配选择符last：选择元素的最后一个子元素next：选择元素同层的下一个元素prew：选择元素同层的上一个元素parent：返回元素的父元素Ext.query：根据选择符获取元素Ext.select：根据选择符获取元素集合DOM操作系方法：appendTo：将当前元素追加到指定元素中appendChild：在当前元素中追加元素createChild：在元素中插入由DomHelper对象创建的元素inertAfter：将元素插入到指定元素之后inertBefore：将元素插入到指定元素之前inertSibling：在当前元素前或后插入（或创建）元素（同层）。
insertHtml：在当前元素内插入HTML代码remove：移除当前元素replace：使用当前元素替换指定元素replaceWith：使用创建的元素替换当前的元素wrap：创建一个元素，并将当前元素包裹起来。
样式操作系方法（一）：addCls：增加CSS样式到元素，重复的样式会自动过滤applyStyles：设置元素的style属性setStyle：为元素设置样式getStyle：返回元素的当前样式和计算样式getStyleSize：返回元素的样式尺寸setOpacity：设置不透明度clearOpacity：；清理不透明度设置getColor：返回CSS颜色属性的值，返回值为6位数组的16进制颜色值boxWrap：使用box.Markup定义的HTML代码包装元素样式操作系方法（二）：addClsOnClick添加样式当点击该元素的时候addClsOnOver添加样式当鼠标移动到元素上的时候getMargin：返回值具有top、left、right、bottom属性的对象，属性值为响应的元素margin值。
自己整理的一些ExtJS学习资料
自己整理的一些ExtJS学习资料1.ExtJs是什么？ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA也即富客户端的AJAX应用，说白了就是让开发人员轻松地实现丰富多少的绚丽界面。
建议使用版本Ext 2.22.最简单的了解方式――看例子官方例子3.ExtJs的学习方式：API ＋网上资源（视频教程＋系列教程＋讨论群）API文档链接：中文英文（中文难免有错漏，但易读，两者交互地看～）网上系列教程：谦虚的天下Ext2.2学习系列:ExtJS与.NET结合开发实例Ext教程PDF版视频教程：""132.97.64.151"software"开发必备软件"others"ExtJs"视频教程4.帮助工具VS2008_ExtJS智能提示插件FireFox＋Firebug5.开始逐步了解ExtJsa．Ext结构图乍一眼看上去有好多，好乱，但其实我们的平常使用并不需要把全部都学会才能用，重点的控件有：布局（Layout），Grid，tree，panel，form，menu 。
我今天想重点讲讲前4个控件。
b．ExtJS入门可以参考文章ExtJs基础ExtJs入门c．控件说明（重点）a)布局（Layout）关于布局Layout的几种模式b)Panel有panel tabpanel window 3种方式他们都有本质都是一个面板，但是具体应用的不同产生了不同的特性。
panel参数含义及例子window tabnel重点的参数是载入方式，将在下一部分说说这里估计大家会体会到ExtJs控制之间的一些关系，下面的Grid控件这种特性更强烈。
c)Grid一般重点的部分是column，data 控件，组成一个基本的grid显示，这里grid控件实际是一个容器d)Tree有人说过只为了tree，都值得学习ExtTree介绍e)结合使用的例子d．ExtJs前后台交互的例子（重点）主要是grid，tree，panel的异步调用机制。
ExtJS笔记
ExtJS笔记Ext.form.DateField类全称：Ext.form.DateField继承自于：Ext.form.TriggerField提供一个下拉的Ext.DatePicker日期选择、自动效验控件的日期输入字段。
配置项1、format : String用以覆盖本地化的默认日期格式化字串。
字串必须为符合指定Date#parseDate的形式(默认为 'm/d/y')。
2、 altFormats : String用 "|" 符号分隔的多个日期格式化字串，当输入的日期与默认的格式不符时用来尝试格式化输入值(默认为 'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d')。
3、disabledDaysText : String一个禁用的星期数组，以 0 开始。
例如，[0，6] 表示禁用周六和周日(默认为 null)。
4、disabledDatesText : String禁用星期上显示的工具提示(默认为 'Disabled')。
5、minText : String当字段的日期早于 minValue 属性指定值时显示的错误文本(默认为'The date in this field must be after {minValue}')6、maxText : String当字段的日期晚于 maxValue 属性指定值时显示的错误文本(默认为'The date in this field must be before {maxValue}')7、invalidText : String表单元素无效时标在上面的文本信息（默认为"The value in this field is invalid"）。
8、triggerClass : String应用到触发器身上的CSS样式类9、showToday : BooleanFalse表示隐藏底部的Today按钮并禁止空格的快捷键来选择当日日期（默认为true）。
extjs（gis经验总结）
extjs（gis经验总结）(1)<package name="promotion-json" namespace="/" extends="json-default">如果这个package继承了json-default的时候。
如果在页面发送ajax请求的时候。
在action中如果有多个方法的时候。
会莫名其妙的发送了两个请求出来。
一个是正常的。
一个是空的。
会造成错误。
后来发现原因是这样的。
struts2 中JSON的原理是在ACTION中的get方法都会序列化，所以前面是get的方法只要没指定不序列化，都会执行。
也就是说。
如果方法名称是get开头的。
那么久会序列化然后被执行。
于是解决方法就是：1、Action中的业务方法前别加get 或者 set（属性的get set 除外）2、用@JSON(serialize=false)指定方法不序列化(2)如:传List<AdminRegionEntity> selectNodes参数的时候需要把参数转化为jsonData然后才能再提交var selectNodes = new Array();var nodes = adminRegionTree.getChecked();Ext.each(nodes, function(node) {// 默认节点被打开了var validFlag = "false";// 如果他不是叶子节点,他下面又没有子节点说明他没有打开if(!node.isLeaf()&&(node.childNodes==null||node.childNod es.length<=0)){validFlag = "true";// 表示没有打开}var fun = {'code' :node.raw.code,// 被选中节点的编码'regionlevel' : node.raw.regionlevel,// 被选中节点的级别'simpleName' : validFlag// 标识是否被展开};selectNodes.push(fun);});// 传递多个参数var array = {'deptId':testMassage[4],selectNodes:selectNodes};Ext.Ajax.request({url : 'saveAdminRegionWithDept.action',jsonData:array,// 把参数转化为jsonsuccess : function(response) {var json = Ext.decode(response.responseText);Ext.MessageBox.alert('提示:','保存成功');},failure : function(response) {var json = Ext.decode(response.responseText);Ext.MessageBox.alert('提示:','保存失败');}});}(3)mybstis中的批量操作,容易出现事务不可以用的情况，如果是小数据量的操作，建议尽量不要用批量操作(4)修改store的参数deliveryAddressStore.on('beforeload',function(store, operation, eOpts){Ext.apply(operation,{params : {"deptId":item.data.id}});});deliveryAddressStore.load({params: { start: 0, limit: 25 }});(5)修改store的url//修改store的url和paramsreceiveAddressStore.on('beforeload',function(store, operation, eOpts){Ext.apply(operation,{params : {"address":customerAddresses}});});receiveAddressStore.getProxy().url = 'getReceiveCustomerAddressByAddress.action';receiveAddressStore.load({params: { start: 0, limit: 25 }});(6)树的展开用expandpath(里面是从根到结尾的id通过'/'连接起来的路径)(7)比如删除和修改之后，马上刷新store 我们通常采用panel.store.load();(8)在做mybatis操作的时候所传入的参数应该和数据库的字段类型一致，不然就会出现"无效的列类型",还有就是插入的数据null也会出现这个情况.(9)数组的循环我们一般用以下方式Ext.Array.forEach(res,function(item){alert(item.get("XXX"))}(10)获取树上所有选中的节点:var array = adminRegionTree.getChecked();(11)在mybatis中如果想传递多个不相关的参数到数据库中去，就应该把他们组装成一个map然后再传一个map进去.(12)把一颗树收缩起来可以用treepanel.collapseAll();但记住要把root的visiable设置为false(13)表格读取本地数组store：用arraystore创建var regionStore = Ext.create('Ext.data.ArrayStore', {fields: [{name: 'fullName'}]});把需要记载的数据拼成二维数组Ext.each(nodes, function(node) {if(node.raw.regionlevel==4){var tempNode = new Array();tempNode.push(node.raw.fullName);//表格对应的是2维数组，所以转换。
ExtJS--学习笔记
GridPanel
從外觀上可分為三大部分:表頭,數據行和分頁欄. 表頭 表頭由Ext.grid.ColumnModelb定義,是 Ext.util.Observable的子類,表頭的每列信息,都存 放在json數據結構中
© 2012 Visualsoft Information System Co., Ltd.
var proxy = new Ext.data.MemoryProxy(data);
© 2012 Visualsoft Iformation System Co., Ltd.
Response.Contenttype(“”)各參數適應環境
text/html网页 text/plainhtml原代码 image/gifGIF圖片 application/mswordword檔 application/x-excelexcel檔 application/ms-powerpointppt檔 application/pdfpdf檔 application/zip.zip檔 …
開發用的調試工具
Spket(spket-1.6.4.1.jar) FireFox (14.0.1)
© 2012 Visualsoft Information System Co., Ltd.
ExtJS將各種表單元素進行了封裝 (from,input,button,radio,select…),對頁面的js 方法做了封裝(alert,confirm,submit…),同時封 裝的還有ajax,css樣式等.
// tree panel var tree = new Ext.tree.TreePanel({ id : 'tree-panel', title : 'menu', collapsible: true, split: true, autoScroll: true, height: '100%', width:200, region : 'west', animate : true, enableDD : true, containerScroll : true, lines : true, border : true, listeners: { dblclick : function(node) { var temp_url = node.attributes.url; var temp_id = node.attributes.id; if (temp_url) { if (center.getItem(temp_id)) { center.setActiveTab(temp_id); } else { var p = new Ext.Panel({ title: node.attributes.text, id: temp_id, autoLoad: {url: temp_url,scripts: true}, closable: true }); center.add(p); center.setActiveTab(p); } } } } });
ExtJS的几个小技巧
ExtJS的几个小技巧一、如何禁用或者启用某个菜单有的时候，有时会根据需要，启用或者禁用某个菜单项，在ExtJS中，可以通过如下的操作进行。
1 Ext.onReady(function() {2 Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';3 Ext.QuickTips.init();4var tb = new Ext.Toolbar({5 applyTo: 'tb',6 width: 4007 });8var styleMenu = new Ext.menu.Menu({9 items: [{10 text: '主题选择',11 id: 'style',12 menu: new Ext.menu.Menu({13 items: [{14 text: '红色主题',15 checked: true,16 group: 'theme'17 }, {18 text: '蓝色主题',19 checked: false,20 group: 'theme'21 }, {22 text: '黑色主题',23 checked: false,24 group: 'theme'25 }]26 })27 }, {28 text: '启用主题',29 checked: true,30 checkHandler: function() { Ext.getCmp('style').set Disabled(!this.checked) }31 }]32 });33 tb.add({ text: '主题', menu: styleMenu });34 });二、如何设置DateField的默认值。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.在项目中使用ext，需要自己整理一下，因为发布包里的内容并非都是必须的，必需内
容至少应包括：ext-all.js、adapter/ext/ext-base.js、bulid/locale/ext-lang-zh_CN.js和整个resource目录。
注意导入顺序。
2.extjs中e是event 主要就是保存event事件信息的参数
el是element 容器的意思，文件物件模型（Document Object Model，简称DOM），3.Ext.onReady()可以保证它里面的内容会在所有的HTML元素都加载完成后才执行，这样就避免了许多家在顺序导致的问题。
4.表格的列信息包括首部显示文本header、列对应的记录集字段dataIndex、列是否可排序sortable、列的渲染函数renderer、宽度width、格式化信息format等。
3.面板必须渲染。
面板示例：
var panel=new Ext.Panel({
id:"myPanel",//标识
renderTo:"divPanel",//在哪个元素中渲染
title:"我的面板",
width:400,
height:300,
frame: false,//如果为true 则panel具有全部阴影，否则只有1px边框//html:"<h1>这是在Panel中的内容...</h1>",
contentEl:'divPanelContent',//此属性可以简写成“el”，显示哪个元素中的内容 draggable:true,//是否允许拖动
collapsible:true,//是否可以折叠
titleCollapse:true,//是否点击整个标题栏都可以收缩
tools:[
{id:"Save",handler:function(){
Ext.Msg.alert("系统提示","保存成功!");
}},
{id:"Help"},
{id:"Close",handler:function(){
Ext.get("divPanel").hide();
}}
],
tbar:[
new Ext.Toolbar.TextItem("工具栏"),
{xtype:"tbfill"},
{pressed:true,text:'添加'},
{xtype:"tbseparator"},
{pressed:true,text:'保存'}
],
bbar:[{text:"这是状态栏"}],
buttons:[{text:"该按钮位于底部！"}]
});
对应的html：
<div id="divPanel"></div>
<div id="divPanelContent">
ExtJs学习，欢迎大家多多交流，共同进步！cmj studio！
</div>
上面基本的配置熟悉都有注释就不再说了，关键一下contentEl、renderTo、draggable。
contentEl：就是panel中要显示的内容，不过它的值是一个html元素的id，例如上面我们就指明为"divPanelContent"，这样panel中就会显示这个层中的内容。
当然如果只是简单的内容的话，我们可以直接使用html这个属性来指明panel内部的内容。
renderTo指的是渲染到哪个元素上，因为对于Ext来说所有的我们看到的控件都是通过基本的html来模拟的，而panel要想显示就必须通过层来模拟，所以从上面你也能够看到我们指定panel渲染到"divPanel"这个Html原色上。
当然对于renderTo这个属性如果我们不配置的话也是可以的，这样的话我们可以在定义好panel之后，通过panel.render("divPanel");来渲染，其实是一样的。
扩展：到这里其实稍微知道Ext的朋友都知道，除了renderTo 、render在Ext中类似的还有applyTo、applyToMarkup。
我们在此就看一下它的区别。
也就是说renderTo对应于其所在元素的父元素，而applyTo对应元素本身。
4.Viewport不需要再指定renderTo，而我们也看到Viewport确实填充了整个浏览器显示区
域，并会随着浏览器显示区域大小的改变而改改。
他有两个特点：
1）创建即可使用。
不需要渲染，当组件在创建时会自动渲染到document.body节点。
2）不能使用程序改变该控件的大小，也没有滚动条。
3）只是作为容器组件，没有额外的属性、方法及事件
3. 窗口相对于面板Ext.Panel来说，他不需要指定渲染目标，也就是不需要指定渲染到页面中的某一个节点。
当调用窗口的show方法的时候，他会自动把窗口渲染(render)到当前文档的body节点中，并使该面板浮动在页面中，使得窗口不依赖于其它的父容器而存在。
窗口同样是由个顶部工具栏(tbar)、一个底部工具栏(bbar)、面板头部(header)、面板尾部(bottom)、面板主区域(body)等五个部分组成，各个部份的内容及管理方式与面板中的完全一样。
4.TabPanel和表格grid都需要渲染。
5. 关于ExtJS在提交表单出现SYNTAX ERROR解决方案
网上找了很多终于发现问题的根源。
返回值的模式必须是这样的模式：{success:true,……},并且必须指定success返回true，才说明ExtJS调用成功,否则ExtJS卡住无法执行;如果没有这行代码即为报”SYNTAX ERROR:)”错.这其实应该算ExtJS的一个BUG吧，个人是这么认为的。
同时返回值中还能有其他参数，如{success:true,msg:’OK’}。