`
yjzagan2003
  • 浏览: 37109 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Extjs开发之对于TreePanel的MultiSelectionModel重置不起作用

 
阅读更多

在项目中遇到问题,弹出页面的查询重置,对于Treepanel的MultiSelectionModel不起作用。

需要点击“查询”按钮弹出子菜单,进行条件查询。(如图:Treepanel_1.gif)



 

 

 

 

但是对于查询界面,点击“重置”时,输入框可以重置为空,而Treepanel的MultiSelectionModel不起作用,即点击重置后,复选框没有取消勾选。(如图:Treepanel_2.gif)



 

 

 

 

最后找到问题所在:
1)光tmos_form.form.reset();是不管用的
2)最后还要重置置所有多选的“值”和“显示”为false:setChildNodesCheck(worksheetstatetroot, false);
3)还要清除 父Store的参数,否则再重新点击“查询”按钮时,原来条件没有删除,查找出来的结果和预期的不同:parent.paraStore.removeAll();
并且要注意顺序,测试时,先重置,在设置false,最后删除。
{
 text: '重置',
 handler: function(){
  tmos_form.form.reset();
  setChildNodesCheck(worksheetstatetroot, false);        
  //将父页面的原有查询参数除去
  parent.paraStore.removeAll();                  
 }
}
 //将父页面的原有查询参数除去
 parent.paraStore.removeAll();
}

 

代码如下:

Ext.onReady(function(){
    Ext.QuickTips.init();
    ......
    
    //工单状态选择树
    var worksheetstatetroot = new Ext.tree.AsyncTreeNode({   
        id: "worksheetstatetroot",   
        text: "工单状态"  
    });   
    
   var worksheetstatetree= new Ext.tree.TreePanel({ 
      id:"worksheetstatetreepanel",
      title: "工单状态",   
      renderTo: Ext.getBody(),  
      autoScroll : true, 
      lines:true,//树线
    width: 265,   
      height:200,  
      animate:false, 
      root: worksheetstatetroot,   
      useArrows: false,   
      selModel: new Ext.tree.MultiSelectionModel(),
      loader:new Ext.tree.TreeLoader({
        dataUrl:"<%=request.getContextPath()%>/workSheetAction.do?dispatch=getDicTree",
        baseParams:{DIC_TYPE:'工单状态'}
      })           
    })   
    worksheetstatetree.getRootNode().expand(true); //级联展开所有子节点  

   var tmos_form=new Ext.form.FormPanel({
          plain:true,
          layout:"form",
          labelAlign: 'right',
          labelWidth: 70,
          frame:true,
          width:'100%',
          autoHeight:true,//使自适应展开排版			
       items:[{//行1
 	 layout:'column',
 	 items: [
                        //列
             {   ...... },
          	    {   columnWidth:.33,
          	         layout: 'form', 
          	         xtype: 'fieldset', 
          		 autoHeight: true,  
          		 style: 'margin-top: 0px;margin-left: 5px;',
              	  items: [          					
              	       new Ext.form.NumberField({   
              		 fieldLabel:'新电话号码',   
              		 name:'OLD_NUM',
              		id:'OLD_NUM',
              		allowDecimals : false,//不允许输入小数   
              		allowNegative : false,//不允许输入负数   
              		nanText :'请输入有效的整数',//无效数字提示   
              		width : 225
            		     }),
            		     worksheetstatetree
                       	  ]
           	     }        				   				 		
 	]
         }],
        buttons: [{
	 text: '重置',
	 handler: function(){
	      tmos_form.form.reset();
	      setChildNodesCheck(worksheetstatetroot, false);  						
	      //将父页面的原有查询参数除去
	    parent.paraStore.removeAll();	               		
	 }
       }]
  });
 tmos_form.render("tmos_form");	
 });

//设置子节点的选中或者是不选中
function setChildNodesCheck(node, blnChecked) {
    var iLength = node.childNodes.length;
    if (iLength == 0) return;
    var childNode = null;
    for (var i = 0; i < iLength; i++) {
        childNode = node.childNodes[i];
        childNode.attributes.checked = blnChecked;//这个是改变值的
        childNode.getUI().checkbox.checked = blnChecked;//这个是改变显示的
    }
};

 

 

 

  • 大小: 16.4 KB
  • 大小: 9.1 KB
0
2
分享到:
评论

相关推荐

    Extjs入门教程(treePanel和GridPanel)

    ExtJS是一种基于JavaScript的前端开发框架,用于构建富客户端应用。它提供了丰富的组件库,包括TreePanel和GridPanel,这两个组件在数据展示和管理中扮演着重要角色。 TreePanel是ExtJS中的一个树形控件,它允许你...

    ExtJS4 treepanel与girdpanel简单案例(包括MVC模式与非MVC模式)

    用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

    extjs4 MVC2 TreePanel动态JSON实现

    根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键...这对于开发人员来说是一个非常实用的参考案例。

    Extjs做的treepanel+tab切换页

    在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...

    获取Extjs中的TreePanel中所有的被checked的叶子节点的id

    在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    ExtJS 3.4关于TreePanel的一些实例

    学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...

    无废话ExtJs 系列教程十五[树:TreePanel]

    对于深入理解ExtJs的使用和开发,掌握TreePanel的知识至关重要。同时,结合源码学习可以帮助你更好地理解其内部机制,提升你的JavaScript编程技能。在实际项目中,灵活运用这些技巧,可以大大提高用户体验和工作效率...

    ExtJS_TreePanel_树的配置详细属性

    主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],

    extjs开发文档学习资料

    extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料

    extjs4 treepanel动态改变行高度示例

    在本文中,我们将探讨ExtJS 4框架中的TreePanel组件如何动态地改变行高。TreePanel是ExtJS中用于展示树形结构数据的组件,它通常用于显示文件系统结构、组织架构等层次化数据。动态改变行高是提高用户界面友好性和...

    extjs 开发工具

    EXTJS是一种基于JavaScript的前端开发框架,用于构建富互联网应用程序(RIA)。它提供了一系列组件,如表格、面板、菜单、窗口等,使开发者能够创建功能...掌握这些工具的使用方法,对于提升EXTJS开发效率至关重要。

    extjs开发包开发手册

    extjs2.0版本的开发包,包括开发手册,手册提供了extjs的大部门功能的使用,对初级开发者尤其有用

    extjs TreePanel

    EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...

    ExtJS开发实战-详解

    ExtJS开发实战 ExtJS开发实战 上传只能选资源分,没办法,我想免费分享的

    Extjs开发工具(包含Dreamweaver、Eclipse、VS)

    Extjs开发工具(包含Dreamweaver、Eclipse、VS)Extjs开发工具(包含Dreamweaver、Eclipse、VS)Extjs开发工具(包含Dreamweaver、Eclipse、VS)Extjs开发工具(包含Dreamweaver、Eclipse、VS)

    EXTJS开发总结.pdf

    EXTJS不自带服务器端适配层,因此需要开发者自行处理数据结构。主要的通信方式包括: 1. 使用`Ext.Ajax.request`进行异步请求,服务器可以返回JSON或HTML片段。 2. `Ext.tree.TreeLoader`用于加载树形结构,服务器需...

    ExtJs 开发指南书籍 实例 可视化工具

    本资源包包含ExtJs的开发指南书籍、实例以及可视化工具,帮助开发者更高效地学习和使用ExtJs。 1. **ExtJs 开发指南书籍**:书籍通常会详细介绍ExtJs的基础知识,包括类库结构、组件系统、数据绑定、事件处理、布局...

Global site tag (gtag.js) - Google Analytics