BlogJava-HelloWorld 善战者,求之于势,不责于人;故能择人而任势。-随笔分类-html/javascript/csshttp://www.blogjava.net/zhaochengming/category/24905.html 知止而后有定，定而后能静，静而后能安，安而后能虑，虑而后能得。物有本末，事有终始。知所先后，则近道矣。zh-cnSat, 23 Feb 2013 02:26:13 GMTSat, 23 Feb 2013 02:26:13 GMT60Console命令详解,让调试js代码变得更简单http://www.blogjava.net/zhaochengming/archive/2013/02/22/395606.htmlhelloworld2008helloworld2008Fri, 22 Feb 2013 11:40:00 GMThttp://www.blogjava.net/zhaochengming/archive/2013/02/22/395606.htmlhttp://www.blogjava.net/zhaochengming/comments/395606.htmlhttp://www.blogjava.net/zhaochengming/archive/2013/02/22/395606.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/395606.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/395606.html

Firebug是网页开发的利器，能够极大地提升工作效率。

但是，它不太容易上手。我曾经翻译过一篇《Firebug入门指南》，介绍了一些基本用法。今天，继续介绍它的高级用法。

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

Firebug控制台详解

作者：阮一峰
出处：http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html


控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息。

一、显示信息的命令

Firebug内置一个console对象，提供5种方法，用来显示信息。

最简单的方法是console.log()，可以用来取代alert()或document.write()。比如，在网页脚本中使用console.log("Hello World")，加载时控制台就会自动显示如下内容。

另外，根据信息的不同性质，console对象还有4种显示信息的方法，分别是一般信息console.info()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

比如，在网页脚本中插入下面四行：

　　console.info("这是info");

　　console.debug("这是debug");

　　console.warn("这是warn");

　　console.error("这是error");

加载时，控制台会显示如下内容。

可以看到，不同性质的信息前面有不同的图标，并且每条信息后面都有超级链接，点击后跳转到网页源码的相应行。

二、占位符

console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

比如，

　　console.log("%d年%d月%d日",2011,3,26);

　　console.log("圆周率是%f",3.1415926);

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

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黄色";

然后，对它使用o%占位符。

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

三、分组显示

如果信息太多，可以分组显示，用到的方法是console.group()和console.groupEnd()。

　　console.group("第一组信息");

　　　　console.log("第一组第一条");

　　　　console.log("第一组第二条");

　　console.groupEnd();

　　console.group("第二组信息");

　　　　console.log("第二组第一条");

　　　　console.log("第二组第二条");

　　console.groupEnd();

点击组标题，该组信息会折叠或展开。

四、console.dir()

console.dir()可以显示一个对象所有的属性和方法。

比如，现在为第二节的dog对象，添加一个bark()方法。

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

然后，显示该对象的内容，

　　console.dir(dog);

五、console.dirxml()

console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

比如，先获取一个表格节点，

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

然后，显示该节点包含的代码。

　　console.dirxml(table);

六、console.assert()

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

比如，下面两个判断的结果都为否。

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

七、console.trace()

console.trace()用来追踪函数的调用轨迹。

比如，有一个加法器函数。

　　function add(a,b){

　　　　return a+b;

　　}

我想知道这个函数是如何被调用的，在其中加入console.trace()方法就可以了。

　　function add(a,b){

　　　　console.trace();

　　　　return a+b;

　　}

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

　　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);}

运行后，会显示add()的调用轨迹，从上到下依次为add()、add1()、add2()、add3()。

八、计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

　　console.time("计时器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("计时器一");

九、性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

假定有一个函数Foo()，里面调用了另外两个函数funcA()和funcB()，其中funcA()调用10次，funcB()调用1次。

　　function Foo(){

　　　　for(var i=0;i<10;i++){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

　　　　for(var i=0;i<count;i++){}

　　}

　　function funcB(count){

　　　　for(var i=0;i<count;i++){}

　　}

然后，就可以分析Foo()的运行性能了。

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

　　Foo();

　　console.profileEnd();

控制台会显示一张性能分析表，如下图。

标题栏提示，一共运行了12个函数，共耗时2.656毫秒。其中funcA()运行10次，耗时1.391毫秒，最短运行时间0.123毫秒，最长0.284毫秒，平均0.139毫秒；funcB()运行1次，耗时1.229ms毫秒。

除了使用console.profile()方法，firebug还提供了一个"概况"（Profiler）按钮。第一次点击该按钮，"性能分析" 开始，你可以对网页进行某种操作（比如ajax操作），然后第二次点击该按钮，"性能分析"结束，该操作引发的所有运算就会进行性能分析。

十、属性菜单

控制台面板的名称后面，有一个倒三角，点击后会显示属性菜单。

默认情况下，控制台只显示Javascript错误。如果选中Javascript警告、CSS错误、XML错误都送上，则相关的提示信息都会显示。

这里比较有用的是"显示XMLHttpRequests"，也就是显示ajax请求。选中以后，网页的所有ajax请求，都会在控制台面板显示出来。

比如，点击一个YUI示例，控制台就会告诉我们，它用ajax方式发出了一个GET请求，http请求和响应的头信息和内容主体，也都可以看到。

[参考文献]

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

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

（完）



helloworld2008 2013-02-22 19:40 发表评论
]]>在Extjs4应用中使用Ext.Loaderhttp://www.blogjava.net/zhaochengming/archive/2011/07/28/355233.htmlhelloworld2008helloworld2008Thu, 28 Jul 2011 07:46:00 GMThttp://www.blogjava.net/zhaochengming/archive/2011/07/28/355233.htmlhttp://www.blogjava.net/zhaochengming/comments/355233.htmlhttp://www.blogjava.net/zhaochengming/archive/2011/07/28/355233.html#Feedback1http://www.blogjava.net/zhaochengming/comments/commentRss/355233.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/355233.html

在EXTJS官网看到一片文章，讲的是Extjs.Loader的使用方法，文章非常详细的介绍了 Loader的机制及用法，感觉非常不错，但无奈英文实在太烂，就没转过来。昨天恰好在CSDN看到了这篇文章的译文，而译文的质量非常高，对译者的翻译 水平怎一个羡慕了得。废话不多说，正文开始。

在开始之前，将英文原文链接放上来，英文水平高的可以看看原文哦。

链接地址：www.sencha.com/blog/using-ext-loader-for-your-application/

