ext学习笔记

1.var paragraph = Ext.get(e.target); paragraph.highlight(); Ext.MessageBox.show({ title: 'Paragraph Clicked', msg: paragraph.dom.innerHTML, width: 400, buttons: Ext.MessageBox.OK, animEl: paragraph });实际上，传入到MessageBox.show的只有一个参数：一个Object literal,包含一组属性和属性值。

在Javascript中，Object Literal是动态的，你可在任何时候用{和}创建一个典型的对象(object)。

其中的字符由一系列的name/value组成的属性，属性的格式是[property name]:[property value]。

在整个Ext中，你将会经常遇到这种语法，因此你应该马上消化并吸收这个知识点！EXT 中文手册 pjq 收集整理 10 2008 使用Object Literal的原因是什么呢？主要的原因是“可伸缩性（flexibility）”的考虑"，随时可新增、删除属性，亦可不管顺序地插入。

而方法不需要改变。

这也是多个参数的情况下，为最终开发者带来不少的方便（本例中的MessageBox.show())。

例如，我们说这儿的foo.action方法，有四个参数，而只有一个是你必须传入的。

本例中，你想像中的代码可能会是这样的foo.action(null, null, null, 'hello').,若果那方法用Object Literal来写，却是这样，foo.action({ param4: 'hello' })，这更易用和易读。

2.编码规范,new 一个新类外层可以不用括号,如items:items: new Ext.TabPanel({border: false, // already wrapped so don't add another borderactiveTab: 1, // second tab initially activetabPosition: 'bottom'})而元素外层需要括号如:items: {html:’aaa’}3.TreePanel问题，首先，TreePanel中，必须有两个属性：root和loadervar root = new Ext.tree.AsyncTreeNode({expanded: true,text: '全部',id: 'all',singleClickExpand: true,children: [{id: 'qixia',text: '栖霞',leaf: false,singleClickExpand: true}, {id: 'xingang',text: '新港',leaf: false,singleClickExpand: true}, {id: 'qita',text: '其他',leaf: false,singleClickExpand: true}]})AsyncTreeNode是带根节点的节点，就是说只要是AsyncTreeNode，都需要定义个一根节点（必须地），如果不想要根节点那就不要用AsyncTreeNode，在给节点添加节点的时候，我们是不需要再在子节点上添加根节点的，所以这时候再用AsyncTreeNode就不适合了，我用的是Array：var childNode = new Array({id: 'zhangsan',text: '张三',leaf: false,singleClickExpand: true});这样，就不存在必须写个根节点的问题了。

Ext学习笔记07-Window及Window中的布局Window复习⼀下，先来构造⼀个Window对象：Js代码1. Ext.onReady(function(){2. var _window=new Ext.Window({3. title:"New Person",4. width:500,5. height:100,6. plain:true,7. items:[8. {}9. ],10. buttons:[11. {text:"OK"},12. {text:"Cancel"}13. ]14. });15. _window.show();16. });Ext.onReady(function(){var _window=new Ext.Window({title:"New Person",width:500,height:100,plain:true,items:[{}],buttons:[{text:"OK"},{text:"Cancel"}]});_window.show();});和Panel很像吧，items:[{}]，如果没有指定defaultType，items中默认就是Panel类型这时Panel的背景是⽩⾊，想要背景⾊和外⾯的Container统⼀，⾸先想到了Plain这个构造参数，但是看API中的Panel定义是没有Plain 的，它提供了另外⼀种⽅式 baseCls ，Js代码1. items:[2. {baseCls:"x-plain"}3. ],items:[{baseCls:"x-plain"}],指定baseCls值为“x-plain”，效果：这样Panel的背景⾊和外部的Container就统⼀了这样⼀个Window对象就构建成功了，但是Window对象⾥⾯什么也没有，往Window⾥⾯加⼀些内容。

ExtJs2.0学习系列(1)--Ext.MessageBox1.Ext.MessageBox.alert()方法有四个参数，为简单起见，主要介绍前面三个参数：alert( title , msg , function(){} )其中title，msg为必选参数，function为可选参数，在关闭弹出窗口后触发。

Ext.MessageBox.alert("title","msg");Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出！")});2.Ext.MessageBox.confirm()方法基本上同alert()方法一模一样。

注意这点：Ext.MessageBox.confirm("title","msg",function(e){alert(e);});这个参数e是什么？它是你点击的弹出框的按钮的值，三种值：yes,no,cancel.Alert()方法也是如此，不过只有两种值：ok，cancel.3.Ext.MessageBox.prompt()方法有六个参数，比前面alert方法多一个返回值和是否多行。

Ext.MessageBox.prompt("title","msg");Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-" +text);});//输入"qianxudetianxia",点击ok按钮，弹出ok-qianxudetianxia Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-" +text);},this,true);//true为多行，this表示作用域4.Ext.MessageBox.show()方法功能很强大，采用config配置形式，比前面的方法使用更方便。

