extJS-动态改变baseParams

动态参数赋值

最新推荐文章于 2019-07-23 07:30:17 发布

最新推荐文章于 2019-07-23 07:30:17 发布 · 449 阅读

文章标签：

#EXT #项目管理 #JSP #教育

web前端专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个具体场景下如何实现双击导航栏树节点时，动态更新查询参数的方法。通过监听树节点的双击事件，获取节点ID并将其赋值给查询参数，实现了开班计划列表界面的动态查询。

项目中遇到一个问题：双击导航栏树节点，根据该树节点的属性ID在开班计划列表界面上查询。见下图：

1.难点：怎样实现基础参数的动态赋值？

1.1逻辑分析

初次加载页面时，没有节点被选中，查询store的baseParams应该不赋值。

有节点被选中时，查询store的baseParams应该被赋予相应的值。

2.解决思路

初次加载页面时，没有节点被选中，查询store的baseParams赋值为0，查询不到任何结果。

有节点被选中时，双击树节点时，改变查询store的baseParams为应该被赋予相应的值。

3.代码

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);
				
				_storeJwClassInit.on('beforeload',function(){
				      Ext.apply(
				      this.baseParams,
				      {
				           	subjectID:subjectID
				      });
				});
				
				_storeJwClassInit.removeAll();
				_storeJwClassInit.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:pageWidth,
    	height:pageHeight,
    	items:[_treeItem],
    	autoScroll:true
	});

	_panelOrg.render("_panelItemDiv");
	_rootItem.reload();

//初次加载时
 _storeJwClassInit.load({
	params:
		{
			start:0,
			limit:20
		}
});
	
	
_storeJwClassInit.on('beforeload',function(){
	Ext.apply(
		this.baseParams,
	      {
	           	subjectID:0
	      });
	});