论坛首页 → AJAX版 → EXT →

为什么ext在firefox里显示正确的网页在ie里就不行了呢

浏览 1526 次
锁定老贴子 主题：为什么ext在firefox里显示正确的网页在ie里就不行了呢
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • leerq
  • 等级: 初级会员
  • 用户头像
  • 文章: 5
  • 积分: 12
最后更新时间：2007-08-30 关键字: ext在firefox里显示正确的网页在ie里就不行了呢
以下是我写的jsp与ext代码， 在firefox里是好的， 可是IE打开就有问题
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title></title>

<script type="text/javascript"
src="../../ext/adapter/jquery/jquery.js"></script>
<script type="text/javascript"
src="../../ext/adapter/yui/yui-utilities.js"></script>

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

<script type="text/javascript" src="../../js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/json.js"></script>

<link rel="stylesheet" type="text/css"
href="../../ext/resources/css/ext-all.css" />
</head>
<body>


<script type="text/javascript">
            //表示页面拥有的按钮
var addButton = true;
var delButton = true;
    var updateButton = true;
    var queryButton = true;
//表示页面进行后台交互或者跳转时候的url
            var urlListStrParam='../../dic/list.htm';
var urlQueryStrParam='code-type-query.jsp';
var urlAddStrParam ='';
var urlDelStrParam ='';
var urlUpdateStrParam ='';

</script>
<script type="text/javascript" src="../../js/codeType-Manager.js"></script>
               <div id="detail-dlg" style="visibility:hidden;">
<div class="x-dlg-hd">
编辑
</div>
<div class="x-dlg-bd">

<div id="center" style="width: 600px;height: 300px;">

</div>

</div>
</div>

                <div id="codeTypeEditForm"/>
<div id="htmlPanelToolbar"/>
                <div id="htmlPanelGrid" class="x-layout-inactive-content"/>
</body>
</html>


/*
*************************************
* @enhancements
*************************************
* Ext.PagingToolbar.prototype.refresh - disables or enables all buttons
*************************************
*/
Ext.apply(Ext.PagingToolbar.prototype, {
  refresh: function (enable) {
var d = this.getPageData(), ap = d.activePage, ps = d.pages;
    this.first.setDisabled( enable ? ap == 1  : !enable );
    this.prev.setDisabled ( enable ? ap == 1  : !enable );
    this.next.setDisabled ( enable ? ap == ps : !enable );
    this.last.setDisabled ( enable ? ap == ps : !enable );
    this.field.dom.disabled  = !enable;
    this.loading.disabled    = !enable;
    this.loading.el.disabled = !enable;
  }
});

Ext.data.WondersStore = function(config){
Ext.data.WondersStore.superclass.constructor.call(this, config);
};

Ext.extend(Ext.data.WondersStore, Ext.data.Store, {

}
);