EXT学习文档ext-1.1部分原创/部分整理第一章 EXT入门1.1 Ext简介Ext在最开始的时候，是作为YUI的一个扩展存在的，所以那个时候它的名称是YUI.Ext，后来，Ext作为一个独立的项目进行开发，并不再依赖于YUI。

适合企业级开发，能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。

真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid，有完整地说明文档。

1.2 下载Ext如果你未曾下载过，那应从这里下载最新版本的Ext /downloads。

针对你的下载需求，有几个不同的版本。

通常地，最稳定的版本，是较多人的选择。

最新的版本是Ext2.0，本教程使用ext-1.1版本。

下载解包后，我们可以查阅ext目录下的docs中的文档配合example下是些实例文件进行学习。

在EXT目录中，package目录是ext所有类库文件,在ext-all.js文件中已经包含了该目录下所有的类。

因此我们开发中只需要导入ext-all.js文件即可。

Resources目录下有Ext所需要的图片文件和CSS样式文件。

对于样式文件我们只用到ext-all.css一个文件即可，它包含了所有Ext中样式的定义。

在样式文件夹中还有三个Ext主题样式文细讲到。

1.3 第一个例子我们开始第一个例子，可以帮助你了解Ext的开发。

（1）首先我们建立项目目录，如C:\example1。

（2）在example1目录下建立js和css两个目录，用于存放JS文件和CSS样式文件。

（3）为了节省空间我们只把需要的文件拷贝到项目中：将EXT目录中resources\css\目录下的ext-all.css、xtheme-aero.css、xtheme-gray.css、xtheme-vista.css 文件拷贝到项目中CSS目录下。

将EXT目录中ext-all.js文件和adapter\ext\ext-base.js文件拷贝到项目中JS目录下。

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笔记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’中。

6.Ext.data.Store篇 (11)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篇) (39)17.extJs 2.0学习笔记(Ext.data序论篇) (40)18.extJs 2.0学习笔记(Ext.Panel终结篇) (41)19.extJs 2.0学习笔记(事件注册总结篇) (46)20.extJs 2.0学习笔记(Ext.Panel篇一) (49)21.extJs 2.0学习笔记(Ext.Panel篇二) (51)22.extJs 2.0学习笔记(Ext.Panel篇三) (60)23.extJs 2.0学习笔记(Ext.Panel篇四) (63)24.extJs 2.0学习笔记(组件总论篇) (67)25.extJs 2.0学习笔记(Ext.Element API总结) (70)26.extJs 2.0学习笔记(Element.js篇) (74)27.extJs 2.0学习笔记(DomHelper.js篇) (77)28.extJs 2.0学习笔记(ext.js篇) (78)1. ExtJs 结构树2. 对ExtJs的态度extjs的确是个好东西，但是，它的优点也就是它的缺点：∙加载页面慢∙时间一长，浏览器占内存就会疯长∙服务器端功能极度削弱，除了数据库操作外，几乎所有功能都到了客户端，还得用javascript来写。

∙功能全到了客户端，而客户端语言javascript的编写还是有许多的麻烦，真正精通它的人极少。

蹒跚学步第一步- 入门想必您已经听说过Ext、浏览了，并且尝试阅读。

不过，面对复杂的API文档，您却不知如何下手？！第二步- 起步通览过，并且找到了所要立刻尝试的功能，面对混杂的网页源代码，如何开始一个简单的测试页面？那么…… 不论您的目标是什么，您都可以依照本文快速的开始使用Ext。

不，不用搭建服务器，您所需要的仅仅是。

如果还没有安装，那么现在就是一个好机会。

第三步–配置工作环境Html 的格式设置<html><!-- 每份有效的HTML应符合标准，为此head标签不能少--><head><!-- 下面一行规定了本页面是UTF-8格式编码的。

--><!-- 应一句俗话：“用了UTF-8，走遍天下都不怕”，意思是说UTF是一种囊括了世界多种语言的编码标准，无论客户终端，各平台架构都可放心地使用。

这样，就要统一页面和数据交换的字符本身都是UTF-8的。

--><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!-- Ext自带的样式表，由于脚本中须引用这些样式的定义，所以必须在声明语句的次序上，做到“样式优先”：放在script标签之前。