ExtJS 4.0是一个使用新的依赖系统的类加载系统。这两个强大的新功能允许你创建大量允许浏览器按需下载脚本代码的应用。

今天，我们将通过建立一个小的使用新的类加载系统的应用程序来熟悉一下依赖管理系统。同时，我们将讨论Ext加载系统的各种配置项。

在开始之前，我们先来看看将要实现的结果。这样做，可使我们确定需要扩展那些类。

001

应用会包括互相绑定的GridPanel和FormPanel，名称分别为UserGridPanel和UserFormPanel。 UserGridPanel的操作需要创建一个模型和Store。UserGridPanel和UserFormPanel将被渲染到一个名称为 UserEditorWindow的窗口，它扩张自ExtJS的Window类。所有这些类都会在命名空间MyApp下。

在开始编码前，首先要确定目录结构，以下是使用命名空间组织的文件夹：

002

从上图可以看到，MyApp目录已经按照命名空间进拆分成几个目录。在完成开发的时候，我们的应用将会有一个如下图所示的内部依赖运行模型。

（尽管应用的目录构成很象ExtJS 4 MVC架构，事实上示例并没有使用它 ）

003

现在开始编写index.html文件，这里需要包含应用需要的启动文件和应用的根文件(app.js)。

 
  1. <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.     <title>Ext 4 Loader</title>
  5.     <link rel="stylesheet" type="text/css"  href="js/ext-4.0.1/resources/css/ext-all.css" />
  6.     <script type="text/javascript" src="js/ext-4.0.1/ext-debug.js"></script>
  7.     <script type="text/javascript" src="js/MyApp/app.js"></script>
  8. </head>
  9. <body>
  10. </body>
  11. </html>

index.html文件中需要使用link标记包含ExtJS 4的样式文件。包含ext-debug.js文件的javascript标记可能要修改多次，ext-all-debug.js文件是开发调试用的，而ext-all.js则是在发布产品时使用的。

这里有几个选择，每个选择都有优缺点。

以下是这些文件的说明：

ext-all-debug-w-comments.js：带注释的的完整调试版本。文件比较大，加载时间比较长。

ext-all-debug.js : 不带注释的完整调试版本。文件也比较大，但很适合调试。

ext-all.js ；压缩后的完整版本，文件比较小。使用该版本调试很困难，因此一般在发布产品时才使用。

ext-debug.js ： 该文件只包含ExtJS基础架构和空的结构。使用该文件，可以实现ExtJS类文件的远程加载，而且提供了很好的调试体验，不过代价是相当的慢。

ext.js : ext-debug.js的压缩版本。

我们的index.html将使用ext-debug.js文件，这是实现动态加载所需的最低要求。最后，我们将展示如何使用ext-all版本获取最好的结果。

由于UserGridPanel 类要求模型和Store，因而，要先定义编写这些支持类。现在开始编写模型和Store：

 
  1. Ext.define('MyApp.models.UserModel', {
  2.     extend   : 'Ext.data.Model',
  3.     fields   : [
  4.         'firstName',
  5.         'lastName',
  6.         'dob',
  7.         'userName'
  8.     ]
  9. });

以上代码扩展自Ext.data.Model，将创建UserModel 类。因为扩展自Ext.data.Model类，ExtJS会自动加载它，并在它加载后创建UserModel类。

下一步，要创建扩展自Ext.data.Store的UserStore 类：

 
  1. Ext.define('MyApp.stores.UserStore', {
  2.     extend    : 'Ext.data.Store',
  3.     singleton : true,
  4.     requires  : ['MyApp.models.UserModel'],
  5.     model     : 'MyApp.models.UserModel',
  6.     constructor : function() {
  7.         this.callParent(arguments);
  8.         this.loadData([
  9.             {
  10.                 firstName : 'Louis',
  11.                 lastName  : 'Dobbs',
  12.                 dob       : '12/21/34',
  13.                 userName  : 'ldobbs'
  14.             },
  15.             {
  16.                 firstName : 'Sam',
  17.                 lastName  : 'Hart',
  18.                 dob       : '03/23/54',
  19.                 userName  : 'shart'
  20.             },
  21.             {
  22.                 firstName : 'Nancy',
  23.                 lastName  : 'Garcia',
  24.                 dob       : '01/18/24',
  25.                 userName  : 'ngarcia'
  26.             }
  27.         ]);
  28.     }
  29. });

当创建单件模式的UserStore 时，需要在UserStore原型添加一个requires关键字，它会在类实例化前，为ExtJS提供一个类的请求列表。在这个示例，列表中只有UserModel 一个请求类。

（实际上， 在Store的原型中定义了model为UserModel 类，ExtJS就会自动加载它。在requires关键字中列出的目的，是希望你的代码能自文档化（self-documenting），从而提醒你，UserModel 类是必须的 ）

好了，UserGridPanel视图需要的基类已经创建了，现在可以创建UserGridPanel类了：

 
  1. Ext.define('MyApp.views.UsersGridPanel', {
  2.     extend   : 'Ext.grid.Panel',
  3.     alias    : 'widget.UsersGridPanel',
  4.     requires : ['MyApp.stores.UserStore'],
  5.     initComponent : function() {
  6.         this.store   = MyApp.stores.UserStore;
  7.         this.columns = this.buildColumns();
  8.         this.callParent();
  9.     },
  10.     buildColumns : function() {
  11.         return [
  12.             {
  13.                 header    : 'First Name',
  14.                 dataIndex : 'firstName',
  15.                 width     : 70
  16.             },
  17.             {
  18.                 header    : 'Last Name',
  19.                 dataIndex : 'lastName',
  20.                 width     : 70
  21.             },
  22.             {
  23.                 header    : 'DOB',
  24.                 dataIndex : 'dob',
  25.                 width     : 70
  26.             },
  27.             {
  28.                 header    : 'Login',
  29.                 dataIndex : 'userName',
  30.                 width     : 70
  31.             }
  32.         ];
  33.     }
  34. });

在上面代码中，要注意requires 关键字，看它是怎么增加UserStore 为请求类的。刚才，我们为GridPanel扩展和Store扩展配置了一个直接的依赖关系。