//定义了一些私有变量的初始值
var Item = function(){
  var layout;
  var toolbar;
  var grid, gridFoot, gridPaging, gridContextMenu;
  var dsGrid, dsSession, cm;
  var panelToolbar, panelGrid;
  var detailDialog;
  var codeTypeEditForm;

  var CodeType = Ext.data.Record.create([
       {name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'description', type: 'string'},
{name: 'systemTypeStr', type: 'bool'}
  ]);
 
  return {
 
       /*
       *************************************
       * init
       *************************************
       */
      init : function(){
        Ext.QuickTips.init();
       


//-------------------------------------------------------------Store-------------------------------------------------------------
//Ext.data.Store扩展
this.dsGrid = this.initDsGrid(urlListStrParam);

//-------------------------------------------------------------Widget-------------------------------------------------------------

//Grid
this.dsGrid.load({params:{start:0, limit:10}});

       
        //form
        this.codeTypeEditForm = new Ext.form.Form({});
        this.codeTypeEditForm.render('codeTypeEditForm');

//定义Grid的ColumnModel对象
this.cm = this.initColumnModel(this.renderCheckBox,this.formatBoolean,this.renderEdit);

       //定义EditorGrid
       var htmlDivId = 'htmlPanelGrid';
       //new htmlPanelGrid
       this.grid = this.initGrid(this.dsGrid,this.cm,htmlDivId);
 
       this.grid.render();


//PagePanel(Grid的分页面板)
        this.gridPaging = this.initGridPaging(this.grid,this.dsGrid);

//toolbar(Grid的工具栏)new htmlPanelToolbar
        this.toolbar = this.initToolBar(this.grid,this.dsSession);
       
        //new htmlPanelToolbar
        this.panelToolbar= new Ext.ContentPanel('htmlPanelToolbar');

        this.panelGrid = this.initPanelGrid(this.grid);


//-------------------------------------------------------------Layout-------------------------------------------------------------

        this.layout = this.initBorderLayout(this.panelToolbar,this.panelGrid);

        //定义详细信息弹出框面板new detailDialog
        this.detailDialog = this.initDetailDialog();   
//alert('WW1__' + Ext.get("htmlPanelGrid"));
        //alert('WW1__' + Ext.get("htmlPanelToolbar"));
        //alert('WW1__' + Ext.get("codeTypeEditForm"));
        //alert('WW1__' + Ext.get("detail-dlg"));   
       },
   
    //-------------------------------------------------------------一些共有方法-------------------------------------------------------------
       initDsGrid: function(urlListStrParam){
             var dsGrid = new Ext.data.WondersStore({
             proxy: new Ext.data.HttpProxy({ url: urlListStrParam }),
reader: new Ext.data.JsonReader(
{
start: 'currentPageNo',
root: 'result',//data
totalProperty: 'totalSize',//totalCount
id: 'id'
},
                        [
{name: 'id', mapping: 'id', type: 'int'},
{name: 'name', mapping: 'name'},
{name: 'systemTypeStr', mapping: 'systemTypeStr', type: 'bool'}

]
                      ),
                      remoteSort: false
            });
            return dsGrid;
       },

       initColumnModel: function(renderCheckBox,formatBoolean,renderEdit){
            cm = new Ext.grid.ColumnModel([
{header:"选择",dataIndex:"id", width:50, renderer: renderCheckBox, locked:false},
{header:"代码",dataIndex:"id",width:100,sortable: true, locked:false},
{header: "名称", width: 200,  dataIndex: 'name',sortable: true, locked:false,
editor: new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank: false
           }))
           },
{header: "是否属于系统大类", width: 200, sortable: true, locked:false, dataIndex: 'systemTypeStr',
renderer: formatBoolean,
editor: new Ext.grid.GridEditor(new Ext.form.Checkbox())
},
{header: "详情", width: 100, sortable: true, locked:false, dataIndex: 'id',
renderer: renderEdit
}

    ]);
            return cm;
        },        

        initGrid: function(dsGrid,cm,htmlDivId){
           var grid = new Ext.grid.EditorGrid(htmlDivId, {
             ds: dsGrid,
             cm: cm
           });
           return grid;
         }, 

         initGridPaging: function(grid,dsGrid){
            var gridFoot = grid.getView().getFooterPanel(true);
            var gridPaging = new Ext.PagingToolbar(gridFoot, dsGrid, {
          pageSize: 10,
          displayInfo: 1
  });
            return gridPaging;
         },

         initPanelGrid: function(grid){
             var panelGrid = new Ext.GridPanel(grid,
       {autoCreate: true,
        fitToFrame:true,
        autoScroll:true,
        //handlerContextMenu: App.onContextMenu,
        title:'列表',
        closable:false,
        disableTooltips: true
        }
        );
             return panelGrid;
          },

          initBorderLayout: function(panelToolbar,panelGrid){
      var layout=Ext.BorderLayout.create({
            north: {
              titlebar: false,
              collapsible: false,
              animate: false,
              split:false,
              initialSize:28
            },
            south: {
              title: '列表',
              titlebar: true,
              collapsible: true,
              animate: false,
              split:true,
              initialSize:500,
              tabPosition: 'bottom',
              alwaysShowTabs: true,
              closeOnTab: true,
              hideWhenEmpty: true
            },
            east: {
              title: '维护',
              titlebar: true,
              collapsible: true,
              animate: false,
              split:true,
              initialSize:400,
              tabPosition: 'bottom',
              alwaysShowTabs: true,
              closeOnTab: true,
              hideWhenEmpty: true
            },
            center: {
              title: 'Center Panel.',
              titlebar: false,
              closeOnTab: true
            }
          });
          layout.beginUpdate();
          layout.add('north', panelToolbar);//toolbar
          layout.add('center', panelGrid);
          layout.endUpdate();
    return layout; 
        },
   
      initDetailDialog: function(){
      
           var detailDialog=new Ext.LayoutDialog("detail-dlg", {
                        modal:true,
                        width:630,
                        height:350,//590
                        shadow:true,
                        minWidth:300,
                        minHeight:300,
                        proxyDrag: true,

                    center: {
                        autoScroll:true,
                        //tabPosition: 'top',
                        //closeOnTab: true,
                        alwaysShowTabs: false
                    }
                });  

          return detailDialog;
      },
   
   
      initToolBar: function(grid,dsSession){
      
       
        var toolbar = new Ext.Toolbar('htmlPanelToolbar');
      
        var item;
        toolbar.doRefresh = function (item) {
       
          if (item.refreshType == 'grid') {
             var ids = grid.getRecordId();
            if (item.idRequired) {
              if (ids) {
                item.enable();
              }
              else {
                item.disable();
                }
            }
            else {
              item.enable();
            }
          }

          if (item.refreshType == 'session') {
            if (dsSession.getCount() > 0) {
              item.enable();
            }
            else {
      item.el.removeClass("x-btn-pressed");
              item.disable();
            }
          }         
        };

        var buttons = new Array(addButton,delButton,updateButton,queryButton);
       
        //加载按钮到toolbar上
        for(var i =0 ;i<buttons.length;i++){
        if (buttons[i]!=null&&buttons[i]){
           this.addFunctionButton(toolbar,i)
        }
        };
        toolbar.addSeparator();
        this.addOtherButton(toolbar);
        toolbar.addSeparator();
       
        return toolbar;
      },
     
      addFunctionButton: function(toolbar,i){
         switch(i){
            case 3: toolbar.addButton({ id: 'btn_query', text: '查询', action: 'query', toolbar: toolbar, idRequired: false,
                              handler: this.action, cls: 'x-btn-text-icon btn_query', refreshType: 'grid', onRefresh: toolbar.doRefresh });
                              break;
            case 2: toolbar.addButton({ id: 'btn_edit', text: '更新', action: 'gridEdit', toolbar: toolbar, idRequired: true,
                               handler: this.action, cls: 'x-btn-text-icon btn_edit', refreshType: 'grid', onRefresh: toolbar.doRefresh });
                               break; 
            case 0:toolbar.addButton({ id: 'btn_create', text: '添加', action: 'gridAdd', toolbar: toolbar, idRequired: true,
                                  handler: this.action, cls: 'x-btn-text-icon btn_create', refreshType: 'grid', onRefresh: toolbar.doRefresh });
                               break;
            case 1:toolbar.addButton({ id: 'btn_delete', text: '删除', action: 'delete', toolbar: toolbar, idRequired: true,
                              handler: this.action, cls: 'x-btn-text-icon btn_delete', refreshType: 'grid', onRefresh: toolbar.doRefresh });
                               break;
            default: break;
         }
      },
     
      addOtherButton: function(toolbar){
      toolbar.addButton({ id: 'btn_app', action: 'app', toolbar: this.toolbar, region: 'center', toggleHandler: this.action,
                              cls: 'x-btn-icon btn_app', enableToggle: true, toggleGroup: 'app', pressed: false, tooltip: '<b>全屏</b><br/>全屏显示' });
        toolbar.addButton({ id: 'btn_app_split_horizontal', action: 'app_split_horizontal', toolbar: this.toolbar, region: 'south',
                                toggleHandler: this.action, cls: 'x-btn-icon btn_app_split_horizontal', enableToggle: true, toggleGroup: 'app', pressed: false, tooltip: '<b>上下拆分</b><br/>上下拆分' });
        toolbar.addButton({ id: 'btn_app_split_vertical', action: 'app_split_vertical', toolbar: this.toolbar, region: 'east',
                                toggleHandler: this.action, cls: 'x-btn-icon btn_app_split_vertical', enableToggle: true, toggleGroup: 'app', pressed: true, tooltip: '<b>左右拆分</b><br/>左右拆分' });
      },
   
    //设置boolean值
    formatBoolean : function (value){
        return value ? '是' : '否'; 
      },
     
      //设置选择行为delete的标识符
  selectGridRow : function (checkedId, index){
  var checked = document.getElementById(checkedId).checked;
  var record = Item.dsGrid.getById(checkedId);
     record.set('delete', checked);
     document.getElementById(checkedId).checked = checked;
    },
 
  //渲染选择框
  renderCheckBox : function(dataId){
  var index = Item.dsGrid.indexOfId(dataId) + 1;//onclick
  return "<input id='" + dataId + "' type='checkbox' class='chk' onclick='Item.selectGridRow(" + dataId + ", " + index + ")'> " + index;//
      },
     
      //渲染Image栏
      renderEdit : function(dataId){
  var index = Item.dsGrid.indexOfId(dataId) + 1;//onclick
  return "<a href='#' onclick='Item.refreshDetailDialog(" + dataId + ", this)'><img src='../../images/commander.gif' /></a>";
      },

    /*
       *************************************
       * @actions---提供了一些CRUD方法，供事件触发调用
       *************************************
       */
      action: function () {
        var args = arguments;
        if (args.length > 0 && args[0].action) {
          var action = args[0].action;
  if (action == 'query')            Item.actionQuery(args[0]);
  if (action == 'gridEdit')            Item.actionGridEditSubmit(args[0]);
  if (action == 'gridAdd')            Item.actionGridAddSubmit(args[0]);
  if (action == 'delete') Item.actionDeleteRecords(args[0]);
        }
      },
    //查询
      actionQuery: function () {
        Item.openPanel('', urlQueryStrParam);
  },
 
  //更新
  actionGridEditSubmit: function (){
var m = Item.dsGrid.modified.slice(0);
var jsonData = "[";
        for(var i = 0, len = m.length; i < len; i++){
if(!m[i].data["isNew"])
m[i].data["isNew"] = false;
var ss = JSON.stringify(m[i].data);
if ( i==0 )
           jsonData = jsonData + ss;
   else
jsonData = jsonData + "," + ss;
        }
jsonData = jsonData + "]";

//组织json格式数据，然后提交后台
Item.dsGrid.modified = [];//将修改过的记录置为空，如果不清空，则修改过的数据会一直保留

Item.codeTypeEditForm.submit({
        url:'../../dic/modifyGrid.htm?rand='+ Math.random(),
        params:{
modifiedData: jsonData
},
                        waitMsg:'保存...',
                        reset: false,
                        success: function(codeTypeEditForm, action) {
                        for(var i = 0, len = m.length; i < len; i++){
                        m[i].commit();
                        Item.dsGrid.load({params:{start:Item.gridPaging.cursor, limit:10}});
                        }
                        }
                    });
    },
   
    //添加
    actionGridAddSubmit: function (){
    var codeType = new CodeType({
                id: 0,
                name: '',
                systemTypeStr: false,
                isNew: true
            });
            Item.dsGrid.insert(0, codeType);
    },
     
      //删除
      actionDeleteRecords: function(){
      var deleteRecords = new Array;
      var count = Item.dsGrid.data.getCount();
      for (var i = 0; i < count; i++) {
var record = Item.dsGrid.data.itemAt(i);
if(record.get('delete')){
deleteRecords.push(record);
}
}
var len = deleteRecords.length;
if(len > 0){
        Ext.MessageBox.confirm('Message', '确定要删除吗?' , doDel2);
        }
        else{
        Ext.MessageBox.alert('Message', '请选择要删除的记录');
}

function doDel2(btn){
if(btn == 'yes'){
var jsonData = "[";
        for(var i = 0; i < len; i++){
//alert(m[i].data["name"]);
var ss = JSON.stringify(deleteRecords[i].data);
if ( i==0 )
           jsonData = jsonData + ss;
   else
jsonData = jsonData + "," + ss;
        }
jsonData = jsonData + "]";
Item.dsGrid.modified = [];//将修改过的记录置为空，如果不清空，则修改过的数据会一直保留
Item.codeTypeEditForm.submit({
        url:'../../dic/deleteGrid.htm?rand='+ Math.random(),
        params:{
deleteData:jsonData
},
                        waitMsg:'删除...',
                        reset: false,
                        success: function(codeTypeEditForm, action) {
                        for(var i = 0, len = deleteRecords.length; i < len; i++){
                        Item.dsGrid.remove( deleteRecords[i] );
                        Item.dsGrid.load({params:{start:Item.gridPaging.cursor, limit:10}});
                        }
                        }
                    });
}
}
      },
     
  /*
       *************************************
       * openPanel - 创建一个新的面板或者打开一个已经存在的面板
       *************************************
       */
      openPanel: function (id,url) {
        //var toolbar = this.toolbar;
        var region = this.getRegion();
       
        if (Ext.get('cp'+id)) {
  this.layout.getRegion(region).showPanel('cp'+id);
        }
        else {
          this.layout.beginUpdate();
        var title = id == '' ? '*' : id;
var cp = new Ext.ContentPanel('cp'+id, {autoCreate: true, fitToFrame:true, autoScroll:true, handlerContextMenu: Item.onContextMenu, title:title, closable:true, disableTooltips: true });
          var umgr = cp.getUpdateManager();
          umgr.loadScripts = true;
          umgr.setDefaultUrl(url);
          umgr.refresh();
         
          cp.getEl().setStyle('padding','20px');
          cp.on('activate', function() {
                              if (this.focusField) {
                                this.focusField.focus(true);
                              }       
                            });
          cp.on('deactivate', function() {});
          this.layout.add(region, cp);
          this.layout.endUpdate();
}
      },
     
       refreshDetailDialog: function(dataId, editObj,url){

       var layout = Item.detailDialog.getLayout();
layout.beginUpdate();

  if(layout.findPanel('center')){
            layout.remove('center','center');
           }             
            var cpt = new Ext.ContentPanel('center',{autoCreate: true, fitToFrame:true, autoScroll:true, title:'title', closable:true, disableTooltips: true });    
var umgr = cpt.getUpdateManager();
umgr.loadScripts = true;
umgr.setDefaultUrl('code-type-edit.jsp?rand='+ Math.random()+'&dataId='+dataId);
umgr.refresh();
layout.add('center', cpt);
   layout.endUpdate();
        Item.detailDialog.show(editObj);//Ext.get('btn_score').dom
        },  
 
  /*
       *************************************
       * getRegion - 返回一个Region
       *************************************
       */
      getRegion: function (asObj) {
        var region = '';
       
        if (this.toolbar.items.map.btn_app.pressed) {
          region = this.toolbar.items.map.btn_app.region;
        }
        if (this.toolbar.items.map.btn_app_split_horizontal.pressed) {
          region = this.toolbar.items.map.btn_app_split_horizontal.region;
        }
        if (this.toolbar.items.map.btn_app_split_vertical.pressed) {
          region = this.toolbar.items.map.btn_app_split_vertical.region
        }

        if (asObj) {
          return this.layout.getRegion(region);
        }
        else {
          return region;
        }
      }

    };
}();

