IT博客-我心飞扬-文章分类-ExtJS Home

Ext设计模式

Monicax — Thu, 22 Oct 2009 17:59:00 GMT

1、组件是一次加载完毕好呢？还是第一次使用时再加载？

2、组件中各个成分分开定义好，还是合在一起定义？(getCmp()可以通过id获取组件?这个id在整个应用中都需要唯一吗?)
定义成一个有机整体，有很多匿名组件?

Monicax 2009-10-23 01:59 发表评论

ExtJS Pitfalls

Monicax — Thu, 22 Oct 2009 05:24:00 GMT

1、同一个函数中(不是引用对象中的成员)，变量声明是有顺序的，必须先声明再使用，声明了TextField和FormPanel，在Window之后，但是Window中已经引用了那个变量(在开头处，formPanel为undefined，所以最终的窗口中没有显示FormPanel。。。这种小问题很耗时间)

2、一个弹出window，为什么第一次打开还可以，第二次打开就出错了呢?
是某个值没有初始化好? (问题找到了，window关闭的默认操作时close，会把整个元素从DOM树中删除。所以第二次打开，会报错，因为那个applyTo的

标签)，把applyTo删除了就行了。每次调用，会对整个窗口组件进行重新初始化。。。

放在函数中的窗口，每次初始化，如果设置为closeAction: 'hide'，函数调用后，不会销毁对象，而下次打开又将创建新的对象。。。 会造成资源浪费，类似于内存泄露。。。 (这种性能方面的考虑是体现技术水准的细节:)

Monicax 2009-10-22 13:24 发表评论

Ext排版

Monicax — Wed, 21 Oct 2009 18:56:00 GMT

1、使用不同的排版，有时候显示出来的结果是完全不同的。
如在FormPanel中放了很多表单控件，显示都没有问题，是自上而下地排布，设置好宽度就行了。
之后加了一个Panel，里面放置两个GridPanel，如果最外层Panel设置板式为 'fit'，则里面的GridPanel会尽量占满空间?

2、Panel中排版不用设定排版对象(这是对对象内部属性的设定了)，这里直接声明属性就可以了。
  layout : {
   type : 'hbox',
   padding : 40
}

Monicax 2009-10-22 02:56 发表评论

Ext Panel

Monicax — Wed, 21 Oct 2009 11:28:00 GMT

1、GridPanel和FormPanel有什么关系，各自的使用场合。在什么场合用GridPanel合适，在什么场合和FormPanel合适? 这些都是值得考虑的地方。
它们的父类都是Panel。
还可以进行更多的比较吗?
图片列表，用GridPanel更合适吗?

2、给window加autoHeight属性true，则window可以自适应内部容器的变化?
但是不是可以手动拉大窗口?

Monicax 2009-10-21 19:28 发表评论

Ext模板

Monicax — Tue, 20 Oct 2009 17:50:00 GMT

呵呵，原来子模板的概念就是这里来的啊。

Monicax 2009-10-21 01:50 发表评论

Ext消息框

Monicax — Tue, 20 Oct 2009 14:53:00 GMT

confirm使用的是options对象，show : function(options)。也可以对confirm进行简单封装，也可以通过alert的形式加以调用。
alert则是直接使用一层的参数，alert : function(title, msg, fn, scope)。

Monicax 2009-10-20 22:53 发表评论

JS Concept

Monicax — Tue, 20 Oct 2009 13:21:00 GMT

1、JavaScript中所有的东西基本上都是function?那些所谓的类，实际上定义时用的关键词是function，而不是class。

Monicax 2009-10-20 21:21 发表评论

ExtJS Steps

Monicax — Tue, 20 Oct 2009 11:26:00 GMT

1、开始从数据模型这块切入，显示用模拟数据，很快可以直接切入数据库操作。和之前的SSH，或etmvc都串联起来。
2、Ext最小化配置，如果只用到Ext的部分控件，或者空间有限，可以最少程度地载入Ext代码。即只载入必要的代码，如何操作呢?
Grid奇偶行使用不同的颜色显示，如何操作呢?
3、设置失效属性是disabled，而不是disable。
4、TreePanel需要设置SelectionModel，如果不设置则是Ext.tree.DefaultSelectionModel，也可以设置为Ext.tree.MultiSelectionModel。
通过TreeSelectionModel.js找到这两个类的。。。
这里的Node数组自定义有checked选项，才会显示复选框，不是控件自身提供的，所以需要自己写代码对动作进行处理?
复选框的事件选中处理也需要自己实现了。。。
checkechange监听写了，但就是没用，原来多写了一个字符。。。

