问题是我的EXTJS页面在Firefox中运行正常，而在IE中老是报“缺少标识符 字符串或数字”的错误，不知道是什么问题，只好先在Firefox中调试啦。但是页面做完后还是要去面对这个毫无头绪的问题。只好去Google下了。找到了一个网友对此问题的回答：

      这就是IE和Firefox不兼容的地方.属性之间是要用","分隔的,但最后一个属性的后面在IE中是不能有的,firefox可有可无. 至于最后的";"是另外一回事了.这是Javascript的语法问题.如果后面没有其它js语句时";"可以省略.

    Person = Ext.extend(Animal,{
     name:'aaa',
     constructor:function(config)
     {
      Ext.apply(this,config);
     }
    });
 
 var p = new Person({
    age :14
 });
 
 console.log(p);
 
});

Js代码

1. <script type="text/javascript">   
2.             function S(){   
3.             }   
4.             S.prototype.s = "s";   
5.             S.prototype.s1 = "s1";   
6.             function C(){   
7.                 this.c = "c";   
8.                 this.c1 = "c1";   
9.             }   
10.             Ext.extend(C,S,{s1:"by c overload"});   
11.             var c = new C();   
12.             alert(c.s); //s   
13.             alert(c.s1); //by c overload   
14.         </script>  

Js代码  

1. <script type="text/javascript">   
2.             function S(){   
3.             }   
4.             S.prototype.s = "s";   
5.             S.prototype.s1 = "s1";   
6.             function C(){   
7.                 this.c = "c";   
8.                 this.c1 = "c1";   
9.             }   
10.             Ext.extend(C,S,{s1:"by c overload"});   
11.             var c = new C();   
12.             alert(c.s); //s   
13.             alert(c.s1); //by c overload   
14.         </script>  

<script type="text/javascript">
			function S(){
			}
			S.prototype.s = "s";
			S.prototype.s1 = "s1";
			function C(){
				this.c = "c";
				this.c1 = "c1";
			}
			Ext.extend(C,S,{s1:"by c overload"});
			var c = new C();
			alert(c.s); //s
			alert(c.s1); //by c overload
		</script>

Js代码

1. <script type="text/javascript">   
2.             function S(){   
3.                 this.s = "s";   
4.                 this.s1 = "s1";   
5.             }   
6.             function C(){   
7.                 this.c = "c";   
8.                 this.c1 = "c1";   
9.             }   
10.             Ext.extend(C,S,{s1:"by c overload"});   
11.             var c = new C();   
12.             alert(c.s); //undefind   
13.             alert(c.s1); //by c overload   
14.         </script>  

Js代码  

1. <script type="text/javascript">   
2.             function S(){   
3.                 this.s = "s";   
4.                 this.s1 = "s1";   
5.             }   
6.             function C(){   
7.                 this.c = "c";   
8.                 this.c1 = "c1";   
9.             }   
10.             Ext.extend(C,S,{s1:"by c overload"});   
11.             var c = new C();   
12.             alert(c.s); //undefind   
13.             alert(c.s1); //by c overload   
14.         </script>  

<script type="text/javascript">
			function S(){
				this.s = "s";
				this.s1 = "s1";
			}
			function C(){
				this.c = "c";
				this.c1 = "c1";
			}
			Ext.extend(C,S,{s1:"by c overload"});
			var c = new C();
			alert(c.s); //undefind
			alert(c.s1); //by c overload
		</script>

Js代码

1. <script type="text/javascript">   
2.             function S(){   
3.             }   
4.             S.prototype.s = "s";   
5.             S.prototype.s1 = "s1";   
6.             C = Ext.extend(S,{s1:"by c overload"});   
7.             var c = new C();   
8.             alert(c.s); //s   
9.             alert(c.s1); //by c overload   
10.         </script>  

Js代码  

1. <script type="text/javascript">   
2.             function S(){   
3.             }   
4.             S.prototype.s = "s";   
5.             S.prototype.s1 = "s1";   
6.             C = Ext.extend(S,{s1:"by c overload"});   
7.             var c = new C();   
8.             alert(c.s); //s   
9.             alert(c.s1); //by c overload   
10.         </script>  

    <script>
       Ext.onReady(function(){
           var b1 = {
              p1:"p1 value",
              
              p2:"p2 value",
              
              f1:function(){alert(this.p1)},
              
              f2:function(){alert(this.p2)}
           };
           
           var b2 = new Object();
           
           b2.p1 = "b2 value";
           
           Ext.apply(b2,b1);
           
           b2.f1(); // 这个挺有意思,不仅属性会复制,连b1中的f1方法也可以被复制和使用
                    // ( 有点费话,因为f1和f2就是以属性的形式生命的 )
           
           b2.f2();
           
           //会使得b2中包含一个p3的属性，值为"p3 value"。
           Ext.apply(b2,b1,{p3:"p3 value"}); 
 
       
           alert(b2.p3)      
 
       });
    </script>


          