下一步，我们要创建FormPanel扩展：

 
  1. Ext.define('MyApp.views.UserFormPanel', {
  2.     extend      : 'Ext.form.Panel',
  3.     alias       : 'widget.UserFormPanel',
  4.     bodyStyle   : 'padding: 10px; background-color: #DCE5F0;' 
  5.             + ' border-left: none;',
  6.     defaultType : 'textfield',
  7.     defaults    : {
  8.         anchor     : '-10',
  9.         labelWidth : 70
  10.     },
  11.     initComponent : function() {
  12.         this.items = this.buildItems();
  13.         this.callParent();
  14.     },
  15.     buildItems : function() {
  16.         return [
  17.             {
  18.                 fieldLabel : 'First Name',
  19.                 name       : 'firstName'
  20.             },
  21.             {
  22.                 fieldLabel : 'Last Name',
  23.                 name       : 'lastName'
  24.             },
  25.             {
  26.                 fieldLabel : 'DOB',
  27.                 name       : 'dob'
  28.             },
  29.             {
  30.                 fieldLabel : 'User Name',
  31.                 name       : 'userName'
  32.             }
  33.         ];
  34.     }
  35. });

因为UserForm 不需要从服务器端请求任何类，因而不需要添加requires定义。

应用快完成了，现在需要创建UserEditorWindow类和运行应用的app.js。以下是UserEditorWindow类的代码。因为要将Grid和表单绑定在一起，因而类代码有点长，请见谅：

 
  1. Ext.define('MyApp.views.UserEditorWindow', {
  2.     extend   : 'Ext.Window',
  3.     requires : ['MyApp.views.UsersGridPanel','MyApp.views.UserFormPanel'],
  4.     height : 200,
  5.     width  : 550,
  6.     border : false,
  7.     layout : {
  8.         type  : 'hbox',
  9.         align : 'stretch'
  10.     },
  11.     initComponent : function() {
  12.         this.items   = this.buildItems();
  13.         this.buttons = this.buildButtons();
  14.         this.callParent();
  15.         this.on('afterrender', this.onAfterRenderLoadForm, this);
  16.     },
  17.     buildItems : function() {
  18.         return [
  19.             {
  20.                 xtype     : 'UsersGridPanel',
  21.                 width     : 280,
  22.                 itemId    : 'userGrid',
  23.                 listeners : {
  24.                     scope     : this,
  25.                     itemclick : this.onGridItemClick
  26.                 }
  27.             },
  28.             {
  29.                 xtype  : 'UserFormPanel',
  30.                 itemId : 'userForm',
  31.                 flex   : 1
  32.             }
  33.         ];
  34.     },
  35.     buildButtons : function() {
  36.         return [
  37.             {
  38.                 text    : 'Save',
  39.                 scope   : this,
  40.                 handler : this.onSaveBtn
  41.             },
  42.             {
  43.                 text    : 'New',
  44.                 scope   : this,
  45.                 handler : this.onNewBtn
  46.             }
  47.         ];
  48.     },
  49.     onGridItemClick : function(view, record) {
  50.         var formPanel = this.getComponent('userForm');
  51.         formPanel.loadRecord(record)
  52.     },
  53.     onSaveBtn : function() {
  54.         var gridPanel  = this.getComponent('userGrid'),
  55.             gridStore  = gridPanel.getStore(),
  56.             formPanel  = this.getComponent('userForm'),
  57.             basicForm  = formPanel.getForm(),
  58.             currentRec = basicForm.getRecord(),
  59.             formData   = basicForm.getValues(),
  60.             storeIndex = gridStore.indexOf(currentRec),
  61.             key;
  62.         //loop through the record and set values
  63.         currentRec.beginEdit();
  64.         for (key in formData) {
  65.             currentRec.set(key, formData[key]);
  66.         }
  67.         currentRec.endEdit();
  68.         currentRec.commit();
  69.         // Add and select
  70.         if (storeIndex == -1) {
  71.             gridStore.add(currentRec);
  72.             gridPanel.getSelectionModel().select(currentRec)
  73.         }
  74.     },
  75.     onNewBtn : function() {
  76.         var gridPanel = this.getComponent('userGrid'),
  77.             formPanel = this.getComponent('userForm'),
  78.             newModel  = Ext.ModelManager.create({}, 
  79.                               'MyApp.models.UserModel');
  80.         gridPanel.getSelectionModel().clearSelections();
  81.         formPanel.getForm().loadRecord(newModel)
  82.     },
  83.     onAfterRenderLoadForm : function() {
  84.         this.onNewBtn();
  85.     }
  86. });

UserEditorWindow 的代码包含了许多东西用来管理UserGridPanel和UserFormPanel类的整个绑定的声明周期。为了指示ExtJS在创建该类前加载这两个类，必须在requires列表里列出它们。

现在完成最后一个文件app.js。为了最大限度地提高我们的学习，将有3次修改要做。首先从最简单配置开始，然后逐步添加。

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

首先，app.js会在ExtJS添加MyApp命名空间的路径，这可通过调用Ext.loader.setPath方法实现，方法的第1个参数是命名空间，然后是加载文件与页面的相对路径。

下一步，调用Ext.OnReady方法，传递一个包含Ext.create的匿名函数。Ext.create会在ExtJS 4.0初始化之后执行，以字符串形式传递的UserEditorWindow 类会被实例化。因为不需要指向实例和希望立即显示它，因而在后面串接了show方法的调用。

如果你打开这个页面（http://moduscreate.com/senchaarticles/01/pass1.html ），你会看到UI渲染，但很慢，并且ExtJS会在Firebug中显示以下警告信息：

004

ExtJS提示我们没有使用加载系统最优化的方式。这是第二步要讨论的问题。然后，这是一个好的学习机会，要好好理由。

     我们需要配置Firebug在控制台中显示XHR请求，以便在控制台中看到所有请求，而不需要切换到网络面板。这样，我们不单可以观察到类依赖系统的工作情况，还可以从所有ExtJS类加载的文件中通过过滤方式找到我们要求这样的文件。

     在Firebug控制台过滤输入框中输入“User”，你会看到下图所示的结果。

005从图中可以看到，UserEditorWindow类第一个被加载，接着请求UserGridPanel。UserGridPanel 要求UserStore和UserModel类。最后加载UserFormPanel 类。

我刚才提到，ExtJS提示了我们没有使用加载系统最优化的方式。这是因为依赖是在Ext.OnReady触发加载之后通过同步XHR请求确定的，而这不是有效的方式且难于调试。

未来修正这个问题，可以修改app.js指示ExtJS先加载我们定义的类，这样即可提供性能又便于调试：

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