Ext.onReady(Item.init, Item);
返回顶楼
   
  • leerq
  • 等级: 初级会员
  • 用户头像
  • 文章: 5
  • 积分: 12
最后更新时间：2007-08-30
有人帮忙解释一下firefox与ie在这方面的区别吗
返回顶楼
   
0 请登录后投票
  • movingboy
  • 等级: 二星会员
  • 用户头像
  • 文章: 526
  • 积分: 290
最后更新时间：2007-08-30
建议你猜测一下可能是哪段代码出错，把它注释掉，看看IE能否正常显示。如果不行就猜其它地方......如此反复找到出错的代码
有些firefox正常的写法在IE里确实可能有问题，最简单的办法就是用try { ... } catch (e) { ... }来屏蔽掉异常，不过后果就自己权衡了
返回顶楼
   
0 请登录后投票
  • lonelyblue
  • 等级: 初级会员
  • 用户头像
  • 文章: 294
  • 积分: 63
最后更新时间：2007-08-31
firebug 控制台里有没有错误信息？
返回顶楼
   
0 请登录后投票
  • redsnow_007
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 4
  • 积分: 0
  • 来自: 深圳
最后更新时间：2007-11-14
firefox 和 ie 的区别很大,有些对dom的操作方法不太一样.但是如果firefox调好,一般ie没有什么问题的,还有firefox有一定的融错能力,所以有时firefox下正常,ie下也会有错误,建议用alert语句缩小范围测试,你贴这样一大段代码,谁有心思看下去啊
返回顶楼
   
