Extjs,最好的javascript,js,ajax,Web前端开发框架，一看都会被它华丽的外表所吸引。

border布局是常见的布局样式，下面是一个实际项目的示例，比较简单，仅供初学者参考。



前两天遇到一个border布局的界面问题，如下：

west是一个tree a，center是一个tree b和一个Panel，如下图
界面要求：

点击左边树节点【培训项目】，打开右边的界面：包括一个树和一个panel。



功能要求：

点击右边树的节点，班型列表会根据树节点的ID进行查询，并显示相应的查询结果。



问题：

整个界面的右半部分怎样布局？



解决：

左边的tree就不用解释了，是哪里都能找到的样式。这里主要解释下右半部分的布局：

通常情况下，点击树节点，在布局的某个部分（常见的是center位置）打开一个界面的常用方式是：

contentEl : 'center1',   
html : '<iframe scrolling="auto" frameborder="0" width="100%"height="100%" src="classTypeNew.jsp"></iframe>'  

但这种方式不能在目前场景下使用，因为panel要能获得从tree b传递过来的参数，所以上面这种方式是不行的：classTypeNew.jsp无法获得tree b的节点ID。



建议采用如下方式：

1.整体采用border布局。tree a位于west，tree b和Panel位于center。

2.tree b和Panel采用border布局。tree b位于west，Panel位于center。