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});这样，就不存在必须写个根节点的问题了。

添加多个节点用Array,单个用Ext.tree.TreeNode。

为什么说loader是TreePanel必须的，因为如果没有loader，子节点就不会显示，这是必须地。

还有在写loader的时候发现个问题，我还是未明白：new 的TreeLoader里面还必须要有个dataUrl，之后dataUrl里面也必须有个文件地址，否则还是不会显示子节点，奇怪的事情发生了，无论那文件地址正确与否或文件内容正确与否，和子节点的显示一点关系都没有，但是这文件地址要写，当个摆设。

囧，我现在还没明白这个loader属性的含义。

var treeLoad = new Ext.tree.TreeLoader({ dataUrl: 'menu.tree.txt' });下面是完整的TreePane 事例：var treeview = new Ext.tree.TreePanel({id: 'treeview',expanded: true,useArrows: true,autoScroll: true,animate: true,enableDD: true,containerScroll: true,border: false,loader: treeLoad,root: root,rootVisible: true,listeners: {click: function(n) {var bar = Ext.getCmp('centerbarchart');var panel = Ext.getCmp('center');if (n.getDepth() == 1 && n.childNodes.length==0) { //是否点击分局，显示分局中所的信息var data = getDataBySubstationId(n.id);if (data != null) {bar.store.loadData(data);panel.setTitle(n.text);n.expand();n.appendChild(departmentNode);}}else if (n.getDepth() == 2 && n.childNodes.length == 0) {var data = getDataByDepartmentId(n.id);if (data != null) {bar.store.loadData(data);panel.setTitle(n.text);n.appendChild(personNode);}}}}});4.ExtJs修改过后有事会报空对象错误和一些认为正确，却任然存在报错现象，这时要清除bin文件夹下的文件了。

5.grid和barchart。

这两个空间都是数据显示空间，数据源可以用store，var store = new Ext.data.JsonStore({fields: ['year', 'comedy', 'action', 'drama', 'thriller'],data: [{ year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000 },{ year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000 },{ year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000 },{ year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller:26940000 }]});6.监听事件的调用a.js视为对象（内部），b.js视为外部1.内部调用外部的事件。

在内部先写好监听click：listeners: {click: function() {this.clicked();}}外部自己的方法clicked：editBtn.clicked = function() {win.show();};*****7.Ext封装对象（必看精华）/// <reference path="../../Scripts/vswd-ext_2.0.2.js"/>/// <reference path="../../Scripts/RichsoftSharedScripts.js"/>RS.TaxRatePayingRecordsType = Ext.extend(Ext.util.Observable, {init: function() {this.Fields = ['Sales', 'City', 'Education'];this.SupposeTaxFields = ['TaxSales'];this.RealTaxFields = ['RealTaxSales'];},ConvertObject: function(source, sFields, target, tFields) {var me = this;for (var i = 0; i < tFields.length; i++) {target[tFields[i]] = me.ConvertToNumber(source[sFields[i]]);}return target;},ConvertSupposeFieldsToCommonObject: function(source, target) {return this.ConvertObject(source, this.SupposeTaxFields, target, this.Fields);},ConvertRealTaxFieldsToCommonObject: function(source, target) {return this.ConvertObject(source, this.RealTaxFields, target, this.Fields);},FillSupposeFieldsFromCommonObject: function(commonObject, target) {return this.ConvertObject(commonObject, this.Fields, target, this.SupposeTaxFields); },FillRealTaxFieldsFromCommonObject: function(commonObject, target) {return this.ConvertObject(commonObject, this.Fields, target, this.RealTaxFields); },ConvertToNumber: function(value) {value = Number(value);if (isNaN(value))value = 0;return value;},GetSubValues: function(a, b) {var result = {};var me = this;for (var i = 0; i < me.Fields.length; i++) {result[me.Fields[i]] = me.ConvertToNumber(a[me.Fields[i]]) -me.ConvertToNumber(b[me.Fields[i]]);}return result;},GetDivValues: function(a, b) {var result = {};var me = this;var temp;for (var i = 0; i < me.Fields.length; i++) {temp = me.ConvertToNumber(b[me.Fields[i]]);if (temp = 0) {result[me.Fields[i]] = 0;}else {result[me.Fields[i]] = me.ConvertToNumber(a[me.Fields[i]]) /me.ConvertToNumber(b[me.Fields[i]]);}}return result;},GetAddValues: function(a, b) {var result = {};var me = this;for (var i = 0; i < me.Fields.length; i++) {result[me.Fields[i]] = me.ConvertToNumber(a[me.Fields[i]]) + me.ConvertToNumber(b[me.Fields[i]]);}return result;},GetMulValues: function(a, b) {var result = {};var me = this;for (var i = 0; i < me.Fields.length; i++) {result[me.Fields[i]] = me.ConvertToNumber(a[me.Fields[i]]) * me.ConvertToNumber(b[me.Fields[i]]);}return result;}});RS.TaxRatePayingRecords = new RS.TaxRatePayingRecordsType();8.ExtJs调试使用监视，监视变量，这是基本，调试JS还需要使用调用栈堆，这个可以查看JS单步运行。