0 请登录后投票
  • afcn0
  • 等级: 一星会员
  • 用户头像
  • 性别:
  • 文章: 622
  • 积分: 170
  • 来自: 天津
最后更新时间：2007-11-14
楼上这样说就是不了解ie firefox,它们的DOM是99%一样的,虽然确实有些不同,但那几乎都是极其极端情况,为什么firefox没问题的代码一般在ie上面也没问题,这就是了,ie不仅支持标准写法,还自己有很多扩展,你在ie上面从来没意识到自己写的不是标准,ie也没告诉你,当然不会兼容firefox,不要总说什么兼容firefox的话,web就是web不是ie的web也不是firefox的web更不是opera safari的web,而是标准的web,只有遵从规范,才能确保所有浏览器都正常显示,总说兼容ie与firefox的话,好似web还分什么ie派和firefox派一样的,应该是写标准的web
返回顶楼
   
0 请登录后投票
  • timezz
  • 等级: 初级会员
  • 用户头像
  • 性别:
  • 文章: 10
  • 积分: 0
  • 来自: 上海
最后更新时间：2007-11-15
afcn0 写道
楼上这样说就是不了解ie firefox,它们的DOM是99%一样的,虽然确实有些不同,但那几乎都是极其极端情况,为什么firefox没问题的代码一般在ie上面也没问题,这就是了,ie不仅支持标准写法,还自己有很多扩展,你在ie上面从来没意识到自己写的不是标准,ie也没告诉你,当然不会兼容firefox,不要总说什么兼容firefox的话,web就是web不是ie的web也不是firefox的web更不是opera safari的web,而是标准的web,只有遵从规范,才能确保所有浏览器都正常显示,总说兼容ie与firefox的话,好似web还分什么ie派和firefox派一样的,应该是写标准的web


Ext对ie的兼容性显然没有对fox这么好，因为core developer都是用firebug来测试的，等待吧，ext现在还不成熟呢，hehe
返回顶楼
   
0 请登录后投票
  • afcn0
  • 等级: 一星会员
  • 用户头像
  • 性别:
  • 文章: 622
  • 积分: 170
  • 来自: 天津
最后更新时间：2007-11-15
不成熟的话,估计web消灭那一天,也成熟不了
返回顶楼
   
0 请登录后投票
论坛首页 → AJAX版 → EXT

跳转论坛:
JavaEye推荐