为了快速加载我们定义的类和避免调试信息，可简单的在Ext.onReady前调用Ext.require，只是ExtJS请求 UserEditorWindow类。这将会让ExtJS在文档HEAD标记内注入一个script标记，运行资源在Ext.OnReady前加载。

查看http://moduscreate.com/senchaarticles/01/pass2.html 可看到它是如何工作地。在页面加载后，你会注意到ExtJS没有在控制台显示警告信息了。

我们所做的是让ExtJS框架和应用类延迟加载。虽然这样做调试很好，但是对于需要快速调试的情况，页面渲染时间会让你感到痛苦。为什么？

原因很简单，因为这需要加载许多资源文件。在示例中，ExtJS发送了193个Javascript资源请求到web服务器，还有部分是在缓存中的：

006

我们创建了6个Javascript文件（5个类文件和app.js），这意味着加载要求的ExtJS文件有187个请求。当你在本地做开发的时候，这个方案可行，但不是最理想的和效果最好的。

解决这个问题，我们可以使用折中方案，通过ext-all-debug加载ExtJS框架，动态加载我们的类文件。要实现这个，需要修改两个文件。

 
  1. <script type="text/javascript"  src="js/ext-4.0.1/ext-all-debug.js"></script>

首先，需要修改Index.html，使用ext-all-debug.js替换ext.debug.js。

接着，修改app.js，开启Ext.Loader：

 
  1. (function() {
  2.     Ext.Loader.setConfig({
  3.         enabled : true,
  4.         paths   : {
  5.             MyApp : 'js/MyApp'
  6.         } 
  7.     });
  8.  
  9.     Ext.require('MyApp.views.UserEditorWindow');
  10.  
  11.     Ext.onReady(function() {
  12.         Ext.create('MyApp.views.UserEditorWindow').show();
  13.     });
  14. })();

通过调用Loader.setConfig可开启Ext.Loader，需要传递一个匿名对象，它的eanbled属性设置为true，而命名空间设置为路径映射。

通过编辑app.js，在本地开发环境下，应用将会在1秒内完成加载和渲染。

007

源代码下载地址：http://moduscreate.com/senchaarticles/01/files.zip

译文链接地址：blog.csdn.net/tianxiaode/archive/2011/06/28/6571589.aspx



helloworld2008 2011-07-28 15:46 发表评论
]]>ExtJs xtype一览http://www.blogjava.net/zhaochengming/archive/2011/07/28/355230.htmlhelloworld2008helloworld2008Thu, 28 Jul 2011 07:37:00 GMThttp://www.blogjava.net/zhaochengming/archive/2011/07/28/355230.htmlhttp://www.blogjava.net/zhaochengming/comments/355230.htmlhttp://www.blogjava.net/zhaochengming/archive/2011/07/28/355230.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/355230.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/355230.html
基本组件：
xtype Class 描述
button Ext.Button 按钮
splitbutton Ext.SplitButton 带下拉菜单的按钮
cycle Ext.CycleButton 带下拉选项菜单的按钮
buttongroup Ext.ButtonGroup 编组按钮(Since 3.0)
slider Ext.Slider 滑动条
progress Ext.ProgressBar 进度条
statusbar Ext.StatusBar 状态条，2.2加进来，3.0 又去了
colorpalette Ext.ColorPalette 调色板
datepicker Ext.DatePicker 日期选择面板
 
容器及数据类组件
xtype Class 描述
window Ext.Window 窗口
viewport Ext.ViewPort 视口，即浏览器的视口，能随之伸缩
box Ext.BoxComponent 盒子组件，相当于一个 <div>
component Ext.Component 组件
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 属性表格
editor Ext.Editor 编辑器
dataview Ext.DataView 数据显示视图
listview Ext.ListView 列表视图
 
工具栏组件：
xtype Class 描述
paging Ext.PagingToolbar 分页工具条
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 工具栏文本项
 
菜单组件：
xtype Class 描述
menu Ext.menu.Menu 菜单
colormenu Ext.menu.ColorMenu 颜色选择菜单
datemenu Ext.menu.DateMenu 日期选择菜单
menubaseitem BaseItem  
menucheckitem Ext.menu.CheckItem 选项菜单项
menuitem Ext.menu.Item  
menuseparator Ext.menu.Separator 菜单分隔线
menutextitem Ext.menu.TextItem 文本菜单项
 
表单及表单域组件：
xtype Class 描述
form Ext.FormPanel/Ext.form.FormPanel 表单面板
checkbox Ext.form.Checkbox 多选框
combo Ext.form.ComboBox 下拉框
datefield Ext.form.DateField 日期选择项
timefield Ext.form.TimeField 时间录入项
field Ext.form.Field 表单字段
fieldset Ext.form.FieldSet 表单字段组
hidden Ext.form.Hidden 表单隐藏域
htmleditor Ext.form.HtmlEditor HTML 编辑器
label Ext.form.Label 标签
numberfield Ext.form.NumberField 数字编辑器
radio Ext.form.Radio 单选按钮
textarea Ext.form.TextArea 多行文本框
textfield Ext.form.TextField 表单文本框
trigger Ext.form.TriggerField 触发录入项
checkboxgroup Ext.form.CheckboxGroup 编组的多选框(Since 2.2)
displayfield Ext.form.DisplayField 仅显示，不校验/不被提交的文本框
radiogroup Ext.form.RadioGroup 编组的单选按钮(Since 2.2)
 
图表组件：
xtype Class 描述
chart Ext.chart.Chart 图表组件
barchart Ext.chart.BarChart 柱状图
cartsianchart Ext.chart.CartesianChart  
columnchart Ext.chart.ColumnChart  
linechart Ext.chart.LineChart 连线图
piechart Ext.chart.PieChart 扇形图
 
数据集 Store：
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处理特殊字符http://www.blogjava.net/zhaochengming/archive/2010/12/02/339585.htmlhelloworld2008helloworld2008Thu, 02 Dec 2010 03:14:00 GMThttp://www.blogjava.net/zhaochengming/archive/2010/12/02/339585.htmlhttp://www.blogjava.net/zhaochengming/comments/339585.htmlhttp://www.blogjava.net/zhaochengming/archive/2010/12/02/339585.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/339585.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/339585.html在使用xml文件时，有时候内容中会含有一些特殊字符，导致在解析xml的时候出现异常。

解析数据

XML 解析器通常情况下会处理XML文档中的所有文本。

