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',
- 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）。