在项目中遇到问题,弹出页面的查询重置,对于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
分享到:
相关推荐
ExtJS是一种基于JavaScript的前端开发框架,用于构建富客户端应用。它提供了丰富的组件库,包括TreePanel和GridPanel,这两个组件在数据展示和管理中扮演着重要角色。 TreePanel是ExtJS中的一个树形控件,它允许你...
用ExtJS4实现的treepanel与gridpanel的简单互动案例 包含mvc开发模式与普通开发模式两种 普通开发模式:需要在引入js文件夹中的main.js文件 mvc开发模式:需要引入app文件夹中的app.js文件 适合初学extjs4的朋友
完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.
根据提供的文件信息,我们可以深入探讨如何在ExtJS4框架中使用MVC2模式下的TreePanel组件结合动态JSON数据实现树形结构的展示与交互。以下将详细解释代码中涉及的关键...这对于开发人员来说是一个非常实用的参考案例。
在"Extjs 做的treepanel+tab切换页"这个项目中,我们主要关注的是如何利用ExtJS 3.2版本来创建一个具备折叠面板(Collapsible Panel)功能的树形视图(TreePanel),以及与之联动的选项卡(TabPanel)。这个设计允许...
在本篇文章中,我们将深入探讨如何在ExtJS框架中获取TreePanel中所有被选中(checked)的叶子节点的ID。此技术对于处理复杂的数据结构、优化用户交互体验以及实现高效的数据管理至关重要。 ### 一、ExtJS简介 ...
在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...
学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. ...
对于深入理解ExtJs的使用和开发,掌握TreePanel的知识至关重要。同时,结合源码学习可以帮助你更好地理解其内部机制,提升你的JavaScript编程技能。在实际项目中,灵活运用这些技巧,可以大大提高用户体验和工作效率...
主要方法: collapseAll():收缩所有树节点 expandAll():展开所有树节点 getRootNode():获取根节点 getNodeById(String id):获取指定id的节点 expand( [Boolean deep], [Boolean anim],
extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料extjs开发文档学习资料
在本文中,我们将探讨ExtJS 4框架中的TreePanel组件如何动态地改变行高。TreePanel是ExtJS中用于展示树形结构数据的组件,它通常用于显示文件系统结构、组织架构等层次化数据。动态改变行高是提高用户界面友好性和...
EXTJS是一种基于JavaScript的前端开发框架,用于构建富互联网应用程序(RIA)。它提供了一系列组件,如表格、面板、菜单、窗口等,使开发者能够创建功能...掌握这些工具的使用方法,对于提升EXTJS开发效率至关重要。
extjs2.0版本的开发包,包括开发手册,手册提供了extjs的大部门功能的使用,对初级开发者尤其有用
EXTJS中的TreePanel是用于展示层级数据的组件,它以树状结构呈现数据。TreePanel提供了丰富的配置项和方法,使得我们可以灵活地控制树的显示和交互。以下是对TreePanel及其主要配置项和方法的详细说明: 1. **主要...
ExtJS开发实战 ExtJS开发实战 上传只能选资源分,没办法,我想免费分享的
Extjs开发工具(包含Dreamweaver、Eclipse、VS)Extjs开发工具(包含Dreamweaver、Eclipse、VS)Extjs开发工具(包含Dreamweaver、Eclipse、VS)Extjs开发工具(包含Dreamweaver、Eclipse、VS)
EXTJS不自带服务器端适配层,因此需要开发者自行处理数据结构。主要的通信方式包括: 1. 使用`Ext.Ajax.request`进行异步请求,服务器可以返回JSON或HTML片段。 2. `Ext.tree.TreeLoader`用于加载树形结构,服务器需...
本资源包包含ExtJs的开发指南书籍、实例以及可视化工具,帮助开发者更高效地学习和使用ExtJs。 1. **ExtJs 开发指南书籍**:书籍通常会详细介绍ExtJs的基础知识,包括类库结构、组件系统、数据绑定、事件处理、布局...