当XML元素被解析的时候，XML元素内部的文本也会被解析。

    如果文本中含有“<”，“>”等特殊的字符时将会出现异常。（当含有“＝”时，DataSet.ReadXml也会出现异常）。
    一种解决方法是：用实体&来表示。
下面是五个在XML文档中预定义好的实体:



    
        

            &lt;
            <
            小于号
        

        

            &gt;
            >
            大于号
        

        

            &amp;
            &
            和
        

        

            &apos;
            '
            单引号
        

        

            &quot;
            "
            双引号
        

    



另一种解决方法是使用CDATA部件：
一个 CDATA 部件以"<![CDATA[" 标记开始，以"]]>"标记结束


所有在CDATA部件之间的文本都会被解析器忽略。


CDATA注意事项:


CDATA部件之间不能再包含CDATA部件（不能嵌套）。如果CDATA部件包含了字符"]]>" 或者"<![CDATA[" ，将很有可能出错。


同样要注意在字符串"]]>"之间没有空格或者换行符。


helloworld2008 2010-12-02 11:14 发表评论
]]>XML处理特殊字符http://www.blogjava.net/zhaochengming/archive/2010/12/02/339586.htmlhelloworld2008helloworld2008Thu, 02 Dec 2010 03:14:00 GMThttp://www.blogjava.net/zhaochengming/archive/2010/12/02/339586.htmlhttp://www.blogjava.net/zhaochengming/comments/339586.htmlhttp://www.blogjava.net/zhaochengming/archive/2010/12/02/339586.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/339586.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/339586.html在使用xml文件时，有时候内容中会含有一些特殊字符，导致在解析xml的时候出现异常。

解析数据

XML 解析器通常情况下会处理XML文档中的所有文本。

当XML元素被解析的时候，XML元素内部的文本也会被解析。

    如果文本中含有“<”，“>”等特殊的字符时将会出现异常。（当含有“＝”时，DataSet.ReadXml也会出现异常）。
    一种解决方法是：用实体&来表示。
下面是五个在XML文档中预定义好的实体:



    
        

            &lt;
            <
            小于号
        

        

            &gt;
            >
            大于号
        

        

            &amp;
            &
            和
        

        

            &apos;
            '
            单引号
        

        

            &quot;
            "
            双引号
        

    



另一种解决方法是使用CDATA部件：
一个 CDATA 部件以"<![CDATA[" 标记开始，以"]]>"标记结束


所有在CDATA部件之间的文本都会被解析器忽略。


CDATA注意事项:


CDATA部件之间不能再包含CDATA部件（不能嵌套）。如果CDATA部件包含了字符"]]>" 或者"<![CDATA[" ，将很有可能出错。


同样要注意在字符串"]]>"之间没有空格或者换行符。


helloworld2008 2010-12-02 11:14 发表评论
]]>javascript技巧合集 （转自http://ttyp.cnblogs.com/archive/2004/11/15/63900.html）http://www.blogjava.net/zhaochengming/archive/2010/04/09/317837.htmlhelloworld2008helloworld2008Fri, 09 Apr 2010 05:01:00 GMThttp://www.blogjava.net/zhaochengming/archive/2010/04/09/317837.htmlhttp://www.blogjava.net/zhaochengming/comments/317837.htmlhttp://www.blogjava.net/zhaochengming/archive/2010/04/09/317837.html#Feedback5http://www.blogjava.net/zhaochengming/comments/commentRss/317837.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/317837.html阅读全文

helloworld2008 2010-04-09 13:01 发表评论
]]>上百个让你事半功倍的jquery插件(转)http://www.blogjava.net/zhaochengming/archive/2010/03/25/316517.htmlhelloworld2008helloworld2008Thu, 25 Mar 2010 05:01:00 GMThttp://www.blogjava.net/zhaochengming/archive/2010/03/25/316517.htmlhttp://www.blogjava.net/zhaochengming/comments/316517.htmlhttp://www.blogjava.net/zhaochengming/archive/2010/03/25/316517.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/316517.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/316517.html阅读全文

helloworld2008 2010-03-25 13:01 发表评论
]]>15个友好的jQuery提示框插件( 转)http://www.blogjava.net/zhaochengming/archive/2010/03/25/316516.htmlhelloworld2008helloworld2008Thu, 25 Mar 2010 04:39:00 GMThttp://www.blogjava.net/zhaochengming/archive/2010/03/25/316516.htmlhttp://www.blogjava.net/zhaochengming/comments/316516.htmlhttp://www.blogjava.net/zhaochengming/archive/2010/03/25/316516.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/316516.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/316516.html 

需要在用户把光标移到某个元素上时显示一些额外信息时，提示框是一种不错的方式，提示框会在鼠标停留的时候显示，鼠标移开时消失。

适当的使用提示框能大大提升网站的友好度，并且可以节省一些不必要的网页空间，今天我们将看到15款制作友好的提示框的jQuery插件。

1. qTip

qTip是一款功能高级的提示框插件，它提供了非常多的特性，包括圆角框、提示泡泡等。
qtip

2. jQuery Tools/Tooltips

这个提示框插件能够显示任何的HTML元素，比如链接、表格、表单、图片，实现这些效果是很轻松的，你也可以轻松制作出自己独特风格的提示框。jquery-tools-tooltips

3. Simpletip

Simpletip 允许你通过Jquery的元素选择器和事件管理器轻松在任何元素上制作提示框，提示框可以使静态的、动态的、甚至可以通过ajax加载，并且都有非常多不懂的显示效果。

simpletip

4. jQuery (mb)Tooltip

jQuery (mb)Tooltip是一款通过 jQuery timers 和半透明阴影插件实现的漂亮的提示框插件，它为各种需求提供很多可选项。

5. EZPZ Tooltip

你不需要添加任何CSS或图片就可以扩展、定制提示框的样式风格。

ezpz-tooltip

6. jQuery Input Floating Hint Box

这个插件在表单右边提供一个自动变化的提示框，当输入框获得焦点时它就会显示，失去焦点时就隐藏。iquery-input-floating-hint-box

7. HTML Tooltip

html-tooltip

8. Orbital Tooltip

你可以用 Orbital Tooltip在目标元素的360°任何一个位置制作出一个提示框。 orbital-tooltip

9. Tipsy

Facebook风格的提示框插件。
tipsy

10. clueTip

cluetip