Monicax 2009-10-20 19:26 发表评论

存储对象

Monicax — Tue, 20 Oct 2009 09:53:00 GMT

1、ComboBox的数据要放在存储对象之中，有多种存储对象，这里使用比较简单的那种，即ArrayStore。它居然也要定义fields，相当于是定义数组的格式，如三维数组:)，它的数据有一个域，名称是data（实际对应于一个Array对象?可以往Array对象里放很多其他对象?而对象的域则在ArrayStore的field里面声明过了。。。这样就可以读取到数据了）。在ComboBox引用的变量名则是store。

2、JsonStore里面有个url属性，可以通过load方法，使用HTTP直接访问远程的数据?
也可以对应于一个JsonReader和一个HttpProxy?

3、Ext3.0.0中的ArrayStore即原来的SimpleStore? 一些后向兼容性的东西。。。
Ext.data.SimpleStore = Ext.data.ArrayStore;

Advanced
1、可以看下ArrayStore的实现，里面用到了不少高级JS技术，但是代码却很短。

2、同一个Store不能同时放到两个FormPanel的items中。如果两个FormPanel需要同样的Store怎么办，声明两个完全一样的Store?要写很多重复代码?

Monicax 2009-10-20 17:53 发表评论

ExtJS表单

Monicax — Tue, 20 Oct 2009 05:09:00 GMT

表单是HTML中最基本的概念之一。
1、Ext中的下拉框也是一种表单控件，其背后对应着一个store。里面存放着下拉框的具体选项。可以是任何Ext.data.Store的子类。JS的继承通过prototype实现，和具体的JS引擎实现相关。
ComboBox是一个很简单的类，但是在Ext的例子说明中却占用了不少的篇幅。可见是一个很有用的控件。
此外，在EditGridPanel中也可以用到这个控件的。
配置选项：triggerAction,点击下拉操作时调用的方法，这里选择all，是调用查询操作。如果不设定这个选项，只能选一次，再次只能看到一个选项了。

Monicax 2009-10-20 13:09 发表评论

表达式语言EL

Monicax — Sun, 23 Aug 2009 08:56:00 GMT

JavaScript中，Java中都有表达式语言。
Struts中的表达式语言 ognl是一种很强大的语言，可以获得对象的属性，请求中的参数等。
JSTL， JSF Tab Language也具有这种能力。

对于表达式语言，可以做一个全面的调查。
CSS的expression语句也支持计算功能。有人用CSS实现了在IE6上显示IE7的风格。
CSS的expression语句，使用的是 JavaScript的语法。
不过这个可能是IE的扩展，Firefox并不支持?

三种基本的逻辑结构：顺序、条件和循环结构。

Monicax 2009-08-23 16:56 发表评论

Ext组件

Monicax — Sat, 22 Aug 2009 13:04:00 GMT

Ext组件
Component是所有组件的基类。
所有Component的子类都可以参与 Ext的标准生命周期，如组件的创建、渲染和销毁。

它们有 hide/show 和 enable/disable 等基本行为的自动化支持。
Component允许子类 lazy-render到任何 Container中，或者注册到 ComponentMgr中，这样就可以在任何时候通过Ext.getCmp来获得对组件的引用

每个组件都有特定的 xtype。

xtype            Class
-------------    ------------------
box              Ext.BoxComponent
button           Ext.Button
colorpalette     Ext.ColorPalette
component        Ext.Component
container        Ext.Container
cycle            Ext.CycleButton
dataview         Ext.DataView
datepicker       Ext.DatePicker
editor           Ext.Editor
editorgrid       Ext.grid.EditorGridPanel
grid             Ext.grid.GridPanel
paging           Ext.PagingToolbar
panel            Ext.Panel
progress         Ext.ProgressBar
propertygrid     Ext.grid.PropertyGrid
slider           Ext.Slider
splitbutton      Ext.SplitButton
statusbar        Ext.StatusBar
tabpanel         Ext.TabPanel
treepanel        Ext.tree.TreePanel
viewport         Ext.Viewport
window           Ext.Window

