Ext.onReady(function(){} )函數的作用域分析(1)

Ext.onReady(function(){
     
      var genResultDelete = function(){
        alert('delete') ;
      }

      var renderResult = function(value,cellmeta,record,rowIndex,columnIndex,store){
          var s = "<a  href='#' onclick='genResultUpdate(\""+ rowIndex +"\")'>修改</a>" ;
            s+= "     <a  href='javascript:genResultDelete(\""+record.data['id'] +"\")' onclick=''>刪除</a>" ;
        return s;
    }; 


       var adviserCm = new Ext.grid.ColumnModel([ //new Ext.grid.RowNumberer(),
                                           {header:'班主任編號',dataIndex:'id',sortable:false},
                                           {header:'姓名',dataIndex:'name',sortable:false},
                                           {header:'登錄帳號',dataIndex:'account',sortable:false},
                                           {header:'密碼',dataIndex:'password' },
                                           {header:'手機號',dataIndex:'mobile',sortable:false},
                                           {header:'email',dataIndex:'email',sortable:false},
                                           {header:'所屬學科',dataIndex:'discipline.name',sortable:false},
                                           {header:'狀態',dataIndex:'status',renderer:renderStatus},
                                           {header:'操作',dataIndex:'id',renderer:renderResult }
                                          ]);



 var adviserStore = new Ext.data.Store({
            proxy:new Ext.data.HttpProxy({url:'<%=request.getContextPath()%>/system/useradviser/query.do?time=' + (new Date).getTime()}),
            reader:new Ext.data.JsonReader({
                  totalProperty:'totalCount',
                  root:'data'
          },[
                 {name:'id'},
                  {name:'account'},
                  {name:'discipline.id'},
                  {name:'discipline.name'},
                  {name:'name'},
                  {name:'password'},
                  {name:'mobile'},
                  {name:'email'},
                  {name:'status'}
                ]),
            remoteSort:true
      });



var adviserGrid = new Ext.grid.GridPanel({
                              id:'adviser-grid',
                            title:'班主任列表',
                            store:adviserStore,
                            region:'center',
                            width:300,
                            cm:adviserCm,
                            sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
                            bbar:[
                                    new Ext.PagingToolbar(
                                    {
                                        pageSize:20,
                                        store:adviserStore,
                                        displayInfo:true,
                                        displayMsg:'顯示第{0}條到{1}條記錄,一共{2}條',
                                        emptyMsg:"沒有記錄"
                                    })]
                        })  ;

      });

上面是一個使用Extjs3.0 API寫的一個班主任列表的頁面的JS代碼，頁面效果如下：

 當點擊頁面上的“刪除”按鈕時，JS會提示“缺少對象”錯誤(即genResultDelete 函數找不到)，但如果把 Ext.onReady(function(){} )  內部定義的

    var genResultDelete = function(){
     　　alert('delete') ;
    }  改為下面方式（即去掉var關鍵字)就能找到genResultDelete函數

     genResultDelete = function(){
     　　alert('delete') ;
    }

    對於這個問題，這里先做一個簡單的分析：

    這是由於這個函數調用是來自Ext.onReady(function(){} )外部，也就是說點“刪除”按鈕時，會觸發它的單擊事件，此時這個調用是由dom元素發出，調用源來自於Ext.onReady(function(){} )外部，在Ext.onReady(function(){} )外部只能訪問其全局變量，不能訪問到Ext.onReady(function(){} )內的var方式定義的局部變量。深層次的分析將另寫博客分析。