Ext.apply(b2,b1,{p3:"p3 value"});

            alert(b2.p3);

Ext.applyIf(b2,b1);

            b2.f1();

在项目中使用ExtJS已经有一段时间了， 对于这个庞大的Script类库有了一定的了解， 在Ext的使用上也有了一定的经验， 现将这些经验做一下总结， 作为一个入门材料给大家分享。 对于Ext库， 不要被它的庞大所吓倒， 只要静下心来看SDK， 多做一些练习， 还是很容易上手的。

ExtJS 中的类与继承

  在Ext下， 定义一个JavaScript类似乎没有什么特别的， 可以直接声明一个构造函数， 并使用关键字new来进行初始化。 有一点值得注意的是在Ext中频繁出现的Singleton类， 普遍定义为：

然后就可以直接调用Foo的方法了， 其实这段代码可以理解为

这样，就容易理解了。

谈到类和继承， 有几个函数必须注意， Ext.apply、 Ext.applyIf和Ext.extend：

1. Ext.apply(obj, config, [defaults]) 将config对象的所有属性都复制到另一个对象obj上， 第三个参数defaults可以用来提供默认值， 不过通常指用前两个参数就够了。 这个函数主要用在构造函数中， 用来将配置复制到对象上。
2. Ext.applyIf(obj, config) 和Ext.apply的功能类似， 唯一不同的是， 这个函数只会将config对象中有， 而obj对象中没有的属性复制到obj上。
3. Ext.extend(subclass, superclass, [overrides]) 用来继承已有的类， 通常的使用方法是

   var SubClass = function() {    SubClass.superclass.constructor.call(this); }; Ext.extend(SubClass, BaseClass, {    newMethod : function() {},    overriddenMethod : function() {} };

   在上面的代码中， SubClass继承自BaseClass，  添加了新的方法newMethod， 重写了overriddenMethod方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'form.jsp' starting page</title>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">   
 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 <meta http-equiv="description" content="This is my page">
 <link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="/css/main.css" />
   
    <script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/js/ext/ext-all.js"></script>
    <script type="text/javascript">
    Ext.onReady(function(){
     var simpleForm = new Ext.FormPanel({
      renderTo:'a',
      labelAlign: 'left',
      title: '表单例子',
      buttonAlign:'right',
      bodyStyle:'padding:5px',
      width: 600,
      frame:true,
      labelWidth:80,
      items: [{
          layout:'column',   //定义该元素为布局为列布局方式
          border:false,
          labelSeparator:'：',
          items:[{
              columnWidth:0.3,  //该列占用的宽度，标识为50％
              layout: 'form',
              border:false,
              items: [{                     //这里可以为多个Item，表现出来是该列的多行
                  cls : 'key',
                  xtype:'textfield',
                  fieldLabel: '用户名',
                  name: 'name',
                  anchor:'90%'
              }]
          },{
              columnWidth:0.3,
              layout: 'form',
              border:false,
              items: [{
                  cls : 'key',
                  xtype:'textfield',
                  inputType:'password',
                  fieldLabel: '口令',
                  name: 'passwd',
                  anchor:'90%'
              }]
          },{
              columnWidth:0.3,
              layout: 'form',
              border:false,
              items: [{
                  cls : 'key',
                  xtype:'textfield',
                  inputType:'password',
                  fieldLabel: '口令',
                  name: 'passwd',
                  anchor:'90%'
              }]
          }]
      }]
  }); 
   
    var form2 = new Ext.FormPanel({
     labelAlign: 'left',
     renderTo:'b',
     title: '表单例子',
     buttonAlign:'right',
     bodyStyle:'padding:5px',
     width: 600,
     frame:true,
     labelWidth:80,
  items: [
  /** 第一行 */
  {
   layout:'column',
         border:false,
         labelSeparator:'：',
         items:[{
             columnWidth:.5,
             layout: 'form',
             border:false,
             items: [{
                 xtype:'textfield',
                 fieldLabel: '姓名',
                 name: 'name',
                 anchor:'90%'
             }]
         },{
            columnWidth:.25,
            layout: 'form',
            border:false,
            items: [{
                style:'margin-top:5px',
                xtype:'radio',
                fieldLabel: '性别',
                boxLabel:'男',
                name: 'sex',
                checked:true,
                inputValue:'男',
                anchor:'95%'
            }]},{
            columnWidth:.25,
            layout: 'form',
            labelWidth:0,
            labelSeparator:'',
            hideLabels:true,
            border:false,
            items: [{
                style:'margin-top:5px',
                xtype:'radio',
                fieldLabel: '',
                boxLabel:'女',
                name: 'sex',
                inputValue:'女',
                anchor:'95%'
            }]}
        ]},
  /** 第二行 */
  {
   layout:'column',
         border:false,
         labelSeparator:'：',
         items:[{
            columnWidth:.5,
            layout: 'form',
            border:false,
            items: [{
                xtype:'datefield',
                fieldLabel: '出生日期',
                name: 'birthday',
                anchor:'90%'
            }]},{
            columnWidth:.5,
            layout: 'form',
            border:false,
            items: [{
                xtype:'combo',
                store: new Ext.data.SimpleStore({
                      fields: ["retrunValue", "displayText"],
                      data: [[1,'小学'],[2,'初中'],[3,'高中'],[4,'中专'],[5,'大专'],[6,'大学']]
                   }),
                valueField :"retrunValue",
                displayField: "displayText",
                mode: 'local',
                forceSelection: true,
                blankText:'请选择学历',
                emptyText:'选择学历',
                hiddenName:'education',
                editable: false,
                triggerAction: 'all',
                allowBlank:false,
                fieldLabel: '学历',
                name: 'education',
                anchor:'90%'
            }]}
        ]}
  
  ],
  buttons: []
 });
  });
    </script>
  </head>
  <body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
    <div id="e"></div>
    <div id="f"></div>
    <div id="g"></div>
    <div id="h"></div>
  </body>
</html>

完整的GridPanel也有了，我现在需要将它组装到后台管理中去。现在要求点击一下左边Tree中的“人员信息”节点，右边的TabPanel就显示出与之对应的GridPanel。最简单的方法就是在TabPanel的html属性（应该可以这么叫吧）中使用iframe来打开另一个用于显示GridPanel的页面，相关代码如下：

var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人员信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="UserListGridPanel.jsp"></iframe>'
});
}
tab.setActiveTab(n);
}
}
});

