亚洲一区爱区精品无码,亚洲最大视频网站,67194在线午夜亚洲

helloworld2008 — Fri, 22 Feb 2013 11:40:00 GMT

Firebug是网��开发的利器�Q�能够极大地提升工作效率�?br />

但是�Q�它不太�Ҏ(gu��)��上手。我曄��译�q�一��?a target="_blank" style="color: #1a356e; text-decoration: initial;">《Firebug入门指南�?/a>�Q�介�l�了一些基本用法。今天，�l�箋介绍它的高��用法�?/p>

===================================

Firebug控制台详�?/strong>

作者：阮一�?br />出处�Q�http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

控制収ͼ�Console�Q�是Firebug的第一个面板，也是最重要的面板，主要作用是显�C�网��加载过�E�中产生各类信息�?/p>

一、显�C�Z��息的命��o

Firebug内置一个console对象�Q�提�?�U�方法，用来昄��信息�?/p>

最��单的�Ҏ(gu��)��是console.log()�Q�可以用来取代alert()或document.write()。比如，在网��脚本中使用console.log("Hello World")�Q�加载时控制台就会自动显�C�如下内宏V�?/p>

另外�Q�根据信息的不同性质�Q�console对象�q�有4�U�显�C�Z��息的�Ҏ(gu��)��Q�分别是一般信息console.info()、除错信息console.debug()、警告提�C�console.warn()、错误提�C�console.error()�?/p>

比如�Q�在�|�页脚本中插入下面四行：

　　console.info("�q�是info");
　　console.debug("�q�是debug");
　　console.warn("�q�是warn");
　　console.error("�q�是error");

加蝲�Ӟ��控制��C��昄��如下内容�?/p>

可以看到�Q�不同性质的信息前面有不同的图标，�q�且每条信息后面都有��链接�Q�点��d��跌��{到网��|��码的相应行�?/p>

二、占位符

console对象的上�?�U�方法，都可以��用printf风格的占位符。不�q�，占位�W�的�U�类比较?y��u)��，只支持字�W�（%s�Q�、整敎ͼ�%d�?i�Q�、��Q�Ҏ(gu��)��Q?f�Q�和对象�Q?o�Q�四�U��?/p>

比如�Q?/p>

