日期:2014-05-16  浏览次数:20343 次

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

  ]
})



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