Toolbar components
---------------------------------------
toolbar          Ext.Toolbar
tbbutton         Ext.Toolbar.Button
tbfill           Ext.Toolbar.Fill
tbitem           Ext.Toolbar.Item
tbseparator      Ext.Toolbar.Separator
tbspacer         Ext.Toolbar.Spacer
tbsplit          Ext.Toolbar.SplitButton
tbtext           Ext.Toolbar.TextItem

Form components
---------------------------------------
form             Ext.FormPanel
checkbox         Ext.form.Checkbox
combo            Ext.form.ComboBox
datefield        Ext.form.DateField
field            Ext.form.Field
fieldset         Ext.form.FieldSet
hidden           Ext.form.Hidden
htmleditor       Ext.form.HtmlEditor
label            Ext.form.Label
numberfield      Ext.form.NumberField
radio            Ext.form.Radio
textarea         Ext.form.TextArea
textfield        Ext.form.TextField
timefield        Ext.form.TimeField
trigger          Ext.form.TriggerField
按上面的描述来看组件主要分为3类：1、大类组件；2、工具栏组件；3、表单组件

Component.js中，有下面一段代码：config = {applyTo: config, id: config.id || config}; //

其实不是把前面两个属性加入到后面的对象中。

整个ExtJs的代码也就37060行。
从ext-all-debug.js中可以看到这一点(debug版本的排版还可以，ext-all.js就没法看了，是为了缩小文件大小，把所有缩进都取消的版本，适合于机器阅读。)
整个文件，涉及到addEvents的地方总共57处，包括addEvents定义的地方。
可见addEvents使用，也是非常的慎重，只在必要的时候用到。

addEvents函数的定义如下(可以直接在ext-all-debug.js中找)
    addEvents : function(o){
        if(!this.events){   // 检验调用对象是否有events属性，如果没有则创建events属性，当然一开始这个属性是空的
            this.events = {};
        }
        if(typeof o == 'string'){
            // 那些属性都是设置好的吗? 如果arguments中声明的量是false，则设置为true。 arguments和o有什么关系?
            for(var i = 0, a = arguments, v; v = a[i]; i++){ // 这个arguments参数是从哪里传过来的?
                if(!this.events[a[i]]){
                    this.events[a[i]] = true;
                }
            }
        }else{ // 如果o不是字符类型，则把o中的属性拷贝到events属性中(这里是events属性中没有的东西才会拷贝过来，也就是说不会有事件覆盖?)
            Ext.applyIf(this.events, o);
        }
    }

Monicax 2009-08-22 21:04 发表评论

Ext便条

Monicax — Sat, 22 Aug 2009 12:14:00 GMT

ExtJS的分页功能需要后台服务器的支持才可以实现。

Monicax 2009-08-22 20:14 发表评论

Ext对话框

Monicax — Fri, 21 Aug 2009 15:21:00 GMT

居然可以在对话框里直接插入图片。强大的。
还可以直接把链接放在里面的。。。

不过是把图片放在链接里面的。
xx

显示了红色的字和图片(图片上有跳转地址)

Monicax 2009-08-21 23:21 发表评论

函数式语言

Monicax — Thu, 20 Aug 2009 17:43:00 GMT

函数式语言要求做到，函数内的运算对函数外无副作用。但是事实上JavaScript没能做到这一点。它允许在函数内部引用和修改全局变量，甚至可以声明全局变量。除此之外，JS也允许在函数内修改对象和数组的成员，这使得函数并不是仅仅通过它的返回值来影响系统。这些其实是破坏它的函数式特性的。

可见Js并不是一种纯粹的函数式语言。这样的设计有好处和弊病吗? 更灵活了，但是稳定性会有下降?

JavaScript的函数仍然是有副作用的。
函数式语言中的函数，和我们平常说的函数有些不同(不同于普通语言，如C、Pascal中所谓的函数)，它们通常是指源于 lamda演算而实现的函数。
已经证明，λ演算的计算能力和图灵机是等价的。