　　console.log("%d�q?d�?d�?,2011,3,26);
　　console.log("圆周率是%f",3.1415926);

%o占位�W�，可以用来查看一个对象内部情��c��比如，有这样一个对象：

　　var dog = {} ;
　　dog.name = "大毛" ;
　　dog.color = "黄色";

然后�Q�对它��用o%占位�W��?/p>

　　console.log("%o",dog);

三、分�l�显�C?/strong>

如果信息太多�Q�可以分�l�显�C�，用到的方法是console.group()和console.groupEnd()�?/p>

　　console.group("�W�一�l�信�?);
　　　　console.log("�W�一�l�第一�?);
　　　　console.log("�W�一�l�第二条");
　　console.groupEnd();
　　console.group("�W�二�l�信�?);
　　　　console.log("�W�二�l�第一�?);
　　　　console.log("�W�二�l�第二条");
　　console.groupEnd();

点击�l�标题，该组信息会折叠或展开�?/p>

四、console.dir()

console.dir()可以昄��一个对象所有的属性和�Ҏ(gu��)��?/p>

比如�Q�现在�ؓ�W�二节的dog对象�Q�添加一个bark()�Ҏ(gu��)��?/p>

　　dog.bark = function(){alert("汪汪�?);};

然后�Q�显�C��对象的内容，

　　console.dir(dog);

五、console.dirxml()

console.dirxml()用来昄��|�页的某个节点（node�Q�所包含的html/xml代码�?/p>

比如�Q�先获取一个表��D��点，

　　var table = document.getElementById("table1");

然后�Q�显�C��节点包含的代码�?/p>

　　console.dirxml(table);

六、console.assert()

console.assert()用来判断一个表辑ּ�或变量是否�ؓ真。如果结果�ؓ否，则在控制台输��Z��条相应信息，�q�且抛出一个异常�?/p>

比如�Q�下面两个判断的�l�果都�ؓ否�?/p>

　　var result = 0;
　　console.assert( result );
　　var year = 2000;
　　console.assert(year == 2011 );

七、console.trace()

console.trace()用来�q�踪函数的调用轨�q�V�?/p>

比如�Q�有一个加法器函数�?/p>

　　function add(a,b){
　　　　return a+b;
　　}

我想知道�q�个函数是如何被调用的，在其中加入console.trace()�Ҏ(gu��)��可以了�?/p>

　　function add(a,b){
　　　　console.trace();
　　　　return a+b;
　　}

假定�q�个函数的调用代码如下：

　　var x = add3(1,1);
　　function add3(a,b){return add2(a,b);}
　　function add2(a,b){return add1(a,b);}
　　function add1(a,b){return add(a,b);}

�q�行后，会显�C�add()的调用轨�q�，从上��C��依次为add()、add1()、add2()、add3()�?/p>

八、计时功�?/strong>

console.time()和console.timeEnd()�Q�用来显�C�Z��码的�q�行旉��?/p>

　　console.time("计时器一");
　　for(var i=0;i<1000;i++){
　　　　for(var j=0;j<1000;j++){}
　　}
　　console.timeEnd("计时器一");

�?ji��)、性能分析

性能分析�Q�Profiler�Q�就是分析程序各个部分的�q�行旉��Q�找出瓶颈所在，使用的方法是console.profile()�?/p>

假定有一个函数Foo()�Q�里面调用了另外两个函数funcA()和funcB()�Q�其中funcA()调用10�ơ，funcB()调用1�ơ�?/p>

　　function Foo(){
　　　　for(var i=0;i<10;i++){funcA(1000);}
　　　　funcB(10000);
　　}
　　function funcA(count){
　　　　for(var i=0;i
　　}
　　function funcB(count){
　　　　for(var i=0;i
　　}

然后�Q�就可以分析Foo()的运行性能了�?/p>

　　console.profile('性能分析器一');
　　Foo();
　　console.profileEnd();

控制��C��昄��一张性能分析表，如下图�?/p>

标题栏提�C�，一��p��行了12个函敎ͼ��p��时2.656毫秒。其中funcA()�q�行10�ơ，耗时1.391毫秒�Q�最短运行时�?.123毫秒�Q�最�?.284毫秒�Q��^�?.139毫秒�Q�funcB()�q�行1�ơ，耗时1.229ms毫秒�?/p>

除了使用console.profile()�Ҏ(gu��)��Q�firebug�q�提供了一�?概况"�Q�Profiler�Q�按钮。第一�ơ点击该按钮�Q?性能分析" 开始，你可以对�|�页�q�行某种操作�Q�比如ajax操作�Q�，然后�W�二�ơ点击该按钮�Q?性能分析"�l�束�Q�该操作引发的所有运��就会进行性能分析�?/p>

十、属性菜�?/strong>

控制台面板的名称后面�Q�有一个倒三角，点击后会昄��属性菜单�?/p>

默认情况下，控制台只昄��Javascript错误。如果选中Javascript警告、CSS错误、XML错误都送上�Q�则相关的提�C�Z��息都会显�C��?/p>

�q�里比较有用的是"昄��XMLHttpRequests"�Q�也��是昄��ajax��h��。选中以后�Q�网��늚�所有ajax��h��Q�都会在控制台面板显�C�出来�?/p>

比如�Q�点��M��?a target="_blank" style="color: #1a356e; text-decoration: initial;">YUI�C�Z��Q�控制台��׃��告诉我们�Q�它用ajax方式发出了一个GET��h��Q�http��h��和响应的头信息和内容��M��Q�也都可以看到�?/p>

[参考文献]

* Firebug Tutorial - Logging, Profiling and CommandLine (Part I)

* Firebug Tutorial - Logging, Profiling and CommandLine (Part II)

�Q�完�Q?/p>

helloworld2008 2013-02-22 19:40 发表评论

在Extjs4应用中��用Ext.Loader

helloworld2008 — Thu, 28 Jul 2011 07:46:00 GMT

在EXTJS官网看到一片文章，讲的是Extjs.Loader的��用方法，文章非常详细的介�l�了 Loader的机制及用法�Q�感觉非�怸�错，但无奈英文实在太烂，��没转过来。昨天恰好在CSDN看到了这��文章的译文�Q�而译文的质量非常高，对译者的��译水��^怎一个�M慕了得。废话不多说�Q�正文开始�?/p>
在开始之前，��英文原文链接放上来�Q�英文水�q�高的可以看看原文哦�?/p>
链接地址�Q?a target="_blank" >www.sencha.com/blog/using-ext-loader-for-your-application/

ExtJS 4.0是一个��用新的依赖系�l�的�c�d��载系�l�。这两个强大的新功能允许你创建大量允许浏览器按需下蝲脚本代码的应用�?/p>
今天�Q�我们将通过建立一个小的��用新的类加蝲�pȝ��的应用程序来熟�?zh��n)�一下依赖管理系�l�。同�Ӟ��我们��讨论Ext加蝲�pȝ��的各�U�配�|�项�?/p>
在开始之前，我们先来看看��要实现的结果。这样做�Q�可使我们确定需要扩展那些类�?/p>

应用会包括互相绑定的GridPanel和FormPanel�Q�名�U�分别�ؓUserGridPanel和UserFormPanel�?UserGridPanel的操作需要创��Z��个模型和Store。UserGridPanel和UserFormPanel��被渲染��C��个名�U�Cؓ UserEditorWindow的窗口，它扩张自ExtJS的Window�c�R��所有这些类都会在命名空间MyApp下�?/p>
在开始编码前�Q�首先要��定目录�l�构�Q�以下是使用命名�I�间�l�织的文件夹�Q?/p>

从上囑֏�以看刎ͼ�MyApp目录已经按照命名�I�间�q�拆分成几个目录。在完成开发的时候，我们的应用将会有一个如下图所�C�的内部依赖�q�行模型�?/p>
�Q?span style="font-family: 宋体; color: #ff0000">��管应用的目录构成很象ExtJS 4 MVC架构�Q�事实上�C�Z��q�没有��用它 �Q?/p>

现在开始编写index.html文�g�Q�这里需要包含应用需要的启动文�g和应用的�Ҏ(gu��)��?app.js)�?/p>

    Ext 4 Loader




index.html文�g中需要��用link标记包含ExtJS 4的样式文件。包含ext-debug.js文�g的javascript标记可能要修改多�ơ，ext-all-debug.js文�g是开发调试用的，而ext-all.js则是在发布��品时使用的�?/p>
�q�里有几个选择�Q�每个选择都有优缺炏V�?/p>
以下是这些文件的说明�Q?/p>
ext-all-debug-w-comments.js�Q�带注释的的完整调试版本。文件比较大�Q�加载时间比较长�?/p>
ext-all-debug.js : 不带注释的完整调试版本。文件也比较大，但很适合调试�?/p>
ext-all.js �Q�压�~�后的完整版本，文�g比较?y��u)��。��用该版本调试很困难，因此一般在发布产品时才使用�?/p>
ext-debug.js �Q?该文件只包含ExtJS基础架构和空的结构。��用该文�g�Q�可以实现ExtJS�c�L��件的�q�程加蝲�Q�而且提供了很好的调试体验�Q�不�q�代��h��相当的慢�?/p>
ext.js : ext-debug.js的压�~�版本�?/p>
我们的index.html��用ext-debug.js文�g�Q�这是实现动态加载所需的最低要求。最后，我们��展�C�如何��用ext-all版本获取最好的�l�果�?/p>
�׃��UserGridPanel �c�要求模型和Store�Q�因而，要先定义�~�写�q�些支持�c�R��现在开始编写模型和Store�Q?/p>

Ext.define('MyApp.models.UserModel', {
    extend   : 'Ext.data.Model',
    fields   : [
        'firstName',
        'lastName',
        'dob',
        'userName'
    ]
});

以上代码扩展自Ext.data.Model�Q�将创徏UserModel �c�R��因为扩展自Ext.data.Model�c�，ExtJS会自动加载它�Q��ƈ在它加蝲后创建UserModel�c�R�?/p>
下一步，要创建扩展自Ext.data.Store的UserStore �c�：

Ext.define('MyApp.stores.UserStore', {
    extend    : 'Ext.data.Store',
    singleton : true,
    requires  : ['MyApp.models.UserModel'],
    model     : 'MyApp.models.UserModel',
    constructor : function() {
        this.callParent(arguments);
        this.loadData([
            {
                firstName : 'Louis',
                lastName  : 'Dobbs',
                dob       : '12/21/34',
                userName  : 'ldobbs'
            },
            {
                firstName : 'Sam',
                lastName  : 'Hart',
                dob       : '03/23/54',
                userName  : 'shart'
            },
            {
                firstName : 'Nancy',
                lastName  : 'Garcia',
                dob       : '01/18/24',
                userName  : 'ngarcia'
            }
        ]);
    }
});

当创建单件模式的UserStore �Ӟ��需要在UserStore原型��d��一个requires关键字，它会在类实例化前�Q��ؓExtJS提供一个类的请求列表。在�q�个�C�Z��Q�列表中只有UserModel 一个请求类�?/p>
�Q�实际上�Q?在Store的原型中定义了model为UserModel �c�，ExtJS��׃��自动加蝲它。在requires关键字中列出的目的，是希望你的代码能自文档化�Q�self-documenting�Q�，从而提醒你�Q�UserModel �c�L��必须�?�Q?/p>
好了�Q�UserGridPanel视图需要的基类已经创徏了，现在可以创徏UserGridPanel�c�M��Q?/p>

Ext.define('MyApp.views.UsersGridPanel', {
    extend   : 'Ext.grid.Panel',
    alias    : 'widget.UsersGridPanel',
    requires : ['MyApp.stores.UserStore'],
    initComponent : function() {
        this.store   = MyApp.stores.UserStore;
        this.columns = this.buildColumns();
        this.callParent();
    },
    buildColumns : function() {
        return [
            {
                header    : 'First Name',
                dataIndex : 'firstName',
                width     : 70
            },
            {
                header    : 'Last Name',
                dataIndex : 'lastName',
                width     : 70
            },
            {
                header    : 'DOB',
                dataIndex : 'dob',
                width     : 70
            },
            {
                header    : 'Login',
                dataIndex : 'userName',
                width     : 70
            }
        ];
    }
});

在上面代码中�Q�要注意requires 关键字，看它是怎么增加UserStore ��求类的。刚才，我们为GridPanel扩展和Store扩展配置了一个直接的依赖关系�?/p>
下一步，我们要创建FormPanel扩展�Q?/p>

Ext.define('MyApp.views.UserFormPanel', {
    extend      : 'Ext.form.Panel',
    alias       : 'widget.UserFormPanel',
    bodyStyle   : 'padding: 10px; background-color: #DCE5F0;'
            + ' border-left: none;',
    defaultType : 'textfield',
    defaults    : {
        anchor     : '-10',
        labelWidth : 70
    },
    initComponent : function() {
        this.items = this.buildItems();
        this.callParent();
    },
    buildItems : function() {
        return [
            {
                fieldLabel : 'First Name',
                name       : 'firstName'
            },
            {
                fieldLabel : 'Last Name',
                name       : 'lastName'
            },
            {
                fieldLabel : 'DOB',
                name       : 'dob'
            },
            {
                fieldLabel : 'User Name',
                name       : 'userName'
            }
        ];
    }
});

因�ؓUserForm 不需要从服务器端��h��M��c�，因而不需要添加requires定义�?/p>
应用快完成了�Q�现在需要创建UserEditorWindow�c�d��q�行应用的app.js。以下是UserEditorWindow�cȝ��代码。因��Grid和表单绑定在一��P��因而类代码有点长，误��谅：

Ext.define('MyApp.views.UserEditorWindow', {
    extend   : 'Ext.Window',
    requires : ['MyApp.views.UsersGridPanel','MyApp.views.UserFormPanel'],
    height : 200,
    width  : 550,
    border : false,
    layout : {
        type  : 'hbox',
        align : 'stretch'
    },
    initComponent : function() {
        this.items   = this.buildItems();
        this.buttons = this.buildButtons();
        this.callParent();
        this.on('afterrender', this.onAfterRenderLoadForm, this);
    },
    buildItems : function() {
        return [
            {
                xtype     : 'UsersGridPanel',
                width     : 280,
                itemId    : 'userGrid',
                listeners : {
                    scope     : this,
                    itemclick : this.onGridItemClick
                }
            },
            {
                xtype  : 'UserFormPanel',
                itemId : 'userForm',
                flex   : 1
            }
        ];
    },
    buildButtons : function() {
        return [
            {
                text    : 'Save',
                scope   : this,
                handler : this.onSaveBtn
            },
            {
                text    : 'New',
                scope   : this,
                handler : this.onNewBtn
            }
        ];
    },
    onGridItemClick : function(view, record) {
        var formPanel = this.getComponent('userForm');
        formPanel.loadRecord(record)
    },
    onSaveBtn : function() {
        var gridPanel  = this.getComponent('userGrid'),
            gridStore  = gridPanel.getStore(),
            formPanel  = this.getComponent('userForm'),
            basicForm  = formPanel.getForm(),
            currentRec = basicForm.getRecord(),
            formData   = basicForm.getValues(),
            storeIndex = gridStore.indexOf(currentRec),
            key;
        //loop through the record and set values
        currentRec.beginEdit();
        for (key in formData) {
            currentRec.set(key, formData[key]);
        }
        currentRec.endEdit();
        currentRec.commit();
        // Add and select
        if (storeIndex == -1) {
            gridStore.add(currentRec);
            gridPanel.getSelectionModel().select(currentRec)
        }
    },
    onNewBtn : function() {
        var gridPanel = this.getComponent('userGrid'),
            formPanel = this.getComponent('userForm'),
            newModel  = Ext.ModelManager.create({},
                              'MyApp.models.UserModel');
        gridPanel.getSelectionModel().clearSelections();
        formPanel.getForm().loadRecord(newModel)
    },
    onAfterRenderLoadForm : function() {
        this.onNewBtn();
    }
});

UserEditorWindow 的代码包含了许多东西用来��理UserGridPanel和UserFormPanel�cȝ��整个�l�定的声明周期。�ؓ了指�C�ExtJS在创��c�d��加蝲�q�两个类�Q�必��d��requires列表里列出它们�?/p>
现在完成最后一个文件app.js。�ؓ了最大限度地提高我们的学习，��有3�ơ修改要做。首先从最��单配�|�开始，然后逐步��d��?/p>

Ext.Loader.setPath('MyApp', 'js/MyApp');
Ext.onReady(function() {
    Ext.create('MyApp.views.UserEditorWindow').show();
});

首先�Q�app.js会在ExtJS��d��MyApp命名�I�间的�\径，�q�可通过调用Ext.loader.setPath�Ҏ(gu��)��实现�Q�方法的�W?个参数是命名�I�间�Q�然后是加蝲文�g与页面的相对路径�?/p>
下一步，调用Ext.OnReady�Ҏ(gu��)��Q�传递一个包含Ext.create的匿名函数。Ext.create会在ExtJS 4.0初始化之后执行，以字�W�串形式传递的UserEditorWindow �c�M��被实例化。因��Z��需要指向实例和希望立即昄��它，因而在后面串接了show�Ҏ(gu��)��的调用�?/p>
如果你打开�q�个��面�Q?a >http://moduscreate.com/senchaarticles/01/pass1.html �Q�，你会看到UI渲染�Q�但很慢�Q��ƈ且ExtJS会在Firebug中显�C�Z��下警告信息：

ExtJS提示我们没有使用加蝲�pȝ��最优化的方式。这是第二步要讨论的问题。然后，�q�是一个好的学习机会，要好好理由�?/p>
     我们需要配�|�Firebug在控制台中显�C�XHR��h��Q�以便在控制��C��看到所有请求，而不需要切换到�|�络面板。这��P��我们不单可以观察到类依赖�pȝ��的工作情况，�q�可以从所有ExtJS�c�d��载的文�g中通过�q��o方式扑ֈ�我们要求�q�样的文件�?/p>
     在Firebug控制台过滤输入框中输�?#8220;User”�Q�你会看��C��图所�C�的�l�果�?/p>
从图中可以看刎ͼ�UserEditorWindow�cȝ��一个被加蝲�Q�接着��h��UserGridPanel。UserGridPanel 要求UserStore和UserModel�c�R��最后加载UserFormPanel �c�R�?/p>
我刚才提刎ͼ�ExtJS提示了我们没有��用加载系�l�最优化的方式。这是因��Z��赖是在Ext.OnReady触发加蝲之后通过同步XHR��h��定的，而这不是有效的方式且难于调试�?/p>
未来修正�q�个问题�Q�可以修改app.js指示ExtJS先加载我们定义的�c�，�q�样卛_��提供性能又便于调试：

Ext.Loader.setPath('MyApp', 'js/MyApp');
Ext.require('MyApp.views.UserEditorWindow');
Ext.onReady(function() {
    Ext.create('MyApp.views.UserEditorWindow').show();
});

��Z��快速加载我们定义的�c�d��避免调试信息�Q�可��单的在Ext.onReady前调用Ext.require�Q�只是ExtJS��h�� UserEditorWindow�c�R��这��会让ExtJS在文档HEAD标记内注入一个script标记�Q�运行资源在Ext.OnReady前加载�?/p>
查看http://moduscreate.com/senchaarticles/01/pass2.html 可看到它是如何工作地。在��面加蝲后，你会注意到ExtJS没有在控制台昄��警告信息了�?/p>
我们所做的是让ExtJS框架和应用类延迟加蝲。虽然这样做调试很好�Q�但是对于需要快速调试的情况�Q�页面渲染时间会让你感到痛苦。�ؓ什么？

原因很简单，因�ؓ�q�需要加载许多资源文件。在�C�Z��中，ExtJS发送了193个Javascript资源��h��到web服务器，�q�有部分是在�~�存中的�Q?/p>

我们创徏�?个Javascript文�g�Q?个类文�g和app.js�Q�，�q�意味着加蝲要求的ExtJS文�g�?87个请求。当你在本地做开发的时候，�q�个�Ҏ(gu��)��可行�Q�但不是最理想的和效果最好的�?/p>
解决�q�个问题�Q�我们可以��用折中方案，通过ext-all-debug加蝲ExtJS框架�Q�动态加载我们的�c�L��件。要实现�q�个�Q�需要修改两个文件�?/p>

首先�Q�需要修改Index.html�Q��用ext-all-debug.js替换ext.debug.js�?/p>
接着�Q�修改app.js�Q�开启Ext.Loader�Q?/p>

(function() {
    Ext.Loader.setConfig({
        enabled : true,
        paths   : {
            MyApp : 'js/MyApp'
        }
    });

    Ext.require('MyApp.views.UserEditorWindow');

    Ext.onReady(function() {
        Ext.create('MyApp.views.UserEditorWindow').show();
    });
})();

通过调用Loader.setConfig可开启Ext.Loader�Q�需要传递一个匿名对象，它的eanbled属性设�|��ؓtrue�Q�而命名空间设�|��ؓ路径映射�?/p>
通过�~�辑app.js�Q�在本地开发环境下�Q�应用将会在1�U�内完成加蝲和渲染�?/p>

源代码下载地址�Q?a title="http://moduscreate.com/senchaarticles/01/files.zip" >http://moduscreate.com/senchaarticles/01/files.zip

译文链接地址�Q?a target="_blank" >blog.csdn.net/tianxiaode/archive/2011/06/28/6571589.aspx

helloworld2008 2011-07-28 15:46 发表评论

helloworld2008 — Thu, 28 Jul 2011 07:37:00 GMT

基本�l��g�Q?/strong>

xtype Class 描述

button Ext.Button 按钮

splitbutton Ext.SplitButton 带下拉菜单的按钮

cycle Ext.CycleButton 带下拉选项菜单的按�?/td>

buttongroup Ext.ButtonGroup �~�组按钮(Since 3.0)

slider Ext.Slider 滑动�?/td>

progress Ext.ProgressBar �q�度�?/td>

statusbar Ext.StatusBar 状态条�Q?.2加进来，3.0 又去�?/td>

colorpalette Ext.ColorPalette 调色�?/td>

datepicker Ext.DatePicker 日期选择面板

容器及数据类�l��g

xtype Class 描述

window Ext.Window �H�口

viewport Ext.ViewPort 视口�Q�即��览器的视口�Q�能随之伸羃

box Ext.BoxComponent 盒子�l��g�Q�相当于一�?

component Ext.Component �l��g

container Ext.Container 容器

panel Ext.Panel 面板

tabpanel Ext.TabPanel 选项面板

treepanel Ext.tree.TreePanel 树型面板

flash Ext.FlashComponent 昄�� Flash 的组�?Since 3.0)

grid Ext.grid.GridPanel 表格

editorgrid Ext.grid.EditorGridPanel 可编辑的表格

propertygrid Ext.grid.PropertyGrid 属性表�?/td>

editor Ext.Editor �~�辑�?/td>

dataview Ext.DataView 数据昄��视图

listview Ext.ListView 列表视图

工具栏组�Ӟ��

xtype Class 描述

paging Ext.PagingToolbar 分页工具�?/td>

toolbar Ext.Toolbar 工具�?/td>

tbbutton Ext.Toolbar.Button 工具栏按�?/td>

tbfill Ext.Toolbar.Fill 工具栏填充区

tbitem Ext.Toolbar.Item 工具条项�?/td>

tbseparator Ext.Toolbar.Separator 工具栏分隔符

tbspacer Ext.Toolbar.Spacer 工具栏空�?/td>

tbsplit Ext.Toolbar.SplitButton 工具栏分隔按�?/td>

tbtext Ext.Toolbar.TextItem 工具栏文本项

菜单�l��g�Q?/td>

xtype Class 描述

menu Ext.menu.Menu 菜单

colormenu Ext.menu.ColorMenu 颜色选择菜单

datemenu Ext.menu.DateMenu 日期选择菜单

menubaseitem BaseItem

menucheckitem Ext.menu.CheckItem 选项菜单��?/td>

menuitem Ext.menu.Item

menuseparator Ext.menu.Separator 菜单分隔�U?/td>

menutextitem Ext.menu.TextItem 文本菜单��?/td>

表单及表单域�l��g�Q?/td>

xtype Class 描述

form Ext.FormPanel/Ext.form.FormPanel 表单面板

checkbox Ext.form.Checkbox 多选框

combo Ext.form.ComboBox 下拉�?/td>

datefield Ext.form.DateField 日期选择��?/td>

timefield Ext.form.TimeField 旉��录入��?/td>

field Ext.form.Field 表单字段

fieldset Ext.form.FieldSet 表单字段�l?/td>

hidden Ext.form.Hidden 表单隐藏�?/td>

htmleditor Ext.form.HtmlEditor HTML �~�辑�?/td>

label Ext.form.Label 标签

numberfield Ext.form.NumberField 数字�~�辑�?/td>

radio Ext.form.Radio 单选按�?/td>

textarea Ext.form.TextArea 多行文本�?/td>

textfield Ext.form.TextField 表单文本�?/td>

trigger Ext.form.TriggerField 触发录入��?/td>

checkboxgroup Ext.form.CheckboxGroup �~�组的多选框(Since 2.2)

displayfield Ext.form.DisplayField 仅显�C�，不校�?不被提交的文本框

radiogroup Ext.form.RadioGroup �~�组的单选按�?Since 2.2)

图表�l��g�Q?/td>

xtype Class 描述

chart Ext.chart.Chart 图表�l��g

barchart Ext.chart.BarChart ��q��?/td>

cartsianchart Ext.chart.CartesianChart

columnchart Ext.chart.ColumnChart

linechart Ext.chart.LineChart �q�线�?/td>

piechart Ext.chart.PieChart 扇�Ş�?/td>

数据�?Store�Q?/td>

xtype Class 描述

arraystore Ext.data.ArrayStore

directstore Ext.data.DirectStore

groupingstore Ext.data.GroupingStore

jsonstore Ext.data.JsonStore

simplestore Ext.data.SimpleStore

store Ext.data.Store

xmlstore Ext.data.XmlStore

helloworld2008 2011-07-28 15:37 发表评论

XML处理�Ҏ(gu��)��字符

helloworld2008 — Thu, 02 Dec 2010 03:14:00 GMT

在��用xml文�g�Ӟ��有时候内容中会含有一些特�D�字�W�，��D��在解析xml的时候出现异常�?/p>
解析数据

XML 解析器通常情况下会处理XML文档中的所有文本�?/p>
当XML元素被解析的时候，XML元素内部的文本也会被解析�?/p>
如果文本中含�?#8220;<”�Q?#8220;>”�{�特�D�的字符时将会出现异常。（当含�?#8220;�Q?#8221;�Ӟ��DataSet.ReadXml也会出现异常�Q��?/pre>
一�U�解��x��法是�Q�用实体&来表�C��?/pre>
下面是五个在XML文档中预定义好的实体:

< < ��于�?/td>

> > 大于�?/td>

& & �?/td>

' ' 单引�?/td>

" " 双引�?/td>

另一�U�解��x��法是使用CDATA部�g�Q?/pre>
一�?CDATA 部�g�?" 标记开始，�?]]>"标记�l�束

所有在CDATA部�g之间的文本都会被解析器忽略�?/p>
CDATA注意事项:

CDATA部�g之间不能再包含CDATA部�g�Q�不能嵌套）。如果CDATA部�g包含了字�W?]]>" 或�?
同样要注意在字符�?]]>"之间没有�I�格或者换行符�?/p>