helloworld2008 2010-03-25 12:39 发表评论
]]>clientheight clientwidth offsetheight offsetwidthhttp://www.blogjava.net/zhaochengming/archive/2010/03/20/316029.htmlhelloworld2008helloworld2008Sat, 20 Mar 2010 09:53:00 GMThttp://www.blogjava.net/zhaochengming/archive/2010/03/20/316029.htmlhttp://www.blogjava.net/zhaochengming/comments/316029.htmlhttp://www.blogjava.net/zhaochengming/archive/2010/03/20/316029.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/316029.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/316029.html

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



则：

IE6.0、FF1.06+：
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：
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 区别http://www.blogjava.net/zhaochengming/archive/2010/03/20/316028.htmlhelloworld2008helloworld2008Sat, 20 Mar 2010 09:47:00 GMThttp://www.blogjava.net/zhaochengming/archive/2010/03/20/316028.htmlhttp://www.blogjava.net/zhaochengming/comments/316028.htmlhttp://www.blogjava.net/zhaochengming/archive/2010/03/20/316028.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/316028.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/316028.html

边框属性(border)用来设定一个元素的边线。

边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。

间隙属性(padding)是用来设置元素内容到元素边界的距离。

这三个属性都属于CSS中box类型的属性。

下面这个示意图，很形象地体现了三者之间的区别。

这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。



helloworld2008 2010-03-20 17:47 发表评论
]]>javaScript屏蔽按键 ( 转自:http://hi.baidu.com/shunxinyangkun/blog/item/7090911ba576f8d4ac6e7576.html )http://www.blogjava.net/zhaochengming/archive/2008/10/08/233119.htmlhelloworld2008helloworld2008Wed, 08 Oct 2008 05:10:00 GMThttp://www.blogjava.net/zhaochengming/archive/2008/10/08/233119.htmlhttp://www.blogjava.net/zhaochengming/comments/233119.htmlhttp://www.blogjava.net/zhaochengming/archive/2008/10/08/233119.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/233119.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/233119.html <head>
   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
   <noscript><meta http-equiv="refresh" content="0;url=about:noscript"></noscript>
   <title>屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键</title>
</head>
<body>
<script language="Javascript"><!--
  //屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键
  //Author: meizz(梅花雨) 2002-6-18
function document.oncontextmenu(){event.returnValue=false;}//屏蔽鼠标右键
function window.onhelp(){return false} //屏蔽F1帮助
function document.onkeydown()
{
  if ((window.event.altKey)&&
       ((window.event.keyCode==37)||   //屏蔽 Alt+ 方向键 ←
        (window.event.keyCode==39)))   //屏蔽 Alt+ 方向键 →
   {
      alert("不准你使用ALT+方向键前进或后退网页！");
      event.returnValue=false;
   }
     /* 注：这还不是真正地屏蔽 Alt+ 方向键，
      因为 Alt+ 方向键弹出警告框时，按住 Alt 键不放，
      用鼠标点掉警告框，这种屏蔽方法就失效了。以后若
      有哪位高手有真正屏蔽 Alt 键的方法，请告知。*/
  if ((event.keyCode==8)   ||                 //屏蔽退格删除键
       (event.keyCode==116)||                 //屏蔽 F5 刷新键
       (event.ctrlKey && event.keyCode==82)){ //Ctrl + R
      event.keyCode=0;
      event.returnValue=false;
      }
  if (event.keyCode==122){event.keyCode=0;event.returnValue=false;}  //屏蔽F11
  if (event.ctrlKey && event.keyCode==78) event.returnValue=false;   //屏蔽 Ctrl+n
  if (event.shiftKey && event.keyCode==121)event.returnValue=false;  //屏蔽 shift+F10
  if (window.event.srcElement.tagName == "A" && window.event.shiftKey)  
       window.event.returnValue = false;             //屏蔽 shift 加鼠标左键新开一网页
  if ((window.event.altKey)&&(window.event.keyCode==115))             //屏蔽Alt+F4
   {
       window.showModelessDialog("about:blank","","dialogWidth:1px;dialogheight:1px");
      return false;
   }
}
</script>
屏蔽鼠标右键、Ctrl+N、Shift+F10、Alt+F4、F11、F5刷新、退格键
</body>
</html>

helloworld2008 2008-10-08 13:10 发表评论
]]>多语言注意点http://www.blogjava.net/zhaochengming/archive/2008/09/09/227959.htmlhelloworld2008helloworld2008Tue, 09 Sep 2008 07:14:00 GMThttp://www.blogjava.net/zhaochengming/archive/2008/09/09/227959.htmlhttp://www.blogjava.net/zhaochengming/comments/227959.htmlhttp://www.blogjava.net/zhaochengming/archive/2008/09/09/227959.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/227959.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/227959.html1.       Jboss/Tomcat中的server.xml中<Connector>中加入URIEncoding="utf-8"



helloworld2008 2008-09-09 15:14 发表评论
]]>javascript 获取屏幕及浏览器大小和坐标等http://www.blogjava.net/zhaochengming/archive/2008/09/09/227958.htmlhelloworld2008helloworld2008Tue, 09 Sep 2008 07:13:00 GMThttp://www.blogjava.net/zhaochengming/archive/2008/09/09/227958.htmlhttp://www.blogjava.net/zhaochengming/comments/227958.htmlhttp://www.blogjava.net/zhaochengming/archive/2008/09/09/227958.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/227958.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/227958.htmldocument.body.offsetHeight是获得<body>内的高度信息
转自：http://hi.baidu.com/collect_zero/blog/item/5fc3e8012686f8071d95838f.html


window.screen.width是获取整个屏幕的高度信息，浏览器最大化的情况下是”1024”

window.screen.width是获取整个屏幕去除任务栏后的高度信息，浏览器最大化的情况下是”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
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth



helloworld2008 2008-09-09 15:13 发表评论
]]>html table 标题 不滚动http://www.blogjava.net/zhaochengming/archive/2008/09/04/226835.htmlhelloworld2008helloworld2008Thu, 04 Sep 2008 01:12:00 GMThttp://www.blogjava.net/zhaochengming/archive/2008/09/04/226835.htmlhttp://www.blogjava.net/zhaochengming/comments/226835.htmlhttp://www.blogjava.net/zhaochengming/archive/2008/09/04/226835.html#Feedback1http://www.blogjava.net/zhaochengming/comments/commentRss/226835.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/226835.html
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