这种做法虽然很简单，但是又带来两个问题：
1.页面会刷新
2.UserListGridPanel.jsp页面中也必须加载庞大的ExtJS库
当然也有办法解决了，可以使用autoLoad来解决。修改上面的代码：

var c1=new Ext.tree.TreeNode({
id:'c1',
text:'人员信息',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = tab.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = tab.add({
'id':node.id,
'title':node.text,
closable:true,  //自动载入UserListGridPanel.jsp页面，该页面含有JavaScript，不缓存
autoLoad:{url:'UserListGridPanel.jsp',scripts:true,nocache:true}
});
}
tab.setActiveTab(n);
}
}
});

用了之后我又头大了，正常的话应该是如图下图所示。

可现在得到的却是下面这种结果。

想来想去，改来改去，最后我猜想应该是渲染的时候出问题了，上面两种方式中UserListGridPanel的renderTo属性一直都是Ext.getBody()，可是显示结果却不一样，也就是说两种情况下的Ext.getBody()不是同一个对象（OOP习惯了，什么都是对象O(∩_∩)O哈哈~）。第一种方式中Ext.getBody()指的就UserListGridPanel.jsp，而第二种方式中Ext.getBody()指的则是main.jsp。
于是试着在UserListGridPanel.jsp中创建一个id为“UserListGridPanel”的div，然后修改rederTo属性为Ext.get(‘UserListGridPanel’)，看来猜的没错，这样改确实可以。可是页面又变成下面这样了：

我快抓狂了…
再次把JS翻来覆去的改了N遍，得到的结果还是那样…
可是单独运行UserListGridPanel.jsp却是正常的啊！突然想到了点什么，上面不是说用autoLoad时，被载入的页面中可以不用再载入ExtJS库吗？而我现在的UserListGridPanel.jsp中还载入了ExtJS库，会不会和main.jsp中的发生冲突了？
结果当然不言而喻了。

http://www.extjs.com/

ExtJs中文站

http://www.ajaxjs.com/examples/

一起EXT论坛

http://www.17ext.com/

EXT新手建议

http://www.javaeye.com/topic/179990

Meetrice EXT JS 编程资料馆

http://www.cnblogs.com/meetrice/category/137349.html

Justin Blog
http://blog.csdn.net/huoyanxueren/archive/2008/07.aspx

小肖的专栏

http://blog.csdn.net/impeller/category/361408.aspx

谦虚的天下

http://www.cnblogs.com/qianxudetianxia/tag/ExtJs2%ef%bf%a50/

小庄
http://www.cnblogs.com/xiaozhuang/archive/2007/12/07/987087.html