现有JS引擎实现，都不支持尾递归，这种机制可以使用函数来完成大量的递归而不影响效率。
如果用递归函数来完成一些循环， 会消耗很多的栈，以用于保存上下文和中间值。会造成很大的性能损耗。 对函数调用的栈也有了更深入的理解
一些函数式语言，都已经实现了尾递归，和相应的优化机制。它们只在函数的最后语句完成一次跳转，不用保存中间变量，不会造成栈溢出的问题。 Erlang就是支持这种机制的。

Monicax 2009-08-21 01:43 发表评论

JS基础1_eval_apply_call

Monicax — Thu, 20 Aug 2009 12:56:00 GMT

eval可以把字符串当成语句来执行。

写在按钮中的函数:
     var textValue = textfield1_win.getValue();
     if (textValue == '') {
      textValue = 'no Value';
     }
    var funcString = 'alert(\'' + textValue + '\')'; // 前面可以加var，也可以不使用var, 如果有全局变量，而又没有使用var,则会使用全局的funcString，如果没有全局变量funcString,即使没有var,也会自动创建 funcString变量，作用域，为这个括号之内。变量的生命周期如何维护的? ：先查找全局变量表，看是否有这个变量，如果有，直接使用全局变量？，如果没有，则创建新对象，并声明这个对象为局部变量? 或者根本不用声明，函数调用好之后，直接释放这个变量。连函数调用的栈都被释放了，哪里来的变量，呵呵
    eval(funcString);

允许eval使用全局闭包并不是一个好主意。因为从函数闭包的概念来说，不应当让eval()对函数之外产生副作用。

代码总是要运行在一定的闭包之中的。有两类闭包，分别是全局闭包和函数闭包。

写一个面板，把和JS相关的操作通过按钮集中到一块儿。
这些代码最好是分割到几个不同的js脚本中间，这样比较容易管理。

Monicax 2009-08-20 20:56 发表评论

Ext鸟瞰

Monicax — Tue, 18 Aug 2009 18:22:00 GMT

ComboBox居然支持分页，真是长眼了

Monicax 2009-08-19 02:22 发表评论

JS原型继承

Monicax — Sun, 16 Aug 2009 12:47:00 GMT

对象系统有三种实现方式：
1、基于类(class-based)
2、基于原型(prototype-based)
3、基于元类(metaclass-based)

后两种并不是很熟悉哦，ruby是基于元类的实现吗?
原型继承是JavaScript最重要的语言特性之一。

JS没有类的概念，它使用构造器机制实现类的某些功用。

原型继承是 JS 对象系统中最关键的元素。以后如果有机会深入探究，各种对象系统，其实现应该都是有相通之处的吧。

对象的继承机制中，用到了原型链。查找对象元素，可能要用到回溯。
SpiderMonkey还实现了复杂的对象成员性质管理，即可见性，公有、私有等属性的管理。(这个真的很复杂吗?)
一个对象重写了父类的对象后，这个方法就标记为可delete了，同时在对象的属性列表中会保存父类中该成员的信息，如果删除子类中该属性之后，将重新使用父类的值与性质。

刚才编辑的东西怎么没有了? 每次发布之前，要先保存下才稳妥啊。。。

ExtJS对JavaScript几个基本类的扩展都写在Ext.js里面了。
如下是对Function对象的扩展：
Ext.apply(Function.prototype,{
    createCallback : function(){...},
    createDelegate : function(obj, args, appendArgs){...},
    defer : function(millis, obj, args, appendArgs){...},
    createSequence : function(fcn, scope){...},
    createInterceptor : function(fcn, scope){...}
}); // 扩展Function类的原型后，所有的函数都具有扩展的属性了? Ext.apply在Ext Element中已经引用到，不过有个default参数，可以把配置对象里的所有属性拷贝到目标对象中。不过直接的 Ext.apply有定义吗?或者 JavaScript本身便支持这种语法?