--><link rel="stylesheet" type="text/css" href="ext/resources/css/"><!-- 接着就是你准备好的CSS样式--><!-- 居最先位置的是适配器（adapter）脚本……--><script type="text/javascript" src="ext/adapter/ext/"></script><!-- ……然后Ext为本身，这足是供调试用debug的版--><script type="text/javascript" src="ext/"></script><!-- 以下是你项目用到脚本--><!-- 设置页面的标题（可不填）--><title id="page-title">Title</title><!-- 之所以引入以下script标签是为了说明在页面程序中的必要性。

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,{……}})()，这是我把概述出来。

入门1.1 Ext 简介下载 Ext如果你未曾下载过，那应从官方网站那里下载最新版本的 Ext /downloads 。

因应各种的下载需求，有几种不同的可选项。

通常地，最稳定的版本，是较多人的选择。

下载解 包后，那个 example 文件夹便是一个探索 Ext 的好地方！开始！下载示例文件IntroToExt2.zip我们将讲讲怎么使用 Ext，来完成一些 JavaScript 常见的任务。

如果你想自己试试，就应该先下IntroToExt2.zip ，用来构建已下面的 Ext 代码。

Zip 包里有三个文件：ExtStart.html, ExtStart.js 和 ExtStart.css。

解包这三个文件到 Ext 的安装 目录中（例如，Ext 是在“C:\code\Ext\v2.0”中，那应该在"v2.0"里面新建目录“tutorial”。

双击 ExtStart.htm，接着你的浏览器打开启动页面，应该会有一条消息告诉你配置已完毕。

如果出现 了 Javascript 错误，请按照页面上的指引操作。

现在在你常用的 IDE 中或文本编辑器中，打开 ExtStart.js 看看。

Ext.onReady(function() { alert("Congratulations! You have Ext configured correctly!"); });Ext.onReady 可能是你接触的第一个也可能是在每个页面都要使用的方法。

这个方法会在 DOM 加载全部完毕后， 保证页面内的所有元素能被 Script 引用 （reference） 之后调用。

你可删除 alert() 那行，加入一些实际用途的代码试试。

Element：Ext 的核心大多数的 JavaScript 操作都需要先获取页面上的某个元素的引用（reference）,好让你来做些实 质性的事情。

1.Ext前台显示页面设计文件结构：WebRoot：app ---common、controller、model、stroe、view、app.jsCss---.cssData----.jsonLib---local、override、resources、ext-all.jsWEB-INF ----conf（配置文件）、lib（jre包）、web.xmlIndex.jsp页面设计：Define相当于创建一个类，creat相当于在类的基础之上创建一个对象Pannel显示的实际页面Model与数据库相对应的一个实例模型Stroe与数据库进行数据通讯Controller页面显示逻辑控制实现Add(),方法在容器组件内添加控件2.前台与后台数据交互页面与后台数据通信的桥梁，是view页面显示中的name属性的值。

与后台定义的成员变量保持一致，否则传值不成功。

前台与后台通信有同步和异步2种方式有session jsonExt.getCmp('jxgrid').getStore().load({params:{id:id}});//传递参数进行store加载Ext.getCmp('processImgBrowser').getStore().getProxy().extraParams = {'lplan.pid': type}; //前台向后台传参，把前台的参数type传递到后台的lplan.pid,其中extraParams是前台后台参数传递的媒介桥梁，type先放在extraParams中在赋值给lplan.pid。

注意：getCamp（）内参数id要与store在同一级：示例me.processPanel = Ext.create('Ext.panel.Panel', {id: 'processPanel',width: '100%',height: 120,autoScroll: true,items: [{id: 'processImgBrowser',xtype: 'imgbrowser',itemId: 'processImgBrowser',store: me.processstore,cls: 'img-chooser-view'}]});3.智能电厂学习总结1>、文件下载window.open('export_download.action?fileName=' + file, '_self'); 在当前窗口打开一个新的窗口如下window.open()的基本语法：window.open(pageURL,name,parameters)其中：pageURL 为子窗口路径name 为子窗口句柄parameters 为窗口参数(各参数用逗号分隔)示例：<SCRIPT><!--window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrol lbars=no, resizable=no,location=no, status=no')//写成一行--></SCRIPT>2>、后台接受前台数据Ext.getCmp('zxtree').getStore().getProxy().extraParams = {'zxTask.type': dbtype}; //把前台数据dbtype通过桥梁extraparams赋值给后台zxTask.type后台使用get方法接受前台页面属性信息时，使用ISO8859-1格式传输，接收道德数据中文乱码，需要转码，转码方法如下：fname = new String(this.getFileName().getBytes("ISO8859-1"),"utf-8"); //把接收到的this.getFileName(),转码为utf-8并赋值给fname。

