问题描述
listeners : {'itemclick' : function(view, record, item, index, e) {var text = record.get('text');var leaf = record.get('leaf');var hrefTarget = record.get('hrefTarget');if (leaf) {this.rightPanel.add({title : text,closable : true,autoLoad : {url : hrefTarget,scripts : true}}).show();}},scope : this}hrefTarget指向某jsp页面，jsp页面加载一个border布局的panel，panel中有一个grid，为什么加载tab时老是报错item is null？我跟踪了下出错的地方是ext-all-debug里addManagedListener里的这一行item.on(ename, fn, scope, options);看起来像是节点监听部分的item is null，为什么会这样呢？jsp页面的js代码如下：Ext.onReady(function() {Ext.define('Role', {extend : 'Ext.data.Model',fields : [ {name : 'id',type : 'string'}, {name : 'name',type : 'string'}, {name : 'isdefault',type : 'string'}, {name : 'status',type : 'string'}, {name : 'creatorid',type : 'string'}, {name : 'createdtime',type : 'string'}, {name : 'lastmodifierid',type : 'string'}, {name : 'lastmodifiedtime',type : 'string'}, {name : 'delflag',type : 'string'}, {name : 'remark',type : 'string'} ]});var dataStore = Ext.create('Ext.data.JsonStore', {pageSize : 15,model : 'Role',remoteSort : true,proxy : {type : 'ajax',url : '/smc_web/role.do?method=roleList',reader : {type : 'json',root : 'roles'}}});var dataPaging = Ext.create('Ext.PagingToolbar', {pageSize : 12,store : dataStore,displayInfo : true,displayMsg : '第 {0} – {1} 条数据，共 {2} 条数据',emptyMsg : "没有检索到数据…"});var sm = new Ext.selection.CheckboxModel();var nm = new Ext.grid.RowNumberer();var col = [ nm, sm, {header : '角色名称',width : 20,sortable : false,dataIndex : 'name'}, {header : '是否缺省',width : 20,sortable : false,dataIndex : 'isdefault'}, {header : '状态',width : 20,sortable : false,dataIndex : 'status'}, {header : '创建者',width : 20,sortable : false,dataIndex : 'creatorid'}, {header : '创建时间',width : 20,sortable : false,dataIndex : 'createdtime'}, {header : '最后修改者',width : 20,sortable : false,dataIndex : 'lastmodifierid'}, {header : '最后修改时间',width : 20,sortable : false,dataIndex : 'lastmodifiedtime'}, {header : '删除标志',width : 20,sortable : false,dataIndex : 'delflag'}, {header : '描述',width : 20,sortable : false,dataIndex : 'remark'} ];var rolePanel = Ext.create('Ext.panel.Panel', {autoWidth : true,height : 500,layout : 'border',border : false,items : [ {title : '查询',region : 'north',xtype : 'panel',height : 80,autoWidth : true,collapsible : true}, {title : '操作',region : 'center',xtype : 'panel',height : 80,collapsible : true,id : 'west-region-container',layout : 'fit'}, {title : '角色列表',region : 'south',xtype : 'grid',border : false,//layout : 'fit',height : 340,columns : col,store : dataStore,sm : sm,//headerAsText : false,bbar : dataPaging} ]});rolePanel.render("rolePanel");}); 问题补充：clue 写道
解决方案
根据你给的堆栈可以定位到是这样的层次：//render(container=Object { dom=div#rolePanel, id="rolePanel", defaultUnit="px", 更多...}, position=undefined)ext-all-debug.js (第 15875 行) rolePanel.render("rolePanel");//renderItems(items=[Object { initialConfig={...}, title="角色列表", orientation="horizontal", 更多...}, Object { initialConfig={...}, pageSize=15, store={...}, 更多...}, Object { initialConfig={...}, items={...}, border=true, 更多...}], target=Object { dom=div#gridpanel-1083.x-panel, id="gridpanel-1083", defaultUnit="px", 更多...})ext-all-debug.js (第 23844 行) grid render// renderItems(items=[Object { initialConfig={...}, events={...}, id="rownumberer-1068", 更多...}, Object { initialConfig={...}, events={...}, modes={...}, 更多...}, Object { initialConfig={...}, width=20, sortable=false, 更多...}, 8 更多...], target=Object { dom=div#ext-gen1159.x-box-inner, id="ext-gen1159", defaultUnit="px", 更多...})ext-all-debug.js (第 20686 行) 列相关渲染(第一个是rownumberer，第二个是sm...// renderItem(item=Object { initialConfig={...}, events={...}, modes={...}, 更多...}, target=Object { dom=div#ext-gen1159.x-box-inner, id="ext-gen1159", defaultUnit="px", 更多...}, position=1)ext-all-debug.js (第 20718 行) sm渲染...然后出错了...查了下代码，selections.CheckboxModel并不是一个有效的UI组件（component），参考Ext的examples，发现它的用法已经变了： var sm = Ext.create('Ext.selection.CheckboxModel'); var grid2 = Ext.create('Ext.grid.Panel', { store: getLocalStore(), selModel: sm, columns: [ {text: "Company", width: 200, dataIndex: 'company'}, {text: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {text: "Change", dataIndex: 'change'}, {text: "% Change", dataIndex: 'pctChange'}, {text: "Last Updated", width: 135, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ], columnLines: true, width: 600, height: 300, frame: true, title: 'Framed with Checkbox Selection and Horizontal Scrolling', iconCls: 'icon-grid', renderTo: Ext.getBody() });不同于Ext3.x，它不再即配置成sm又配置成column。
解决方案二：
看样子是调用mon（Ext4中又有别名addManagedListener）时，目标组件为空导致出错，但你的代码里又没看到，所以应该是Ext自己的代码，可能是其它原因导致它出错的。你可以继续向上追溯，firebug右边可以看到调用堆栈的，一层层往上找，并随时关注this指向的组件是哪个（可以通过访问initialConfig的方式得到创建时的配置），这样就能分析出是哪一步出的问题。如果你不能确认，到时候把调用堆栈发上来看看