helloworld2008 2010-12-02 11:14 发表评论

XML处理�Ҏ(gu��)��字符

helloworld2008 — Thu, 02 Dec 2010 03:14:00 GMT

在��用xml文�g�Ӟ��有时候内容中会含有一些特�D�字�W�，��D��在解析xml的时候出现异常�?/p>
解析数据

XML 解析器通常情况下会处理XML文档中的所有文本�?/p>
当XML元素被解析的时候，XML元素内部的文本也会被解析�?/p>
如果文本中含�?#8220;<”�Q?#8220;>”�{�特�D�的字符时将会出现异常。（当含�?#8220;�Q?#8221;�Ӟ��DataSet.ReadXml也会出现异常�Q��?/pre>
一�U�解��x��法是�Q�用实体&来表�C��?/pre>
下面是五个在XML文档中预定义好的实体:

< < ��于�?/td>

> > 大于�?/td>

& & �?/td>

' ' 单引�?/td>

" " 双引�?/td>

另一�U�解��x��法是使用CDATA部�g�Q?/pre>
一�?CDATA 部�g�?" 标记开始，�?]]>"标记�l�束

所有在CDATA部�g之间的文本都会被解析器忽略�?/p>
CDATA注意事项:

CDATA部�g之间不能再包含CDATA部�g�Q�不能嵌套）。如果CDATA部�g包含了字�W?]]>" 或�?
同样要注意在字符�?]]>"之间没有�I�格或者换行符�?/p>