代码

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> 
<style type="text/css"> 
<!-- 
body { 
background: #FFF; 
color: #000; 
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif; 
margin: 10px; 
padding: 0 
} 

table, td, a { 
color: #000; 
font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif 
} 

.td 
{ 
nowrap:’’true’’; 
} 

div.tableContainer { 
clear: both; 
border: 1px solid #963; 
height: 285px; 
overflow: auto; 
width: 100%; 
} 

/* WinIE 6.x needs to re-account for it’’s scrollbar. Give it some padding */ 
\html div.tableContainer/* */ { 
padding: 0 16px 0 0 
} 

/* clean up for allowing display Opera 5.x/6.x and MacIE 5.x */ 
html>body div.tableContainer { 
height: auto; 
padding: 0; 
width: 740px 
} 

/* Reset overflow value to hidden for all non-IE browsers. */ 
/* Filter out Opera 5.x/6.x and MacIE 5.x */ 
head:first-child+body div[class].tableContainer { 
height: 285px; 
overflow: hidden; 
width: 756px 
} 

/* define width of table. IE browsers only */ 
/* if width is set to 100%, you can remove the width */ 
/* property from div.tableContainer and have the div scale */ 
div.tableContainer table { 
float: left; 
width: 100% 
} 

/* WinIE 6.x needs to re-account for padding. Give it a negative margin */ 
\html div.tableContainer table/* */ { 
margin: 0 -16px 0 0 
} 

/* define width of table. Opera 5.x/6.x and MacIE 5.x */ 
html>body div.tableContainer table { 
float: none; 
margin: 0; 
width: 740px 
} 

/* define width of table. Add 16px to width for scrollbar. */ 
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */ 
head:first-child+body div[class].tableContainer table { 
width: 756px 
} 

/* set table header to a fixed position. WinIE 6.x only */ 
/* In WinIE 6.x, any element with a position property set to relative and is a child of */ 
/* an element that has an overflow property set, the relative value translates into fixed. */ 
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */ 
thead.fixedHeader tr { 
position: relative; 
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */ 
top: expression(document.getElementById("tableContainer").scrollTop) 
} 
thead.fixedHeader2 tr { 
position: relative; 
/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */ 
bottom: expression(document.getElementById("tableContainer").scrollHeight > document.getElementById("tableContainer").clientHeight ? document.getElementById("tableContainer").scrollHeight - document.getElementById("tableContainer").scrollTop - document.getElementById("tableContainer").clientHeight :0) 
} 

/* set THEAD element to have block level attributes. All other non-IE browsers */ 
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ 
/* Filter out Opera 5.x/6.x and MacIE 5.x */ 
head:first-child+body thead[class].fixedHeader tr { 
display: block 
} 

/* make the TH elements pretty */ 
thead.fixedHeader th { 
background: #C96; 
border-left: 1px solid #EB8; 
border-right: 1px solid #B74; 
border-top: 1px solid #EB8; 
font-weight: normal; 
padding: 4px 3px; 
text-align: center 
} 
/* make the TH elements pretty */ 
thead.fixedHeader2 th { 
background: #C96; 
border-left: 1px solid #EB8; 
border-right: 1px solid #B74; 
border-top: 1px solid #EB8; 
font-weight: normal; 
padding: 4px 3px; 
text-align: left 
} 
/* make the A elements pretty. makes for nice clickable headers */ 
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited { 
color: #FFF; 
display: block; 
text-decoration: none; 
width: 100% 
} 
thead.fixedHeader2 a, thead.fixedHeader2 a:link, thead.fixedHeader a:visited { 
color: #FFF; 
display: block; 
text-decoration: none; 
width: 100% 
} 

/* make the A elements pretty. makes for nice clickable headers */ 
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x */ 
thead.fixedHeader a:hover { 
color: #FFF; 
display: block; 
text-decoration: underline; 
width: 100% 
} 

/* define the table content to be scrollable */ 
/* set TBODY element to have block level attributes. All other non-IE browsers */ 
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */ 
/* induced side effect is that child TDs no longer accept width: auto */ 
/* Filter out Opera 5.x/6.x and MacIE 5.x */ 
head:first-child+body tbody[class].scrollContent { 
display: block; 
height: 262px; 
overflow: auto; 
width: 100% 
} 

/* make TD elements pretty. Provide alternating classes for striping the table */ 
/* http://www.alistapart.com/articles/zebratables/ */ 
tbody.scrollContent td, tbody.scrollContent tr.normalRow td { 
background: #FFF; 
border-bottom: 1px solid #EEE; 
border-left: 1px solid #EEE; 
border-right: 1px solid #AAA; 
border-top: 1px solid #AAA; 
padding: 2px 3px 
} 

tbody.scrollContent tr.alternateRow td { 
background: #EEE; 
border-bottom: 1px solid #EEE; 
border-left: 1px solid #EEE; 
border-right: 1px solid #AAA; 
border-top: 1px solid #AAA; 
padding: 2px 3px 
} 

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */ 
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */ 
/* Add 16px to last TH for scrollbar padding */ 
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */ 
head:first-child+body thead[class].fixedHeader th { 
width: 200px 
} 

head:first-child+body thead[class].fixedHeader th + th { 
width: 250px 
} 

head:first-child+body thead[class].fixedHeader th + th + th { 
border-right: none; 
padding: 4px 4px 4px 3px; 
width: 316px 
} 

/* define width of TH elements: 1st, 2nd, and 3rd respectively. */ 
/* All other non-IE browsers. Filter out Opera 5.x/6.x and MacIE 5.x */ 
/* Add 16px to last TH for scrollbar padding */ 
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors */ 
head:first-child+body tbody[class].scrollContent td { 
width: 200px 
} 

head:first-child+body tbody[class].scrollContent td + td { 
width: 250px 
} 

head:first-child+body tbody[class].scrollContent td + td + td { 
border-right: none; 
padding: 2px 4px 2px 3px; 
width: 300px 

/* expression is for WinIE 5.x only. Remove to validate and for pure CSS solution */ 
top: expression(document.getElementById("tableContainer").scrollTop) 
} 
--> 
</style> 
</head><body> 
 <script>
   function test() {
    var cH = document.getElementById("tableContainer").clientHeight;
    var sH = document.getElementById("tableContainer").scrollHeight;
    var sT = document.getElementById("tableContainer").scrollTop;
    alert(cH+":"+sH+":"+sT);
   }
  </script>
