点击树节点在主面板里使用load方法调用一个jsp页面。被调用的jsp页面里面有个gridpanel。单独访问这个被调用的页面可以正常显示gridpanel，但是在主页面中无论如何也无法显示。。。
代码如下
主页面的代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all-debug.js"></script> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; // 配置树形菜单 var root = new Ext.tree.TreeNode();// var wareConsoles = new Ext.tree.TreeNode({
// text : '进库 / 出库操作'
//
// });var inWareHouse = new Ext.tree.TreeNode({ text : '进库操作', url:'whconsoler.jsp' }); var outWareHouse = new Ext.tree.TreeNode({ text : '出库操作' });// wareConsoles.appendChild(inWareHouse);
// wareConsoles.appendChild(outWareHouse);var wareManager = new Ext.tree.TreeNode({ text : '仓库信息管理' }); root.appendChild(inWareHouse); root.appendChild(outWareHouse); root.appendChild(wareManager); var menuPanel = new Ext.tree.TreePanel({ border : false, root : root, rootVisible : false, hrefTarget : 'mainPanel', listeners : { click : function(node, e) { mainPanel.load({ url : node.attributes.url, script : true, callback:function(){ mainPanel.setTitle(node.text); } }); } } }); // 配置主面板 new Ext.Viewport({ layout : 'border', items : [// 添加菜单面板 { title : '系统功能菜单', region : 'west', split : true, width : 250, items : menuPanel }, // 添加住面板 { frame : false, region : 'center', id : 'mainPanel', title:'系统说明', autoLoad:'about.html', }] }); var mainPanel = Ext.getCmp('mainPanel'); }); </script> </body></html>
被调用的页面代码如下
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>inwarehouse</title>
<link href="extjs/resources/css/ext-all.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
</head><body>
<script type="text/javascript">
Ext.onReady(function(){
//创建表格数据
var data = [[1,'张三',29],[2,'李四',30],[3,'王五',27],[4,'赵六',28]];
//创建记录类型Person，mapping值为字段值对应数组中数据的索引位置
var Person = Ext.data.Record.create([
{name: 'personId',mapping: 0},
{name: 'personName',mapping: 1},
{name: 'personAge',mapping: 2}
]);
//创建Grid表格组件
var grid = new Ext.grid.GridPanel({
title : 'Ext.grid.RowSelectionModel',
applyTo : 'grid-div',
width:330,
height:180,
frame:true,
viewConfig : {
autoFill : true
},
tbar : [{
text : '查询选择结果',
handler : function(){
var msg = '';
var cell = grid.getSelectionModel().each(function(rec){
msg = msg + rec.get('personName') + '\n';
});
alert(msg);
}
}],
sm : new Ext.grid.RowSelectionModel(),//设置行选择模式
store: new Ext.data.Store({//配置数据集
reader: new Ext.data.ArrayReader({id:0},Person),
data: data
}),
columns: [//配置表格列
{header: "id", width: 30, dataIndex: 'personId'},
{header: "姓名", width: 80, dataIndex: 'personName'},
{header: "年龄", width: 80, dataIndex: 'personAge'}
]
})
});
</script>
<div id="grid-div" style="width: 100%;height: 100%;border;1px #CCC dashed">
</div>
</body>
</html>