helloworld2008 2010-12-02 11:14 发表评论

helloworld2008 — Fri, 09 Apr 2010 05:01:00 GMT
     摘要: 事�g源对�? event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事�g按键 event.keyCode ...  阅读全文

helloworld2008 2010-04-09 13:01 发表评论

上百个让你事半功倍的jquery插�g(�?

helloworld2008 — Thu, 25 Mar 2010 05:01:00 GMT
     摘要: 上百个让你事半功倍的jquery插�g 2008�q�三�?0�?�?贝贝�?Leave a reply » jQuery是一个了不�v的javascript库，它可以是我们用很��的几句代码��可以创建出漂亮的页面效果。从�|�站的方面说�Q�这使得javascript更加有趣�?很多jquery爱好者开发了��Z��jquery的插�Ӟ��在这�?发现作者收集好多jquery的插�Ӟ��转脓(chu��ng)�q�来�Q�给大家...  阅读全文

helloworld2008 2010-03-25 13:01 发表评论

15个友好的jQuery提示框插�? �?

helloworld2008 — Thu, 25 Mar 2010 04:39:00 GMT

需要在用户把光标移到某个元素上时显�C�Z��些额外信息时�Q�提�C�框是一�U�不错的方式�Q�提�C�框会在鼠标停留的时候显�C�，鼠标�U�d��时消失�?/p>
适当的��用提�C�框能大大提升网站的友好度，�q�且可以节省一些不必要的网��늩��_��今天我们��看�?5�Ƒֈ�作友好的提示框的jQuery插�g�?/p>
1. qTip

qTip是一�Ƒ֊�能高�U�的提示框插�Ӟ��它提供了非常多的�Ҏ(gu��)��，包括圆角框、提�C��泡等�?br />

2. jQuery Tools/Tooltips

�q�个提示框插件能够显�C�Z�Q何的HTML元素�Q�比如链接、表根{��表单、图片，实现�q�些效果是很��L��的，你也可以��L��制作��q��牚w��格的提示框�?img class="alignnone size-full wp-image-585" title="jquery-tools-tooltips" alt="jquery-tools-tooltips" src="http://www.webdesignbooth.com/wp-content/uploads/2009/06/jquery-tools-tooltips.png" width="500" height="132" />

3. Simpletip

Simpletip 允许你通过Jquery的元素选择器和事�g��理器轻村֜��M��元素上制作提�C�框�Q�提�C�框可以佉K��态的、动态的、甚臛_��以通过ajax加蝲�Q��ƈ且都有非常多不懂的显�C�效果�?/p>

4. jQuery (mb)Tooltip

jQuery (mb)Tooltip是一��N��过 jQuery timers 和半透明阴媄插�g实现的漂亮的提示框插�Ӟ��它�ؓ各种需求提供很多可选项�?/p>
5. EZPZ Tooltip

你不需要添加�Q何CSS或图片就可以扩展、定制提�C�框的样式风根{�?/p>

6. jQuery Input Floating Hint Box

�q�个插�g在表单右�Ҏ(gu��)��供一个自动变化的提示框，当输入框获得焦点时它?y��u)�׃��昄��Q�失�ȝ��Ҏ(gu��)��隐藏�?img class="alignnone size-full wp-image-588" title="iquery-input-floating-hint-box" alt="iquery-input-floating-hint-box" src="http://www.webdesignbooth.com/wp-content/uploads/2009/06/iquery-input-floating-hint-box.png" width="465" height="150" />

7. HTML Tooltip

8. Orbital Tooltip

你可以用 Orbital Tooltip在目标元素的360°��M��一个位�|�制作出一个提�C�框�?

9. Tipsy

Facebook风格的提�C�框插�g�?br />

10. clueTip

helloworld2008 2010-03-25 12:39 发表评论

clientheight clientwidth offsetheight offsetwidth

helloworld2008 — Sat, 20 Mar 2010 09:53:00 GMT

div的样式如下：
width:300px;
height:200px;
padding:10px;
border:10px solid #ccc;
background:#eee;
font-size:12px;

则：

IE6.0、FF1.06+�Q?/strong>
clientWidth = width + padding = 300+10×2 = 320
clientHeight = height + padding = 200+10×2 = 220
offsetWidth = width + padding + border = 300+10×2+10×2= 340
offsetHeight = height + padding + border = 200+10×2+10×2 = 240

IE5.0/5.5�Q?/strong>
clientWidth = width - border = 300-10×2 = 280
clientHeight = height - border = 200-10×2 = 180
offsetWidth = width = 300
offsetHeight = height = 200

helloworld2008 2010-03-20 17:53 发表评论

padding margin border 区别

helloworld2008 — Sat, 20 Mar 2010 09:47:00 GMT

�Ҏ(gu��)��属�?font face="Times New Roman">(border)用来讑֮�一个元素的边线�?/font>

边距属�?font face="Times New Roman">(margin)是用来设�|�一个元素所占空间的边缘到相��d��素之间的距离�?/font>

间隙属�?font face="Times New Roman">(padding)是用来设�|�元素内容到元素边界的距��R�?/font>

�q�三个属性都属于CSS�?/font>box�c�d��的属性�?/font>

下面�q�个�C�意图，很�Ş象地体现了三者之间的区别�?/span>

�q�里提供一张盒模型�?font face="Times New Roman">3D�C�意图，希望便于你的理解和记忆�?/font>

helloworld2008 2010-03-20 17:47 发表评论

javaScript屏蔽按键 ( 转自:http://hi.baidu.com/shunxinyangkun/blog/item/7090911ba576f8d4ac6e7576.html )

helloworld2008 — Wed, 08 Oct 2008 05:10:00 GMT

   "Content-Type" content="text/html; charset=gb2312">

   屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5��h��、退格键

屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5��h��、退格键

helloworld2008 2008-10-08 13:10 发表评论

helloworld2008 — Tue, 09 Sep 2008 07:14:00 GMT

1.       Jboss/Tomcat中的server.xml�?/span>中加�?/span>URIEncoding="utf-8"

helloworld2008 2008-09-09 15:14 发表评论

javascript 获取屏幕及浏览器大小和坐标等

helloworld2008 — Tue, 09 Sep 2008 07:13:00 GMT

document.body.offsetHeight是获�?lt;body>内的高度信息
转自�Q�http://hi.baidu.com/collect_zero/blog/item/5fc3e8012686f8071d95838f.html

window.screen.width是获取整个屏�q�的高度信息�Q�浏览器最大化的情况下�?#8221;1024”

window.screen.width是获取整个屏�q�去除�Q务栏后的高度信息�Q�浏览器最大化的情况下�?#8221;1004”

�|�页可见区域宽：document.body.clientWidth
�|�页可见区域高：document.body.clientHeight
�|�页可见区域宽：document.body.offsetWidth (包括边线的宽)
�|�页可见区域高：document.body.offsetHeight (包括边线的宽)
�|�页正文全文宽：document.body.scrollWidth
�|�页正文全文高：document.body.scrollHeight
�|�页被卷�ȝ��高：document.body.scrollTop
�|�页被卷�ȝ��左：document.body.scrollLeft
�|�页正文部分上：window.screenTop
�|�页正文部分左：window.screenLeft
屏幕分��L率的高：window.screen.height
屏幕分��L率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

helloworld2008 2008-09-09 15:13 发表评论

helloworld2008 — Thu, 04 Sep 2008 01:12:00 GMT

Header 1 Header 2 Header 3 Header 4

Cell Content 1 Cell Content 2 Cell Content 3 Cell Content 4

More Cell Content 1 More Cell Content 2 More Cell Content 3 More Cell Content 4

Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3 Even More Cell Content 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 最�?7

合计: 10000

代码

Header 1 Header 2 Header 3 Header 4

Cell Content 1 Cell Content 2 Cell Content 3 Cell Content 4

More Cell Content 1 More Cell Content 2 More Cell Content 3 More Cell Content 4

Even More Cell Content 1 Even More Cell Content 2 Even More Cell Content 3 Even More Cell Content 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 And Repeat 4

And Repeat 1 And Repeat 2 And Repeat 3 最�?7

合计: 10000

helloworld2008 2008-09-04 09:12 发表评论

ajax下拉提示

helloworld2008 — Mon, 13 Aug 2007 10:56:00 GMT

function suggest(src,confield,convalue,operation,thisObj) {
var str = thisObj.value;
var key = window.event.keyCode;
if (key == 40 || key == 38) {
   if (isNull(thisObj.value2)) {
    thisObj.value2 = thisObj.value;
   }
   var suggestDiv = document.getElementById(thisObj.name+"_suggest");
   if (!isNull(suggestDiv)) {
    var divArr = suggestDiv.childNodes;
    var hasIn = false;
    for (var i = 0; i < divArr.length; i++) {
     if(divArr[i].className == "td-across-deep") {
      hasIn = true;
      divArr[i].className = "td-across-low";
      divArr[i].style.backgroundColor = "white";
      if (key == 40) {
       if (i == divArr.length-1) {
        thisObj.value = thisObj.value2;
       } else {
        divArr[i+1].className = "td-across-deep";
        divArr[i+1].style.backgroundColor = "";
        thisObj.value = divArr[i+1].innerText;
       }
      } else if (key == 38) {
       if (i == 0) {
        thisObj.value = thisObj.value2;
       } else {
        divArr[i-1].className = "td-across-deep";
        divArr[i-1].style.backgroundColor = "";
        thisObj.value = divArr[i-1].innerText;
       }
      }
      break;
     }
    }
    if (!hasIn) {
     var i = 0;
     if (key == 38) {
      i = divArr.length-1;
      suggestDiv.scrollTop = 200;
     } else {
      suggestDiv.scrollTop = 0;
     }
     divArr[i].className = "td-across-deep";
     divArr[i].style.backgroundColor = "";
     thisObj.value = divArr[i].innerText;
    } else {
     key == 40 ? (suggestDiv.scrollTop +=17) : (suggestDiv.scrollTop -=17);
    }
    return true;
   }
}
var dbonclick = document.body.onclick
document.body.onclick = function() {
   if(!isNull(dbonclick))
    dbonclick();
   var arr = document.getElementsByTagName("div");
   if (!isNull(arr))
   for (var i = 0; i < arr.length; i++) {
    if (!isNull(arr[i].name))
    if (arr[i].name.indexOf("suggest") >= 0) {
     document.body.removeChild(arr[i]);
    }
   }
   arr = document.getElementsByTagName("iframe");
   if (!isNull(arr))
   for (var i = 0; i < arr.length; i++) {
    if (!isNull(arr[i].name))
    if (arr[i].name.indexOf("suggest") >= 0) {
     document.body.removeChild(arr[i]);
    }
   }
   thisObj.value2 = null;
}
try {
document.body.onclick();
} catch (e) {
   alert(e);
}
if (key == 13 || key ==   27 || isNull(str) || str.trim() == "" ) {
   return true;
}
var h=location.protocol+"http://"+location.host+"/";
     var pn=location.href.substring(h.length);
     pn=pn.substring(0,pn.indexOf("/"));
var records=thisObj.name.substring(thisObj.name.lastIndexOf("_")+1);
var fields = confield.split("#");
var conVal = convalue.split("#");
var confields = confield.split("#");
var con = "";
for (var i = 1; i < conVal.length; ++i) {
   var temp = "&fld"+confields[i]+"=";
   if (conVal[i].substring(0,1) == "&") {
    temp += conVal[i].substring(1);
   } else {
    var valObj = document.all["fld_abm"+parseFloat(conVal[i])+"_"+records];
    if (valObj == null) {
     valObj = document.all["fld_abm"+parseFloat(conVal[i])+"_"+1];
    }
    temp += strTrim(getObjValue(valObj));
   }
   con += temp;
}
url="/"+pn+"/FormServlet?act=getSuggest&src="+src+"&field="+confield+con;
     if (operation != null) {
      url += "&operation="+operation;
     }
while (url.indexOf("#") >=0) {
   url = url.replace("#","_");
}
     url+="&suggest="+str;
url = encodeURI(url);
var ajax = new Ajax(url,"post");
var divObj = document.all[thisObj.name+"_suggest"];
var iframeObj = document.createElement("iframe");

iframeObj.id = thisObj.name+"_suggest_iframe";
iframeObj.name = thisObj.name+"_suggest_iframe";
document.body.appendChild(iframeObj);
if (isNull(divObj)) {
   divObj = document.createElement("DIV");
}
divObj.name = thisObj.name+"_suggest";
divObj.id = thisObj.name+"_suggest";
divObj.style.border = '1px';
divObj.isOut = "true";
divObj.onmouseover = "javascript:this.isOut = 'false'";
divObj.onmouseout = "javascript:this.isOut = 'true'";
divObj.style.cursor = "hand";

document.body.appendChild(divObj);
divObj.style.position = "absolute";
ajax.setResponseFun(function(){
   var dom = ajax.getDomDoc();
   if(dom.readyState == 4) {
    var root = dom.documentElement;
    var str = "";
    if (root.childNodes.length == 0) {
     document.body.onclick();
     return true;
    }
    for(var i = 0; i < root.childNodes.length; i++) {
     str+="
     str+=" onmouseout='javascript:suggestOut(this);' ";
     str+=" onclick='javascript:setSearch(this.innerHTML,\""+thisObj.name+"\");' class='td-across-low' style='background-color:white;'>";
     str+=root.childNodes[i].text+"
";
    }
    divObj.innerHTML = str;
    divObj.style.borderBottom = '0.008cm outset ';
    divObj.style.borderRight = '0.008cm outset ';
    divObj.style.borderTop = '0.008cm outset ';
    divObj.style.borderLeft = '0.008cm outset ';
    divObj.style.overflowY = "auto";
    divObj.style.height = divObj.offsetHeight > 300 ? 300 : divObj.offsetHeight;
    var oRect = thisObj.getBoundingClientRect();
    divObj.style.left = oRect.left;
    divObj.style.top = oRect.top + 18;
    divObj.style.width = thisObj.clientWidth+2;
    try {
     var iobj = document.getElementById(thisObj.name+"_suggest_iframe");
     iobj.style.position = "absolute";
     iobj.style.left = divObj.offsetLeft;
     iobj.style.top = divObj.offsetTop;
     iobj.style.height = divObj.offsetHeight;
     iobj.style.width = divObj.offsetWidth;
    } catch(e){}
   }
});
ajax.send();
return true;
}

function suggestOver(obj) {
for(var i = 0; i < obj.parentNode.childNodes.length; i++) {
   obj.parentNode.childNodes[i].className = "td-across-low";
   obj.parentNode.childNodes[i].style.backgroundColor = "white";
}
obj.className = "td-across-deep";
obj.style.backgroundColor = "";
}

function suggestOut(obj) {
obj.className = "td-across-low";
obj.style.backgroundColor = "white";
}

function setSearch(value,thisObjName) {
document.all[thisObjName].value = value;
try {
document.body.removeChild(document.getElementById(thisObjName+"_suggest_iframe"));
document.body.removeChild(document.getElementById(thisObjName+"_suggest"));
} catch (e){}
}

function hideSuggest(thisObj) {
var obj = document.getElementById(thisObj.name+"_suggest");
if ( isNull(obj) ) {
   return true;
} else {
   if (obj.isOut == "true") {
    document.body.removeChild(document.getElementById(obj.name+"_suggest_iframe"));
    document.body.removeChild(obj);
   }
}
return true;
}

helloworld2008 2007-08-13 18:56 发表评论

iframe调整��面高度�Q�适合大文件的�|�页

helloworld2008 — Mon, 13 Aug 2007 10:55:00 GMT

scrolling="no">

var menuOpen = false;
function openMemo(){
    var obj = document.getElementById('frameaaa');
    if(!menuOpen) {
     obj.src = "XXX/XXX.html";
     obj.style.display="block";
     menuOpen = true;
     try {
       obj.onreadystatechange = function() {obj.fireEvent('onload');}
       } catch(e) {}
    }
}

如果没有onreadystatechange�Q�小文�g是适合的，大文件就不行�?/p>

helloworld2008 2007-08-13 18:55 发表评论

helloworld2008 — Mon, 13 Aug 2007 10:42:00 GMT

/**
* 功能: 仿Msn信息提示
* @param height : 信息框的高度
* @param width : 信息框的宽度
* @param title : 信息框的标题
* @param innerHTML : 信息框面板显�C�内�?攑֜�
�?��L��的HTML代码
* @return void
*/
function CMsnMsg(width,height,title,innerHTML) {
this.height = (height!=null)?height:150;
this.width = (width!=null)?width:200;
this.title = title;
this.innerHTML = innerHTML;
//以下为默认��D��|?可以调用对象的成员直接修�?br>//信息框默认�ؓ自动隐藏
this.autoHide = true;
//信息框右边的x坐标
this.right = screen.width - 2;
//信息框的左部x坐标
this.left = this.right - this.width;
//信息框的底部y坐标
this.bottom = screen.height;
//信息框的�剙��的y坐标
this.top = this.bottom - this.height;
//默认为没有关�?br>this.close = false;
//默认为没有停止不�?br>this.pause = false;
//信息框移动速度
this.speed = 15;
//正常昄��需要多久的旉��,然后关闭�?br>this.timeout = 300;
//讄��步长
this.step = 1;
//定时�?br>this.timer = 0;
}

/**
* CMsnMsg对象的显�C�方�?br>*/
CMsnMsg.prototype.show = function() {
var pop = window.createPopup();
this.pop = pop;
      var str = "
"
      str += ""
      str += ""
      str += ""
      str += ""
      str += ""
      str += ""
      str += ""
      str += ""
      str += ""
      str += "
" + this.title + " "
      str += "×
"
      str += "
"
str += this.innerHTML;
      str += "
"
      str += "
"
      str += "
"
      pop.document.body.innerHTML = str;
      this.offset = 0;
      var me = this;
      pop.document.body.onmouseover = function() {me.pause = true;};
      pop.document.body.onmouseout = function() {me.pause = false;};

      var fun = function() {
       var x = me.left;
       var y = 0;
       var width = me.width;
       var height = me.height;
       if (me.offset > me.height) {
        height = me.height;
       } else {
        height = me.offset;
       }
       y = me.bottom - me.offset;
    if (y <= me.top) {
     me.timeout -= 1;
     if (me.timeout == 0) {
      window.clearInterval(me.timer);
      if (me.autoHide) {
       me.hide();
      }
     }
    } else {
     me.offset += me.step;
    }
    me.pop.show(x,y,width,height);
      }
      this.timer = window.setInterval(fun,this.speed);
      var btClose = pop.document.getElementById("btSysClose");
      btClose.onclick = function(){
          me.close = true;
          me.hide();
      }
}
/**
* CMsnMsg对象的关闭方�?br>*/
CMsnMsg.prototype.hide = function() {
flag = true;
var offset = this.height>this.bottom-this.top?this.height:this.bottom-this.top;
var me = this;
if(this.timer > 0){
    window.clearInterval(me.timer);
      }
      var fun = function() {
       if (!me.pause || me.close) {
        var x = me.left;
        var y = 0;
        var width = me.width;
        var height = 0;
        if (me.offset > 0) {
         height = me.offset;
        }
        y = me.bottom - height;
        if (y >= me.bottom) {
         window.clearInterval(me.timer);
         me.pop.hide();
        } else {
         me.offset -= me.step;
        }
        me.pop.show(x,y,width,height);
       }
      }
      this.timer = window.setInterval(fun,this.speed);
}
var msg = null;
function test() {
if (msg == null || !msg.pause) {
     msg = new CMsnMsg(300,220,"ABM�pȝ��提示");
     msg.innerHTML = "www.baidu.com"
     msg.show();
}
}
window.setInterval("test();",20000);

helloworld2008 2007-08-13 18:42 发表评论

基本�l��g�Q?/strong>
xtype	Class	描述
button	Ext.Button	按钮
splitbutton	Ext.SplitButton	带下拉菜单的按钮
cycle	Ext.CycleButton	带下拉选项菜单的按�?/td>
buttongroup	Ext.ButtonGroup	�~�组按钮(Since 3.0)
slider	Ext.Slider	滑动�?/td>
progress	Ext.ProgressBar	�q�度�?/td>
statusbar	Ext.StatusBar	状态条�Q?.2加进来，3.0 又去�?/td>
colorpalette	Ext.ColorPalette	调色�?/td>
datepicker	Ext.DatePicker	日期选择面板

容器及数据类�l��g
xtype	Class	描述
window	Ext.Window	�H�口
viewport	Ext.ViewPort	视口�Q�即��览器的视口�Q�能随之伸羃
box	Ext.BoxComponent	盒子�l��g�Q�相当于一�?
component	Ext.Component	�l��g
container	Ext.Container	容器
panel	Ext.Panel	面板
tabpanel	Ext.TabPanel	选项面板
treepanel	Ext.tree.TreePanel	树型面板
flash	Ext.FlashComponent	昄�� Flash 的组�?Since 3.0)
grid	Ext.grid.GridPanel	表格
editorgrid	Ext.grid.EditorGridPanel	可编辑的表格
propertygrid	Ext.grid.PropertyGrid	属性表�?/td>
editor	Ext.Editor	�~�辑�?/td>
dataview	Ext.DataView	数据昄��视图
listview	Ext.ListView	列表视图

工具栏组�Ӟ��
xtype	Class	描述
paging	Ext.PagingToolbar	分页工具�?/td>
toolbar	Ext.Toolbar	工具�?/td>
tbbutton	Ext.Toolbar.Button	工具栏按�?/td>
tbfill	Ext.Toolbar.Fill	工具栏填充区
tbitem	Ext.Toolbar.Item	工具条项�?/td>
tbseparator	Ext.Toolbar.Separator	工具栏分隔符
tbspacer	Ext.Toolbar.Spacer	工具栏空�?/td>
tbsplit	Ext.Toolbar.SplitButton	工具栏分隔按�?/td>
tbtext	Ext.Toolbar.TextItem	工具栏文本项

菜单�l��g�Q?/td>
xtype	Class	描述
menu	Ext.menu.Menu	菜单
colormenu	Ext.menu.ColorMenu	颜色选择菜单
datemenu	Ext.menu.DateMenu	日期选择菜单
menubaseitem	BaseItem
menucheckitem	Ext.menu.CheckItem	选项菜单��?/td>
menuitem	Ext.menu.Item
menuseparator	Ext.menu.Separator	菜单分隔�U?/td>
menutextitem	Ext.menu.TextItem	文本菜单��?/td>

表单及表单域�l��g�Q?/td>
xtype	Class	描述
form	Ext.FormPanel/Ext.form.FormPanel	表单面板
checkbox	Ext.form.Checkbox	多选框
combo	Ext.form.ComboBox	下拉�?/td>
datefield	Ext.form.DateField	日期选择��?/td>
timefield	Ext.form.TimeField	旉��录入��?/td>
field	Ext.form.Field	表单字段
fieldset	Ext.form.FieldSet	表单字段�l?/td>
hidden	Ext.form.Hidden	表单隐藏�?/td>
htmleditor	Ext.form.HtmlEditor	HTML �~�辑�?/td>
label	Ext.form.Label	标签
numberfield	Ext.form.NumberField	数字�~�辑�?/td>
radio	Ext.form.Radio	单选按�?/td>
textarea	Ext.form.TextArea	多行文本�?/td>
textfield	Ext.form.TextField	表单文本�?/td>
trigger	Ext.form.TriggerField	触发录入��?/td>
checkboxgroup	Ext.form.CheckboxGroup	�~�组的多选框(Since 2.2)
displayfield	Ext.form.DisplayField	仅显�C�，不校�?不被提交的文本框
radiogroup	Ext.form.RadioGroup	�~�组的单选按�?Since 2.2)

图表�l��g�Q?/td>
xtype	Class	描述
chart	Ext.chart.Chart	图表�l��g
barchart	Ext.chart.BarChart	��q��?/td>
cartsianchart	Ext.chart.CartesianChart
columnchart	Ext.chart.ColumnChart
linechart	Ext.chart.LineChart	�q�线�?/td>
piechart	Ext.chart.PieChart	扇�Ş�?/td>

数据�?Store�Q?/td>
xtype	Class	描述
arraystore	Ext.data.ArrayStore
directstore	Ext.data.DirectStore
groupingstore	Ext.data.GroupingStore
jsonstore	Ext.data.JsonStore
simplestore	Ext.data.SimpleStore
store	Ext.data.Store
xmlstore	Ext.data.XmlStore

<	<	��于�?/td>
>	>	大于�?/td>
&	&	�?/td>
'	'	单引�?/td>
"	"	双引�?/td>

Header 1	Header 2	Header 3	Header 4
Cell Content 1	Cell Content 2	Cell Content 3	Cell Content 4
More Cell Content 1	More Cell Content 2	More Cell Content 3	More Cell Content 4
Even More Cell Content 1	Even More Cell Content 2	Even More Cell Content 3	Even More Cell Content 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	And Repeat 4
And Repeat 1	And Repeat 2	And Repeat 3	最�?7
合计:	10000

	" + this.title + "	" str += "×
" str += " " str += this.innerHTML; str += " " str += "