问个点击tree节点，左边生成tab的问题

Question

[code="java"]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
}[/code]
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代码如下：
[code="java"]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");
});
[/code]

Answer 1

根据你给的堆栈可以定位到是这样的层次：
[code="js"]
//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渲染...
[/code]
然后出错了...

查了下代码，selections.CheckboxModel并不是一个有效的UI组件（component），参考Ext的examples，发现它的用法已经变了：

[code="js"]
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()
});
[/code]

不同于Ext3.x，它不再即配置成sm又配置成column。