Ext.js中有一个很长的语句， (function(){.... // 这里面定义了很多东西，大约有700多行})，最外面的是强制执行标识吗?这个可以测试下的。

Monicax 2009-08-16 20:47 发表评论

Ext的JS扩展

Monicax — Sat, 15 Aug 2009 14:27:00 GMT

Ext对JavaScript的几个基本类进行了扩展。
它们是 Function, String, Array, Date和Number.

Function加入了回调、拦截和代理机制等。
为什么要加入这些机制呢，使用起来的时候方便些吗?

createCallback()，可以为原来的函数创建回调函数。
把参数传进去。
var sayHello = function(name) {...}
一些 handler函数，必须是无参函数吗? 使用 sayHello.createCallback('jack')，就会创建一个新的函数对象。这个对象的定义形式应该是：
function() {
    sayHello('jack');
} // 就是这种所谓的回调机制吗?
(没有传参数的话，把函数引用放到 handler 后面就可以了。如果要传参数，在handler后直接放func(args)，则解析后函数会马上调用，而不是事件触发时才调用的回调函数了。。。。所以如果传参一定要用createCallback()方法，为什么一定要如此,JS语法的局限性?)

    createCallback : function(/*args...*/){   // createCallback函数也开始变得容易理解了。
        // make args available, in function below
        var args = arguments;
        var method = this;                           // Ext中，已经对Function进行扩展，所以所有的函数对象都可以使用 createCallback()方法创建回调函数?
        return function() {                            // 最后返回的确实是一个函数对象。只不过把参数绑定到被回调的函数了。
            return method.apply(window, args);    // 为什么限定的范围是window，window貌似在JS起很重要的作用，在多个地方看到了。 href转向的时候也要用到这个的。还有JS本身的apply机制，这些底层机制都是有必要了解的。
        };
    }

对这几个类的扩展，完全在Ext.js这个文件中体现出来了。对 Function的扩展结构如下所示：
Ext.apply(Function.prototype, {
    createCallback: function() { ...},
    createDelegate: function(obj, args, appendArgs) { ...},
    defer: function(millis, obj, args, appendArgs) {...},
    createSequence: function(fcn, scope) {...},
    createInterceptor: function(fcn, scope) {...}
}) // 很多加入的函数也是有参数的。 Ext.apply在这里就是把函数加到 Function的原型中去吗? 这样所有函数都具备了以下的几个扩展方法?
Ext.apply和 JavaScript本身的apply有什么关系?

(function() {
  alert('immediate');
})(); // 这种代码风格是强制执行用的? Ext.js中，就把一些扩展代码写在这种代码段中。原以为只要把函数包在()中就可以，居然还要在末尾加上()

Ext.apply(Ext, { ... }) // Ext扩展，可以直接用 { ... }声明一个很大的对象，来扩展Ext? apply 三个参数的函数Ext.js里面有定义，两个参数的没有见到。

Monicax 2009-08-15 22:27 发表评论

Javascript基础

Monicax — Thu, 13 Aug 2009 14:38:00 GMT

navigator.userAgent.toLowerCase()可以显示浏览器的具体信息：在IE 7中打开，显示的具体信息如下：
mozilla/4.0 (compatible: msie 7.0; windows nt 5.1; .net clr 1.1.4322; .net clr 2.0.50727; ciba; infopath.2)

Ext.js中有一段代码就是用来判断浏览器类型的。实际上是通过字符串匹配来完成的。

window.location.href.indexof('https')用来判定当前访问网址是否是安全链接。

可以直接声明一堆的变量，声明的形式如下：
var x=..., y=..., z=...; 看起来和C没有什么区别。

如果是IE或者IE7，取消CSS的图片闪烁功能?
document.execCommand("BackgroundImageCache", false, true);

Ext.js中，出现了一段莫名其妙的代码:
(function() {
... 有将近700行代码。这个代码如何引用呢?
})

Monicax 2009-08-13 22:38 发表评论

Ext Element

Monicax — Thu, 13 Aug 2009 12:49:00 GMT

Element是Ext的核心。是整个Ext API的底层。
Element中的方法直接涉及 JavaScript的document.getElementById()操作。
Element有Cache机制，对于访问过的对象，它可以直接返回DOM对象。

    if(forceNew !== true && id && Ext.Element.cache[id]){ // element object already exists
        return Ext.Element.cache[id];
    }

只有当存在id，且没有设置一定要创建新对象，同时缓存中有这个对象时，才直接返回缓存中的对象。
这里的缓存即 Ext.Element.cache对象? 这是一种哈希机制吗?
Ext.apply = function(o, c, defaults){
    if(defaults){
        // no "this" reference for friendly out of scope calls
        Ext.apply(o, defaults); // 这个函数哪里定义的?
    }
    if(o && c && typeof c == 'object'){
        for(var p in c){
            o[p] = c[p];
        }
    }
    return o;
}; // 这个是Ext.js中的代码，是用于扩展一个对象的吧。。。
可以把配置对象的所有属性拷贝到目标对象中。

Ext刚开始居然只有一个属性，牛的：
Ext = {version: '2.2.1'};

Monicax 2009-08-13 20:49 发表评论

Ext思考

Monicax — Wed, 12 Aug 2009 18:15:00 GMT

纯粹是研究是没有出路的：1、没有时间。2、没有真正的驱动力。现实需求是最好的驱动力。记录一些问题。之后可以去探究。

1、TextField中的reset和this.setValue("")有区别吗? 可以看源代码。

Monicax 2009-08-13 02:15 发表评论

Ext实践

Monicax — Wed, 12 Aug 2009 18:12:00 GMT

方案A:
1、所谓id，是最后生成Ext代码中，对象的名称，而不是Ext对象中所谓的id.重名就会导致对象重复，若定义在同一个定义域中，JS应该是会报错的。

Monicax 2009-08-13 02:12 发表评论

Ext正则表达式

Monicax — Wed, 12 Aug 2009 14:51:00 GMT

.replace(/(^\s+) | (\s+$)/g,"") 用于消除字符串开头和结尾的空格。必须加/g选项，用于贪婪匹配，而不会在第一次匹配后，就结束。
这里会匹配开头的所有空格，而不只是第一个空格。

Monicax 2009-08-12 22:51 发表评论

Ext入门1

Monicax — Wed, 12 Aug 2009 13:48:00 GMT

博客对我而言，第一个是速度，第二点才是功能。
速度不行。思路就无法正常发挥，短短续续，十分难受。

直接在HTML中调用JS代码。

这里使用的组件是ComboBox。末尾的一句话最为关键：

combox.render("hello"); 这里的hello是一个div标签。在HTML中的描述为：

对div标签，是还有必要深入的。
TextField使用keyup事件，必须开启enableKeyEvents

也可以调用 hide()操作，调用之后，文本框就自动隐藏了。

window组件必须要设置applyTo属性?表示 window所对应的 div标签：
如applyTo:'L_window'，直接使用render(...)不能生效?
window的layout 属性，如果设置为 fit，则会用背景色对窗口进行填充?
layout设置为border，页面居然报错，现实异常被抛出，且未能被接住。

设置了modal属性之后，本window就强制放在最前端，不能激活后面的窗口，除非先关闭当前窗口。这些是怎么做到的?实现机制如何?和MFC中的窗口机制有类似之处啊。。。
设置了resizable为false, maximizable为true之后，窗口的大小不可以随意拖动改变。但是可以最大化。

所有这一切都是通过往 div进行操作来完成的吗? div中可以放HTML，而这一切在JS引擎的控制及协调下完成?

Button, Window都直接放在Ext 命名空间下，从结构上就可以看出， Ext是一个 UI 层的框架。

Ext.Msg.alert 有两个参数，如果显示看起来很怪异，很可能是因为只设置了一个参数，一个标题过长，所导致的结果。

iconCls ，是一个CSS类，可用于修饰按钮，或者其他东西

两个Ext.Msg.alert 跳出来，后一个会覆盖前一个。。。

为了加速网络传输， JSON的传输可以使用 HTTP压缩。这个怎么搞?
JS解析采用了 DOM，对DOM还是需要深入的。解析 JSON比解析 XML要轻量级吧? 还有更轻量级的自定义格式???

在Ext的某个窗口按钮中，打开窗口，关闭，又打开，怎么会报错的?
具体报错信息是：this.west.el 为空或不是对象

多级Window，最上层使用的renderTo和下层窗口的renderTo使用同一层的 div，点击后，滚动栏有变化，却看不到最上层的窗口?

closable 是否允许窗口关闭的属性，默认值是true。对默认值的规划也是一个复杂问题。

cls为组件定制 CSS描述，标准的 CSS规则是怎样的?

window layout里面有多种布局，设置不同，对显示影响很大。

Monicax 2009-08-12 21:48 发表评论