ExtJS布局之border实例

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。

 

示例代码：

/**
	 * 班型管理部分
	 */
	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 = getArrayStudyClassTypeKey();
							
							var arrayInfValue = getArrayStudyClassTypeValue();
							
							var arrayNodesKey = getStudyTypeNodesKey();
							
							var arrayNodesValue = getStudyTypeNodesValue();							
														
							if(stId == "")
							{
								//添加
								
								MSClassType.isDo4Add(Ext.getCmp("iItemCombo").getValue(),
														"stName",
															Ext.getCmp("iStudyClassTypeStName").getValue(),
									function addRtn(rtn)
									{
										if(rtn == "true")
										{
											MSClassType.createEntity(
												arrayInfKey,arrayInfValue,
												arrayNodesKey,arrayNodesValue,
												
												function createEntityRtn(rtnCreate){
									
													if(rtnCreate == "success")
													{
														Ext.MessageBox.alert("信息提示","添加成功，点击返回！");
												
														_storeStudyClassType.load({params:{start:0,limit:6}});
														
														Ext.MessageBox.alert("信息提示","添加成功，点击返回！");
														
														addHandler();
													}
													else
													{
														Ext.MessageBox.alert("信息提示","添加失败，请与系统管理员联系！");
													}
												}
											);
										}
										else
											Ext.getCmp("iStudyClassTypeStName").markInvalid("已经存在的班型名称");
									}
								);
							}
							else
							{
								if(Ext.getCmp("iStudyClassTypeStatus").getValue() != "1")
								{
									Ext.MessageBox.alert("信息提示","已经提交或删除，无法修改！");
									
									return ;
								}
								
								/*
								 * arrayTextbooksKey,arrayTextbooksValue,
												arrayEmsKey,arrayEmsValue,
												arrayGiftsKey,arrayGiftsValue,
												arrayPsKey,arrayPsValue,
								 * */
								
								//修改
								MSClassType.isDo4Edit(Ext.getCmp("iItemCombo").getValue(),stId,
														"stName",
															Ext.getCmp("iStudyClassTypeStName").getValue(),
									function editRtn(rtn)
									{
										if(rtn == "true")
										{
											MSClassType.updateEntity(
												stId,arrayInfKey,arrayInfValue,
												arrayNodesKey,arrayNodesValue,
												
												function updateEntityRtn(rtnUpdate){
									
													if(rtnUpdate == "success")
													{
														Ext.MessageBox.alert("信息提示","更新成功，点击返回！");
												
														_storeStudyClassType.load({params:{start:0,limit:9}});
														
														Ext.MessageBox.alert("信息提示","更新成功，点击返回！");
													}
													else
													{
														Ext.MessageBox.alert("信息提示","更新失败，请与系统管理员联系！");
													}
												}
											);
										}
										else
											Ext.getCmp("iStudyClassTypeStName").markInvalid("已经存在的班型名称");
									}
								);
							}
						}
					}
				}
			},
			{
				text:"提交",
				handler:submitHandler
			},
			{
				text:"清空",
				handler:addHandler
			}
		]
	});


var _treeItem = new Ext.tree.TreePanel({
		
		title : '导航栏',
		region : 'west',
		split : true,
		border : true,
		bodyStyle: 'background-color:#FFFFFF',
		collapsible : true,
		autoScroll : true,
		width : 180,
		minSize : 180,
		maxSize : 280,
		enableDD : true,
		
		el:"_treeItemDiv",
		id:"_treeItem",
		loader : new Ext.tree.TreeLoader({dataUrl :'itemData.jsp'}),
		
		listeners:{
			'dblclick':function(node,e){
				var subjectID = node.attributes.id;//科目ID
				alert("科目ID = "+ subjectID);
				
				_storeStudyClassType.removeAll();
				_storeStudyClassType.load({params:{start:0,limit:20,subjectID:node.attributes.id}});
			},
			
        	"contextmenu":function(node,e){
            	
            	if(node.attributes.id == "0")
            	{
            		var nodemenu=new Ext.menu.Menu({
                  
            		items:[
            			{
                        	text:"添加项目",
        					iconCls:'icon-table-add',
       						handler:function(){
         			 			
       							_winBaseItemOpr.setTitle("项目管理-添加");
       							_winBaseItemOpr.show();
       							
       							_panelBaseItemOpr.getForm().reset();		
								
       							Ext.getCmp("iStudyBaseItemSuperiorItemId").setValue(node.attributes.id);
       							Ext.getCmp("iStudyBaseItemShowIndex").setValue(node.childNodes.length+1); 
              				}
          				}
                        ]
        			});
        		
        			nodemenu.showAt(e.getPoint());
            	}
            	else
            	{
            		var nodemenu=new Ext.menu.Menu({
                  
            		items:[
            			{
                        	text:"删除项目",
        					iconCls:'icon-minus',
       						handler:function(){
         			 			
       							
              				}
          				},{
                        	text:"修改项目",
        					iconCls:'icon-table-edit',
       						handler:function(){
         			 			
       							_winBaseItemOpr.setTitle("项目管理-浏览");
       							_winBaseItemOpr.show();
       							
       							_panelBaseItemOpr.getForm().reset();
       							
       							Ext.getCmp("iStudyBaseItemItemId").setValue(node.attributes.id);
       							Ext.getCmp("iStudyBaseItemItemName").setValue(node.attributes.text);
       							Ext.getCmp("iStudyBaseItemSuperiorItemId").setValue(node.attributes.superiorItemId);
       							Ext.getCmp("iStudyBaseItemShowIndex").setValue(node.attributes.showIndex);
       							Ext.getCmp("iStudyBaseItemInf").setValue(node.attributes.inf);
              				}
          				}]
        			});
        		
        			nodemenu.showAt(e.getPoint());
            	}
         	}
		}
	});

 	var _rootItem = new Ext.tree.AsyncTreeNode({text:"尚德教育在线",id:"0"});
 	
	_treeItem.setRootNode(_rootItem);	
	
	var _panelOrg = new Ext.form.FormPanel({
    	collapsible:true,
    	frame:true,
    	width:bodyWidth,
    	height:bodyHeight,
    	items:[_treeItem],
    	autoScroll:true
	});

	_panelOrg.render("_panelItemDiv");
	
	_rootItem.reload();
	
	
	/**
	 * 生成一个ViewPort，采用Border布局，保留天地栏，左中栏
	 */
	var viewport = new Ext.Viewport({
		layout : 'border',
		items : [_treeItem, _JwSales]
	});