Extjs ie6/七/8兼容

Extjs ie6/7/8兼容
大家在开发时很容易遇到ie版本的兼容问题。
我这里也碰到了几个这样的问题。
1.就是form 表单排列，只能竖排。
Exception Code:

var form = new Ext.form.FormPanel({  layout : 'column',  items : [     {        xtype:'panel',        layout:'form',        items:{             xtype:'textfield',             fieldLabel :'text1',             width : 100        }     },     {        xtype:'panel',        layout:'form',        items:{             xtype:'textfield',             fieldLabel :'text2',             width : 100        }     }  ]})

造成这个原因的可能性是你没有在html中加doctype.但是，这不是很规范的写法。
正确写法:

var form = new Ext.form.FormPanel({  layout : 'column',  items : [     {        xtype:'panel',        columnWidth:.5,        layout:'form',        items:{             xtype:'textfield',             fieldLabel :'text1',             width : 100        }     },     {        xtype:'panel',        columnWidth:.5,        layout:'form',        items:{             xtype:'textfield',             fieldLabel :'text2',             width : 100        }     }  ]})

以上代码，不管在什么浏览器中都可以显示，也不需要加html 的 doctype;
我比较喜欢灵活一点的代码，比较说页面改变时，Ext会重新渲染所有容器及组件。如果用width就更好了。
var form = new Ext.form.FormPanel({
  layout : 'column',
  items : [
     {
        xtype:'panel',
        width:150,//此处应该为组件width + labelWidth + 容器占宽
         //我使用的是ext2.0 为5  ext3.0 为10
        //可能不最适合的宽度
        layout:'form',
        items:{
             xtype:'textfield',
             fieldLabel :'text1',
             width : 100
        }
     },
     {
        xtype:'panel',
        width:150,
        layout:'form',
        items:{
             xtype:'textfield',
             fieldLabel :'text2',
             width : 100
        }
     }

  ]
})



以上纯属个人意见，大家可以各抒已见。

查看更多 下一篇