<div id="tableContainer" class="tableContainer"> 
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable"> 
<thead class="fixedHeader"> 
<tr> 
<th><a href="#" onclick="javascript:test();">Header 1</a></th> 
<th><a href="#">Header 2</a></th> 
<th><a href="#">Header 3</a></th> 
<th><a href="#">Header 4</a></th> 
</tr> 
</thead> 
<tbody class="scrollContent"> 
<tr> 
<td>Cell Content 1</td> 
<td>Cell Content 2</td> 
<td>Cell Content 3</td> 
<td>Cell Content 4</td> 
 
</tr> 
<tr> 
<td>More Cell Content 1</td> 
<td>More Cell Content 2</td> 
<td>More Cell Content 3</td> 
<td>More Cell Content 4</td> 
</tr> 
<tr> 
<td nowrap>Even More Cell Content 1</td> 
<td nowrap>Even More Cell Content 2</td> 
<td nowrap>Even More Cell Content 3</td> 
<td nowrap>Even More Cell Content 4</td> 
</tr> 

<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr>
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr>
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr>
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr> 
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>And Repeat 4</td> 

</tr>
<tr> 
<td>And Repeat 1</td> 
<td>And Repeat 2</td> 
<td>And Repeat 3</td> 
<td>最后 7</td> 
</tr> 

</tbody> 

<thead class="fixedHeader2"> 
<tr> 
<th><a href="#">合计:</a></th> 
<th colspan=6><a href="#">10000</a></th> 
</tr> 
</thead> 

</table> 
</div> 

</body></html>



helloworld2008 2008-09-04 09:12 发表评论
]]>ajax下拉提示http://www.blogjava.net/zhaochengming/archive/2007/08/13/136478.htmlhelloworld2008helloworld2008Mon, 13 Aug 2007 10:56:00 GMThttp://www.blogjava.net/zhaochengming/archive/2007/08/13/136478.htmlhttp://www.blogjava.net/zhaochengming/comments/136478.htmlhttp://www.blogjava.net/zhaochengming/archive/2007/08/13/136478.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/136478.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/136478.htmlfunction 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+"//"+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+="<div onmouseover='javascript:suggestOver(this);'";
     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+"</div>";
    }
    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调整页面高度，适合大文件的网页http://www.blogjava.net/zhaochengming/archive/2007/08/13/136477.htmlhelloworld2008helloworld2008Mon, 13 Aug 2007 10:55:00 GMThttp://www.blogjava.net/zhaochengming/archive/2007/08/13/136477.htmlhttp://www.blogjava.net/zhaochengming/comments/136477.htmlhttp://www.blogjava.net/zhaochengming/archive/2007/08/13/136477.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/136477.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/136477.html<iframe id="frameaaa"    onload="try{document.all['frameaaa'].style.height=frameaaa.document.body.scrollHeight;}catch(e){}"
scrolling="no"> </iframe>

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，小文件是适合的，大文件就不行了



helloworld2008 2007-08-13 18:55 发表评论
]]>javascript 仿msn 弹出信息 点击不隐藏http://www.blogjava.net/zhaochengming/archive/2007/08/13/136462.htmlhelloworld2008helloworld2008Mon, 13 Aug 2007 10:42:00 GMThttp://www.blogjava.net/zhaochengming/archive/2007/08/13/136462.htmlhttp://www.blogjava.net/zhaochengming/comments/136462.htmlhttp://www.blogjava.net/zhaochengming/archive/2007/08/13/136462.html#Feedback0http://www.blogjava.net/zhaochengming/comments/commentRss/136462.htmlhttp://www.blogjava.net/zhaochengming/services/trackbacks/136462.html/**
* 功能: 仿Msn信息提示
* @param height : 信息框的高度
* @param width : 信息框的宽度
* @param title : 信息框的标题
* @param innerHTML : 信息框面板显示内容,放在<DIV></DIV>中,任意的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;
//以下为默认值设置,可以调用对象的成员直接修改
//信息框默认为自动隐藏
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;
//默认为没有关闭
this.close = false;
//默认为没有停止不动
this.pause = false;
//信息框移动速度
this.speed = 15;
//正常显示需要多久的时间,然后关闭掉
this.timeout = 300;
//设置步长
this.step = 1;
//定时器
this.timer = 0;
}

/**
* CMsnMsg对象的显示方法
*/
CMsnMsg.prototype.show = function() {
var pop = window.createPopup();
this.pop = pop;
      var str = "<DIV style='BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: 99999; LEFT: 0px; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: "
      str +=this.width + "px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: " + this.height + "px; BACKGROUND-COLOR: #c9d3f3'>"  
      str += "<TABLE style='BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid' cellSpacing=0 cellPadding=0 width='100%' bgColor=#cfdef4 border=0>"  
      str += "<TR>"  
      str += "<TD style='FONT-SIZE: 12px;COLOR: #0f2c8c' width=30 height=24></TD>"  
      str += "<TD style='PADDING-LEFT: 4px; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #1f336b; PADDING-TOP: 4px' vAlign=center width='100%'>" + this.title + "</TD>"  
      str += "<TD style='PADDING-RIGHT: 2px; PADDING-TOP: 2px' vAlign=center align=right width=19>"  
      str += "<SPAN title=关闭 style='FONT-WEIGHT: bold; FONT-SIZE: 12px; CURSOR: hand; COLOR: black; MARGIN-RIGHT: 4px' id='btSysClose' >×</SPAN></TD>"  
      str += "</TR>"  
      str += "<TR>"  
      str += "<TD style='PADDING-RIGHT: 1px;PADDING-BOTTOM: 1px' colSpan=3 height=" + (this.height-28) + ">"  
      str += "<DIV style='BORDER-RIGHT: #b9c9ef 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; PADDING-BOTTOM: 8px;";
      str += "BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: #1f336b; PADDING-TOP: 8px; BORDER-BOTTOM: #b9c9ef 1px solid; HEIGHT: 100%'>"  
str += this.innerHTML;
      str += "</DIV>"  
      str += "</TD>"  
      str += "</TR>"  
      str += "</TABLE>"  
      str += "</DIV>"  
      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对象的关闭方法
*/
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系统提示");
     msg.innerHTML = "<A href='www.baidu.com'>www.baidu.com</a>"
     msg.show();
}
}
window.setInterval("test();",20000);



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