Ext下载地址：/products/extjs/downloa.phpext4.0参考教程/view/78a2286c25c52cc58bd6bee0.html开发包sdk目录结构：Apdater目录中放置的是extjs的核心代码与基础类库（如jquery和prototype）的适配器，extjs是可以做到动态切换底层库的，关键就在这里了，因为在eVoice中只用到Ext-all.js，后面不对此再做介绍。

负责将里面提供第三方底层库（包括Ext自带的底层库）映射为ext所支持的底层库。

Air目录包含了extjs以air进行改进的库，还有以该代码库实现的任务管理实例；Build目录是extjs压缩后的代码Docs是extjs的文档，其中最重要的是extjs的api，它是extjs开发过程中的法宝Examples目录中时官方的各种演示实例，这里是初学者最好的学习乐园之一，通过对这些演示实例的熟悉，可以很快的掌握extjs的各种组件的基本用法Package中是extjs各种组件的代码库Resource中是extjs要用到的图片文件和样式表文件，extjs引以为傲的漂亮外观基本由这个目录的文件所控制，包括我们调整页面样式也可以通过修改或更换这个目录下的css/图片文件等实现Source同build目录一样，是extjs的源码目录，分门别类的存放着ext各种基础类、工具类、事件/组件模型、各种组件等的源码，该目录存放的源码是未经压缩的，（需要了解某组件的实际实现的方式时，可以阅读，这是帮助我们进一步了解extjs和自己扩展组件或复写extjs方法等的重要途径之一）无压缩源码遵从Less GNU（LGPL）开源的协议Ext-all.js是Extjs的核心库，是开发时必须要引入的压缩后的ext全部源码ext-all-debug.js无压缩的ext全部源码（用于调试）ext-core.js压缩后的ext核心组件，包括sources/core下的所有类Ext-core-debug.js无压缩的ext核心组件，包括sources/core下的所有类搭建项目所需的最少文件包括：ext-all.js、resources、apdater\ext\ext-base.js；此外建议添加ext-lang-zh_CN.js，ext-all-debug；其中ext-all.js及ext-base.js包含了Extjs所有js类例子：hello，world。

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 2.0学习笔记(Ext.Panel篇一)2009-01-19 08:51老实不客气的说：没有Panel，就没有extjs的盛名。

那些最常见的UI组件都是继承自它。

暴爽的东西啊。

我就在想，这么好的东西怎么会出现得这么晚呢？在这一篇中，将详细讲一讲Ext.Panel的方方面面。

现在遇到了一些问题：一、显示的问题事实上，这个问题是所有组件的问题，凡是从ponent继承的类都面临这个问题。

例如，我写了一行这样的代码，但是没有任何结果：var panel=new Ext.Panel({width:300,height:300,title:'标题栏'});这是什么原因呢？if(this.applyTo){this.applyToMarkup(this.applyTo);delete this.applyTo;}else if(this.renderTo){this.render(this.renderTo);delete this.renderTo;}这几行代码是写在ponent的构造函数中的。

它标示如果applyTo、renderTo有值，就会在对象创建的时候直接呈现，如果这两值都没有，那就只能手工调用render函数了。

然而这有一个问题，applyTo与renderTo倒底有什么区别，它们取值类型可以是哪些呢？看代码。

applyTo的情况依赖于this.applyToMarkup来实现呈现。

找到它的代码：applyToMarkup : function(el){this.allowDomMove = false;this.el = Ext.get(el);this.render(this.el.dom.parentNode);}而renderTo的情况是直接依赖于this.render(this.renderTo)的。

这两者的差别很明显了，但是，这个问题到目前还不能说清楚，我发现，Ext.Panel最后生成的代码如下：<div id="panel2" class="x-panel" style="width: 300px;"><div id="ext-gen14" class="x-panel-header x-unselectable"style="-moz-user-select: none; cursor: move;"><span id="ext-gen18" class="x-panel-header-text">这是标题栏</span> </div><div id="ext-gen15" class="x-panel-bwrap"><div id="ext-gen16" class="x-panel-body" style="width: 298px; height: 273px;">这是面板的内容！！！</div></div></div>由上代码可知，panel的代码总是外面一个容器：x-panel，然后里面几个，这儿是：x-panel-header、x-panel-bwrap。