ExtJS布局之border实例【DOC精选】.docVIP

ExtJS布局之border实例 border布局是常见的布局样式，下面是一个实际项目的示例，比较简单，仅供初学者参考。 ? 前两天遇到一个border布局的界面问题，如下： west是一个tree a，center是一个tree b和一个Panel，如下图 ?? 界面要求： 点击左边树节点【培训项目】，打开右边的界面：包括一个树和一个panel。 ? 功能要求： 点击右边树的节点，班型列表会根据树节点的ID进行查询，并显示相应的查询结果。 ? 问题： 整个界面的右半部分怎样布局？ ? 解决： 左边的tree就不用解释了，是哪里都能找到的样式。这里主要解释下右半部分的布局： 通常情况下，点击树节点，在布局的某个部分（常见的是center位置）打开一个界面的常用方式是： ? Js代码 contentEl?:?center1, ?? html?:?iframe?scrolling=auto?frameborder=0?width=100%height=100%?src=classTypeNew.jsp/iframe?? 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。 ? 示例代码： Js代码 /** ? ?????*?班型管理部分 ? ?????*/?? ????var?_JwSales?=?new?Ext.Panel({ ?? ????????region?:?center, ?? ????????collapsible:true,??????????????? ?? ????????items:[_gridStudyClassType,_panelStudyClassTypeInf,_panelStudyClassTypeNodes], ?? ???????? ?? ????????listeners:{ ?? ????????????show:function(){ ?? ???????????? ?? ????????????????_panelStudyClassTypeInf.getForm().reset(); ?? ???????????????? ?? ????????????????_sessionStore.load(); ?? ???????? ?? ????????????????var?_record?=?_sessionStore.getAt(0); ?? ???????????????? ?? ????????????????Ext.getCmp(iStudyClassTypeOprUserName).setValue(_record.get(userName)); ?? ????????????????Ext.getCmp(iStudyClassTypeOprUserId).setValue(_record.get(userId)); ?? ????????????} ?? ????????}, ?? ???????? ?? ????????buttons:[ ?? ????????????{ ?? ????????????????text:保存, ?? ???????????????? ?? ????????????????listeners:{ ?? ????????????????????click:function(){ ?? ???????????????????? ?? ????????????????????????var?stId?=?Ext.getCmp(iStudyClassTypeStId).getValue(); ?? ???????????????????? ?? ????????????????????????if(_panelStudyClassTypeInf.getForm().isValid()) ?? ????????????????????????{ ?? ????????????????????????????var?arrayInfKey?=?getArrayStudy