ExtJS学习笔记
ExtJs学习笔记
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});这样，就不存在必须写个根节点的问题了。
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源码笔记------Ext.js
ExtJs源码笔记------Ext.jsExtJs 源码笔记------Ext.js最近准备系统的学习⼀下Ext的源码，SO,话不多说，从第⼀篇开始。
⾸先，先看⼀下Ext.js这个⽂件的代码结构：var Ext = Ext || {}; // 定义全局变量Ext._startTime = new Date().getTime();(function(){// 定义⼀些局部变量var ......// 核⼼Ext.apply = function(){......};// 初始化 Ext 的⼀些属性函数Ext.apply(Ext, {......});}());// 全局闭包Ext.globalEval = ......代码的结构不难，但是仔细看下来，有些细节的地⽅还是很值得回味⼀番。
下⾯具体分析⼀下我对源码的理解，⽔平有限，不⾜之处还望各位看官指正。
1. 定义局部变量var global = this,objectPrototype = Object.prototype,toString = objectPrototype.toString,enumerables = true,enumerablesTest = {toString: 1},emptyFn = function () {},......for (i in enumerablesTest) {enumerables = null;}// 看到这⾥的时候，有点疑惑，enumerables 不是肯定会被置为 null 吗// 下⾯为什么还需要判断enunerables? 有蹊跷.....// 返回去再看⼀下 enumerablesTest，⾥⾯只有⼀个属性 toString, 为啥偏偏是这样的⼀个属性？？嗯！想起来了，在IE6下，对象中的toString属性，不能通过hasOwnProperty或for...in迭代得到// So，这⾥其实就是为了兼容IE6⽤的。
学习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学习笔记
蹒跚学步第一步- 入门想必您已经听说过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篇）
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笔记
<script type="text/javascript"> Ext.onReady(function() {
new Ext.Panel({ renderTo:Ext.getBody(),
}) </script>
代码实例二： <script type="text/javascript"> Ext.onReady(function() {
new Ext.Button({ renderTo:Ext.getBody(), text:"确定"， minWidth:100
})
}) </script> 属性：
tag:"div", cls:"contain",//class，选择样式名字 cn:[{//子节点
tag:"div", cls:"center", }] },true).child("div")); }) //在 body 对象中添加 div，并且 class 为“contain”的 css。cn 为子节点 }) </script>
--renderTo:将当前对象所生成的 HTML 对象存放进指定对象中去。
由 Ext.Button 产生的引申话题
@属性： --renderTo:将当前对象所产生的 HTML 对象放进指定对象中。
比如：新建个 Button 所生成的 html 对象，应该存在 body 里面，也就是说 body 在这里充
ExtJS6.0学习笔记(2)——登录系统示例
onItemSelected: function (sender, record) { Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
onConfirm: function (choice) { if (choice === 'yes') { // }
10. 登录系统示例运行效果如下 登录界面，任意输入用户名和密码即可
登录后界面跳转到主页面
点击“Logout”按钮登出系统，又回到了登录界面 本文参考官方教程“Building a Login System”编写，官方教程访问地址如下： /extjs/6.0/getting_started/login_app.html
xtype: loggedIn ? 'app-main' : 'login' }); },
onAppUpdate: function () { Ext.Msg.confirm('Application Update', 'This application has an update, reload?', function (choice) { if (choice === 'yes') { window.location.reload(); } } );
} });
5. 打开 LoginController.js 文件，录入如下代码 Ext.define('yaonotes.view.login.LoginController', {
extend: 'Ext.app.ViewController', alias: 'controller.login',
ExtJs学习笔记
ExtJs学习笔记目录1.ExtJs 结构树 (2)2.对ExtJs的态度 (3)3.Ext.form概述 (4)4.Ext.TabPanel篇 (5)5.Function扩展篇 (7)6.Ext.data.Store篇 (10)7.Ext.data.JsonReader篇一 (12)8.Ext.data.JsonReader篇二 (15)9.Ext.data.HttpProxy篇 (19)10.Ext.data.Connection篇一 (20)11.Ext.data.Connection篇二 (24)12.Ext.Updater篇一 (26)13.Ext.Updater篇二 (27)14.JSON序列化篇 (33)15.通信篇 (35)16.extJs 2.0学习笔记(Ajax篇) (38)17.extJs 2.0学习笔记(Ext.data序论篇) (39)18.extJs 2.0学习笔记(Ext.Panel终结篇) (40)19.extJs 2.0学习笔记(事件注册总结篇) (45)20.extJs 2.0学习笔记(Ext.Panel篇一) (48)21.extJs 2.0学习笔记(Ext.Panel篇二) (50)22.extJs 2.0学习笔记(Ext.Panel篇三) (59)23.extJs 2.0学习笔记(Ext.Panel篇四) (62)24.extJs 2.0学习笔记(组件总论篇) (66)25.extJs 2.0学习笔记(Ext.Element API总结) (69)26.extJs 2.0学习笔记(Element.js篇) (73)27.extJs 2.0学习笔记(DomHelper.js篇) (76)28.extJs 2.0学习笔记(ext.js篇) (77)1. ExtJs 结构树2. 对ExtJs的态度extjs的确是个好东西，但是，它的优点也就是它的缺点：∙加载页面慢∙时间一长，浏览器占内存就会疯长∙服务器端功能极度削弱，除了数据库操作外，几乎所有功能都到了客户端，还得用javascript来写。
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实现了常见的提示框功能。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
蹒跚学步第一步- 入门想必您已经听说过Ext、浏览了在线演示，并且尝试阅读API文档。
不过，面对复杂的API文档，您却不知如何下手？！第二步- 起步通览过API文档，并且找到了所要立刻尝试的功能，面对混杂的网页源代码，如何开始一个简单的测试页面？那么……不论您的目标是什么，您都可以依照本文快速的开始使用Ext。
不，不用搭建服务器，您所需要的仅仅是Firefox浏览器和Firebug调试插件。
如果还没有安装，那么现在就是一个好机会。
第三步–配置工作环境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/ext-all.css"><!-- 接着就是你准备好的CSS样式--><!-- 居最先位置的是适配器（adapter）脚本……--><script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script><!-- ……然后Ext为本身，这足是供调试用debug的版--><script type="text/javascript" src="ext/ext-all-debug.js"></script><!-- 以下是你项目用到脚本--><!-- 设置页面的标题（可不填）--><title id="page-title">Title</title><!-- 之所以引入以下script标签是为了说明Ext.onReady在页面程序中的必要性。
不过你可以在外围的脚本文件中包含它，那么这里就可以不重复了--><script type="text/javascript">// 修改该空白背景图的路径，指向你服务端一个有效的图片路径。
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';// 程序总入口Ext.onReady(function() {// 调用程序吧！});</script><!-- 关闭head标签--></head><!-- 大多数情况body 为空的，这点与普通页面的body很不同。
--><body></body><!-- 最后关闭的html标签--></html>项目目录结构（Eclipse下）- build- src- WebRoot- css- images- js- WEB-INF步骤1. Create a Dynamic Web Project in Eclipse.2. Create the folders "css", "images", "js" and "examples" as shown above.3. Copy "examples.css" and "ext-all.css" to css folder.4. Copy the images directory from <<ext installation>>\resources folder.5. Copy "ext-all.js" and "ext-base.js" into the js folder.6. Create your own html page under examples directory based on the template html file.JS调试环境1、准备好FireFox浏览器装好Firebug插件2、单击F12 打开Firebug 控制台。
如果您的firebug 控制台处于单行模式（以'>>>' 开头），那么请单击右下角的红色上箭头以开启多行编辑模式。
输入以下代码，并敲击Ctrl-Enter 来运行:Ext.get(document.body).update('<div id="test"></div>');上边这行代码的作用是将当前DOM body元素用一个ID为test的div元素替换。
刚才那些API文档已经被删除，但Ext 代码依旧生效，并且随时为您效劳。
3、现在，我们假设您希望简单的添加一个面板元素（Panel），但对Ext.Panel的API冗繁的说明无能为力。
那么试着将这些代码添加到firebug 的控制台中：Ext.get(document.body).update('<div id="test"></div>');new Ext.Panel({renderTo: 'test',width: '200px',title: 'My Title',html: 'My HTML content'});再次敲击Ctrl-Enter 。
嗨！您的面板元素已经诞生。
很好，不过如果修改一些选项呢？用下边的代码替换刚才的那些代码：Ext.get(document.body).update('<div id="test"></div>');new Ext.Panel({renderTo: 'test',width: '200px',title: 'My Title',html: 'My HTML content',collapsible: true});敲击Ctrl-Enter 。
怎么样，一个可以伸缩的面板就配置好了。
（注意面板右上角的小图标）每次敲击Ctrl-Enter ，第一行代码都会移除现有的内容，这样您就可以有一个干净的调试环境。
这是一个简单的小技巧，十分方便您尝试各种配置选项。
您可以为update()函数添加所需要的HTML 代码，无论多少。
然后编写或多或少的Javascript 来探索Ext API。
还等什么？现在就去亲自实践Ext Api 吧。
在ExtJS中使用Ext.extend()函数实现继承功能：var SubClass = function() {SubClass.superclass.constructor.call(this);};Ext.extend(SubClass, BaseClass, {newMethod : function() {},overriddenMethod : function() {}};注册xtype以便延迟初始化Ext.reg(xtpye, SubClass);Extjs中initComponent 替换constructor，写法如下：// 用initComponent 替换constructor:SubClass = Ext.extend(BaseClass, {//配置项在这里这里的配置项也可以是子类特有的属性Id：“something”，.... : ........... ,initComponent : function(){//子类的初始化比如This.items[{}]；//......// 调用父类的initComponentExt.Container.superclass.initComponent.call(this);this.addEvents({// 添加事件});},//这里配置方法fun() : function(){.............}}注册xtype以便延迟初始化Ext.reg(xtpye, SubClass);Ext.extend()函数提供了直接访问父类构造函数的途径，通过SubClass.superclass.constructor.call(this);就可以直接调用父类的构造函数，这个函数的第一个参数总是this，以确保父类的构造函数在子类的作用域里工作。
如果父类的构造函数需要传入参数，可以讲所需的参数直接传递给它：SubClass.superclass.constructor.call(this,config);这样就得到了一个继承了父类的所有属性和函数的子类。
Ext.apply函数的作用是将一个对象中的所有属性都复制到另一个对象中。
Ext.applyIf与Ext.apply的作用类似，区别在于如果某个属性在目标对象中已经存在，则Ext.applyIf不会将它覆盖。
在上面的代码中，SubClass继承自BaseClass，添加了新的方法newMethod，重写了overriddenMethod方法。
Tutorial:Introduction to Ext 2.0 (Chinese)无论你是Ext库的新手，抑或是想了解Ext的人，本篇文章的内容都适合你。
本文将简单地介绍Ext 的几个基本概念，和如何快速地做出一个动态的页面并运行起来，假设读者已具备了一些JavaScript经验和简单了解HTML的文档对象模型（document object model ，DOM）。