`

extJS-动态改变baseParams

阅读更多

项目中遇到一个问题:双击导航栏树节点,根据该树节点的属性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
	      });
	});

 

  • 大小: 85.3 KB
0
0
分享到:
评论

相关推荐

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    extjs-620-docs.zip

    extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档

    extjs extjs-basex.js

    extjs-basex.js extjs-basex.js extjs-basex.js

    extjs-4.1.1.zip

    在"extjs-4.1.1.zip"这个压缩包中,包含了ExtJS框架的4.1.1版本,这是一个成熟的版本,具有丰富的功能和优化的性能。 ExtJS的核心特性包括组件化设计、可定制的布局管理、强大的数据绑定机制以及一系列预设的UI组件...

    extjs-theme-bootstrap

    "extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题,它借鉴了 Bootstrap 的设计风格,让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架,由 Twitter 推出,主要用于构建响应式...

    extjs-v7.0-cmd

    extjs-cmd 脚手架安装包2 extjs-cmd 脚手架安装包3 extjs-cmd 脚手架安装包4

    extjs-4.1.1 ExtJs所有文档及库文件

    extjs-4.1.1 ExtJs所有文档及库文件,在官网下的,这个版本很好,放在这方便大家下载!

    extJs-5.0.1-gpl(part1)

    extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分

    extjs-core 3.0 beta版

    extjs-core 3.0 beta版extjs-core 3.0 beta版SDK extjs-core 3.0 beta版extjs-core 3.0 beta版

    extjs-653-docs.zip

    extjs-6.5.3离线API文档,是学习和开发的必要工具。希望有所帮助!

    Extjs--DWR做的动态树

    这篇博客文章"Extjs--DWR做的动态树"可能探讨了如何利用这两者结合来创建动态的树形数据结构,这种结构在很多Web应用中用于展示层次化的信息,比如文件系统、组织结构或导航菜单。 动态树在Web应用中是交互式的,...

    extjs-4.0.2框架

    ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。功能丰富,无人能出其右。...单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。

    ExtJS-4.2.6-src-926个类源码

    Ext JS 4.2.6.1811 Release Date: October 5, 2016 Version Number: 4.2.6.1811 ext-src class 926

    EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单等

    这个压缩包文件的内容看起来是一个完整的EXTJS项目,包含了数据库交互、动态树结构和菜单功能,并且集成了SpringMVC后端框架以及JDBC数据访问层。 1. **EXTJS动态树**: EXTJS的动态树(TreePanel)组件允许开发者...

    extjs-theme-bootstrap-master.zip

    "extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包,它集成了Bootstrap的样式,使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前,让我们先了解一下基础概念: 1. **ExtJS*...

    extjs-4.1.1官方免费版

    extjs-4.1.1为extjs官方免费版,解压之后引入对应的css和js即可使用

    ExtJS-6.2.0离线API文档

    ExtJS-6.2.0官方离线API文档

    ExtJS--Windows.rar_extjs_extjs CSharp_extjs windows

    这个名为"ExtJS--Windows.rar"的压缩包显然是关于如何使用ExtJS来模仿Windows桌面应用的示例或教程。让我们深入探讨一下ExtJS以及如何利用它来实现这样的效果。 1. **ExtJS框架**:ExtJS是由Sencha公司开发的一个...

    extjs-basex.js

    `extjs-basex.js`文件很可能是ExtJS库的一个部分,特别是针对BaseX扩展的功能。BaseX是一个高性能、XML数据库系统,常用于处理XML数据。在JavaScript环境中,BaseX的JavaScript接口允许开发者在Web应用中直接与BaseX...

Global site tag (gtag.js) - Google Analytics